ES6新特性簡單介紹

1、 let、const 和 block 作用域

let 允許建立塊級作用域，例如：

var a = 2;

{

let a = 3;

console.log(a); // 3

}

console.log(a); // 2

const也是塊級作用域，聲明一個常量，聲明的常量類似于指針，它指向某個引用，也就是說這個「常量」并非一成不變的，如：

{

const ARR = [5,6];

ARR.push(7);//值可以改變的

console.log(ARR); // [5,6,7]

ARR = 10; // TypeError

}

注意事項：

1. let 關鍵詞聲明的變量不具備變量提升（hoisting）特性
2. let 和 const 聲明隻在最靠近的一個塊中（花括号内）有效
3. 當使用常量 const 聲明時，請使用大寫變量，如：CAPITAL_CASING
4. const 在聲明時必須被指派

2、箭頭函數

箭頭函數讓代碼變得更簡潔，并且函數中 this 總是綁定總是指向對象自身

普通函數和箭頭函數：

var getPrice = function() {

return 4.55;

};

// Implementation with Arrow Function

var getPrice = () => 4.55;

3、函數參數預設值

ES6 中允許你對函數參數設定預設值：

let getFinalPrice = (price, tax=0.7) => price + price * tax;

getFinalPrice(500); // 850

4、Spread / Rest 操作符

Spread / Rest 操作符指的是 …，具體是 Spread 還是 Rest 需要看上下文語境。

當被用于疊代器中時，它是一個 Spread 操作符：

function foo(x,y,z) {

console.log(x,y,z);

}

let arr = [1,2,3];

foo(…arr); // 1 2 3

當被用于函數傳參時，是一個 Rest 操作符：

function foo(…args) {

console.log(args);

}

foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5、對象詞法擴充

ES6 允許聲明在對象字面量時使用簡寫文法，來初始化屬性變量和函數的定義方法，并且允許在對象屬性中進行計算操作：

function getCar(make, model, value) {

return {

// 簡寫變量

make, // 等同于 make: make

model, // 等同于 model: model

value, // 等同于 value: value

// 屬性可以使用表達式計算值

[‘make’ + make]: true,

// 忽略 ​​

​function​

​​ 關鍵詞簡寫對象函數

depreciate() {

this.value -= 2500;

}

};

}

let car = getCar(‘Barret’, ‘Lee’, 40000);

// output: {

// make: ‘Barret’,

// model:‘Lee’,

// value: 40000,

// makeBarret: true,

// depreciate: [Function: depreciate]

// }

6、二進制和八進制字面量

ES6 支援二進制和八進制的字面量，通過在數字前面添加 0o 或者0O 即可将其轉換為八進制值：

let oValue = 0o10;

console.log(oValue); // 8

let bValue = 0b10; // 二進制使用 ​​

​0b​

​​ 或者 ​

​0B​

​ console.log(bValue); // 2

7、對象和數組解構

解構可以避免在對象指派時産生中間變量：

function foo() {

return [1,2,3];

}

let arr = foo(); // [1,2,3]

let [a, b, c] = foo();

console.log(a, b, c); // 1 2 3

function bar() {

return {

x: 4,

y: 5,

z: 6

};

}

let {x: x, y: y, z: z} = bar();

console.log(x, y, z); // 4 5 6

8、模闆文法和分隔符

ES6 中有一種十分簡潔的方法組裝一堆字元串和變量。

${ … } 用來渲染一個變量

​​

​作為分隔符 let user = 'Barret'; console.log(​

​Hi ${user}!`); // Hi Barret!

9、for…of VS for…in

for…of 用于周遊一個疊代器，如數組：

let nicknames = [‘di’, ‘boo’, ‘punkeye’];

nicknames.size = 3;

for (let nickname of nicknames) {

console.log(nickname);

}

// 結果: di, boo, punkeye

for…in 用來周遊對象中的屬性：

let nicknames = [‘di’, ‘boo’, ‘punkeye’];

nicknames.size = 3;

for (let nickname in nicknames) {

console.log(nickname);

}

Result: 0, 1, 2, size

10、Promises

ES6 對 Promise 有了原生的支援，一個 Promise 是一個等待被異步執行的對象，當它執行完成後，其狀态會變成 resolved 或者rejected。

p.then((val) => console.log("Promise Resolved", val),
            (err) => console.log("Promise Rejected", err));