ES6

ECMAScript 6.0,簡稱ES6是JavaScript語言的下一代標準，在2015年6月釋出。目的是讓JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

Babel轉碼器

Babel是一個廣泛使用的ES6轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。

Babel的配置檔案是.babelrc，存放在專案的根目錄下。使用Babel的第一步，就是配置這個檔案。

Babel提供babel-cli工具，用於命令列轉碼。

babel-cli工具自帶一個babel-node命令，提供一個支援ES6的REPL環境。它支援Node的REPL環境的所有功能，而且可以直接執行ES6程式碼。它不用單獨安裝，而是隨babel-cli一起安裝。

$ npm install --save-dev babel-cli

babel-register模組改寫require命令，為它加上一個鉤子。此後，每當使用require載入.js、.jsx、.es和.es6字尾名的檔案，就會先用Babel進行轉碼。

$ npm install --save-dev babel-register

如果某些程式碼需要呼叫Babel的API進行轉碼，就要使用babel-core模組。

$ npm install babel-core --save

Babel預設只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全域性物件，以及一些定義在全域性物件上的方法（比如Object.assign）都不會轉碼。

ES6在Array物件上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法執行，必須使用babel-polyfill，為當前環境提供一個墊片。

$ npm install --save babel-polyfill

let和const命令

let和const只在當前塊級作用域下宣告才有效。

{
    let a = 10;
    var b = 1;
}
a // ReferenceError: a is not define.
b // 1
複製程式碼

不存在變數提升

// var 情況
console.log(foo); // undefined
var foo = 2;
// let
 
 情況
console.log(bar); // 報錯ReferenceError
let bar = 2;
複製程式碼

暫時性死區

console.log(bar); // 報錯ReferenceError
let bar = 2;
複製程式碼

不允許重複宣告

let a; 
let a; 
console.log(a); // 報錯
複製程式碼

const 宣告一個只讀的常量。一旦宣告，常量的值就不能改變。

ES6宣告變數的六種方法：

var、function、let、const、import、class

變數的解構賦值

陣列的解構賦值

let [a, b, c] = [1, 2, 3]; // a = 1; b = 2; c = 3;
let [a, b, c = 3] = [1,2]; // a = 1; b = 2; c = 3;
複製程式碼

物件的解構賦值

let { foo, bar } = { foo: "aaa", bar: "bbb" }; 
複製程式碼

字串的解構賦值

const [a,b,c,d,e] = 'hello';
複製程式碼

函式引數的解構賦值

funtion add([x, y]) {
    return x + y;
}
add([1,2]);  // 3
複製程式碼

用途

• 交換變數的值

let x = 1; 
let y = 2;
[x, y] = [y, x];
複製程式碼

• 從函式返回多個值

// 返回一個數組
function example() {
    return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個物件
function example() {
    return {
        foo: 1,
        bar: 2
    };
}
let { foo, bar } = example();
複製程式碼

• 函式引數的定義

// 引數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 引數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
複製程式碼

• 提取JSON資料

let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
複製程式碼

• 函式引數的預設值

JQuery.ajax = function (url, {
   async = true,
   beforeSend = function () {},
   cache = true,
   complete = function () {},
   crossDomain = false,
   global = true
} = {}) {
    // do stuff 
};
複製程式碼

• 遍歷Map結構

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}
複製程式碼

參考資料：

caibaojian.com/es6/

阮一峰ECMAScript 6入門