這篇文章帶大家深入了解ES6，了解學習ES6新增特性，希望對大家有幫助！
前端（vue）入門到精通課程：進入學習
ECMAScript，是由網景公司製定的一種脚本语言的标准化规范；最初命名為Mocha，後來改名為LiveScript，最後重命名為JavaScript
ECMAScript 2015（ES2015），第6 版，最早被稱為ECMAScript 6（ES6），增加了新的特性。
ES6 區塊級作用域let
首先，什麼是作用域？作用域簡單講就是宣告一個變量，這個變數的有效範圍，在let沒來之前。 js 只有var的全局作用域和函数作用域， ES6為js 帶來了块级作用域。
{
var a = "?";
let b = "⛳";
}
console.log(a);
console.log(b);? Uncaught ReferenceError: b is not defined
可以看到，我們使用var 關鍵字在區塊中定義了變數a，其實全域可以訪問到，所以說， var声明的变量是全局的，但我們想讓變數就在區塊中生效，出了區塊就訪問不了，這時就可以使用ES6新增的區塊級作用域關鍵字let來聲明這個變數a，當我再次訪問，報錯了，說a is not defined ，a 沒有定義
如下所示，首先定義了一個函數，返回一個數組，在未使用解構數組前，調用數組並把返回值賦值給temp ，然後打印temp 數組，使用了解构数组後，直接定義一個數組變量，然後將函數傳回值指向該變量，他會自動把第一項的值賦值給第一個數組變量，第二項賦值給第二個數組變量，以此類推，最後打印三個變量，看到沒有問題
function breakfast() {
return ['?', '?', '?'];
}
var temp = breakfast();
console.log(temp[0], temp[1], temp[2]);
let [a, b, c] = breakfast();
console.log(a, b, c);? ? ? ? ? ?
首先breakfast函數傳回一個对象，使用解构对象，定義對象，鍵值對中鍵表示映射的實際對象的鍵名，值就是自訂變量，解構完成，會自動完成賦值，然後呼叫breakfast 函數，傳回對象，隨後列印變數a，b，c ，可以看到沒問題
function breakfast() {
return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);? ? ?
在使用模板字串前，我們拼接字串變數使用+
使用ES6 提供的模板字串，首先使用`` 把字串包起來，當要使用變數時，使用${变量}
let a = '?',
b = '?️';
let c = '今天吃' + a + '吃完看' + b;
console.log(c);
let d = `今天吃 ${a} 吃完看 ${b}`;
console.log(d);今天吃?吃完看?️ 今天吃 ? 吃完看 ?️
使用這些函數，可以輕鬆的完成是不是以什麼開頭的字串，是不是以什麼結尾的字串，是不是包含了什麼字串等的操作
let str = '你好，我是小周 ❤️';
console.log(str.startsWith('你好'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
console.log(str.includes(" "));true true false true
ES6裡，可以使用預設參數，當呼叫函數時，沒有給參數進行賦值時，就使用設定的預設參數執行，當給參數賦值時，就會使用新賦的值執行，覆寫預設值，使用如下：
function say(str) {
console.log(str);
}
function say1(str = '嘿嘿') {
console.log(str);
}
say();
say1();
say1('❤️');undefined 嘿嘿❤️
使用...可以展開元素，方便操作，使用如下：
let arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); let brr = ['王子', ...arr]; console.log(brr); console.log(...brr);
[ '❤️', '?', '?' ] ❤️ ? ? [ '王子', '❤️', '?', '?' ] 王子 ❤️ ? ?
...操作符用在函數參數上，接收一個參數數組，使用如下：
function f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? ? [ '☃️', '㊙️' ] ? ? ☃️ ㊙️
使用.name可以取得函數的名字，具體使用如下：
function f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);f1 f2 f4
使用箭頭函數可以讓程式碼更簡潔，但也要注意箭頭函數的局限性，以及箭頭函數中本身沒有this，this指向父級
let f1 = a => a;
let f2 = (a, b) => {
return a + b;
}
console.log(f1(10));
console.log(f2(10, 10));10 20
使用es6的物件表達式，如果物件屬性和值一樣，可以省略值，函數寫法可以省去function ，用法如下：
let a = '㊙️';
let b = '☃️';
const obj = {
a: a,
b: b,
say: function () {
}
}
const es6obj = {
a,
b,
say() {
}
}
console.log(obj);
console.log(es6obj); { a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }使用const關鍵字定義衡量， const限制的是給衡量分配值的動作，並不限制衡量中的值，使用如下：
const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
app = 10;可以看到當再次給衡量分配值就報錯了
☃️ ? ☃️ ? ? app = 10; ^ TypeError: Assignment to constant variable.
使用點定義物件屬性時，如果屬性名中含有空格字符，是不合法的，語法通不過的，使用[属性名]可以完美解決，並且不僅可以直接寫明屬性名，還可以使用變數來指定，具體使用如下：
let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用點定義屬性中間有空格是不合法的// obj.little name = '小王子';
obj[a] = '小王子';
console.log(obj); { name: '王子', 'little name': '小王子' }一些特殊值使用===或==進行比較的結果，可能不滿足你的需求，這是你可以使用Object.is(第一个值，第二个值)來進行判斷，可能你就開心的笑了
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
false true true false
使用Object.assign()可以把一個物件複製到另一個對象，使用如下：
let obj = {};
Object.assign(
// 來源 obj,
// 複製目標物件 { a: '☃️' }
);
console.log(obj); { a: '☃️' }使用es6可以設定物件的prototype，使用如下：
let obj1 = {
get() {
return 1;
}
}
let obj2 = {
a: 10,
get() {
return 2;
}
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 true 2 true
let obj1 = {
get() {
return 1;
}
}
let obj2 = {
a: 10,
get() {
return 2;
}
}
let test = {
__proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 true 2 true
let obj1 = {
get() {
return 1;
}
}
let test = {
__proto__: obj1,
get() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️
在學習前，先首寫一個迭代器
function die(arr) {
let i = 0;
return {
next() {
let done = (i >= arr.length);
let value = !done ? arr[i++] : undefined;
return {
value: value,
done: done
}
}
}
}
let arr = ['☃️', '?', '?'];
let dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); { value: '☃️', done: false }
{ value: '?', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }OK，看看簡化的生成器
function* die(arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next()); { value: '?', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }使用es6可以快速方便的構建類，好耶
class stu {
constructor(name) {
this.name = name;
}
say() {
return this.name + '說奧裡給';
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());小明說奧裡給
定義get/set方法，用於取得或修改類別的屬性
class stu {
constructor(name) {
this.name = name;
}
get() {
return this.name;
}
set(newStr) {
this.name = newStr;
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());小明大明
使用static關鍵字修飾的方法，不用實例化物件也可以直接使用
class stu {
static say(str) {
console.log(str);
}
}
stu.say("奧裡給 靜態方法");奧裡給 靜態方法
使用繼承，可以減少程式碼冗餘，例如：
class Person {
constructor(name, bir) {
this.name = name;
this.bir = bir;
}
showInfo() {
return '姓名：' + this.name + '生日：' + this.bir;
}
}
class A extends Person {
constructor(name, bir) {
super(name, bir);
}
}
let zhouql = new A("週棋洛", "2002-06-01");
// 週棋洛本身是沒有showInfo方法的，是繼承自Person的console.log(zhouql.showInfo());姓名：週棋洛生日：2002-06-01
Set 集合，與陣列不同，Set 集合中不允許有重複元素
// 建立Set集合let food = new Set('??');
// 重複加，只有一個能進去food.add('?');
food.add('?');
console.log(food);
// 目前集合大小console.log(food.size);
// 判斷集合中是否存在某一元素console.log(food.has('?'));
// 刪除集合中某一元素food.delete('?');
console.log(food);
// 迴圈遍歷集合food.forEach(f => {
console.log(f);
});
// 清空集合food.clear();
console.log(food); Set(3) { '?', '?', '?' }
3
true
Set(2) { '?', '?' }
?
?
Set(0) {}Map結合儲存鍵值對
let food = new Map();
let a = {}, b = function () { }, c = "name";
food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, '米飯');
console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));
food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
console.log(food); Map(3) { {} => '?', [Function: b] => '?', 'name' => '米飯' }
3
?
Map(2) { {} => '?', [Function: b] => '?' }
true
[object Object] + ?
function () { } + ?
Map(0) {}使用模組化開發，es6可以方便的導入和導出一些內容，還有預設導出等等細節
let a = '?';
let f1 = function (str = '你丫的寫參數') {
console.log(str);
}
export { a, f1 }; import {a, f1} from './27模組測試.js';
console.log(a);
f1();
f1('知道了');