ES6 基礎
1. ECMAScript 簡介
（1）. ECMAScript 和 JavaScript 的關係
ECMAScript 是 JavaScript 的規範，JavaScript 是 ECMAScript 的一種實現。
（2）. ES6 與 ECMAScript 2015 的關係
ES6 是一個泛指，含義是 ES5.1 版本以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017等等。而 ES2015 則是正式名稱，特指2015年發佈的正式版本的語言標準。
（3）Babel轉碼器
安裝 babel
npm install --save-dev @babel/core
// -S \ -D 區分產品安裝依賴還是開發安裝依賴
TIPS
-S, --save: Package will appear in your dependencies.
-D | -P, --save-dev: Package will appear in your devDependencies.
-O, --save-optional: Package will appear in your optionalDependencies.
配置文件 .babelrc（用於設置轉碼規則和插件）
基本格式如下：
{
"presets": [],
"plugins": []
}
presets 字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。
// 最新轉碼規則
npm install --save-dev @babel/preset-env
// react 轉碼規則
npm install --save-dev @babel/preset-react
然後將這些規則加入 .babelrc
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
命令行轉碼
Babel 提供命令行轉碼工具 @babel/cli，用於命令行轉碼。
安裝@babel/cli
npm install --save-dev @babel/cli
基本用法:
# 轉碼結果輸出到標準輸出
$ npx babel example.js
# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 參數生成source map文件
$ npx babel src -d lib -s
2. let 和 const 命令
（1）let 和 const 的共同點：
1）不會存在變量提升
2）會造成暫時性死區
3）不允許重複聲明
（2）let 的其它特點
let 爲 JavaScript 新增了塊級作用域
（3）const 的其它特點
const 聲明的是一個只讀的變量（const 一旦聲明變量，就必須立即初始化）。
const 實質上保證的是：變量所指向的那個內存地址的數據不得更改。（對於簡單數據類型而言，const 聲明的變量就是一個常量；當時對於複合數據類型而言，只是說指向對象的內存地址不變，卻不能保證具體的數據不發生改變）
（4）ES6 聲明變量的六種方法
var
function
let
const
class
import
後四種是 ES6 中新增的。
3. 變量的解構賦值
基本用法： 按照一定的模式，從數組和對象中提取值，對變量進行賦值。
（1）數組的解構賦值
let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3
let [foo, [bar], baz] = [1, [2], 3];
// bar = 2, baz = 3
let [ , , third] = [1, 2, 3];
// third = 3;
let [x, , y] = [1, 2, 3];
// y = 3
let [head, ...tail] = [1, 2, 3, 4];
// tail = [2, 3, 4]
let [x, y, ...z] = ['a'];
// x = 'a', y = undefined, z = []
// 如果解構不成功，那麼變量的值就等於 undefined
對數組可進行對象解構賦值
let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;
// first = 1, last = 3
（2）對象的解構賦值
對象的解構賦值的規則與數組的類似，其中比較重要的一個不同點就是：數組的解構賦值與數組數據的次序關係密切；而對象的解構賦值則不是這樣的，變量的取值與對象的屬性名關係密切。如果變量名與對象某個屬性名相同，則被賦值對應的屬性值。
let { log, sin, cos } = Math;
// 對象的解構賦值，可以很方便地將對象的方法賦值給某個變量。
如果變量名與屬性名不一致，則要採取如下的語法：
let { foo: baz } = { bar: 1, foo: 2 };
// baz = 2
// foo: error: foo is not defined
（3）字符串的解構賦值
const [ a, b, c, d, e ] = 'hello';
// a = 'h', e = 'o'
let { length: len } = 'hello';
// len = 5
（4）數值和布爾值的解構賦值
解構賦值時，如果等號右邊是數值和布爾值，則會先轉爲對象。
let { toString: s } = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
(5) 函數參數的解構賦值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
（6）解構賦值中的默認值
無論是數組還是對象的解構賦值，只有當變量取值嚴格等於 undefined 時，默認值纔會被賦給變量
let [x = 1] = [];
// x = 1
let [x = 1] = [undefined];
// x = 1
let [x = 1] = [null];
// x = null
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
var {x = 3} = {};
// x = 3
var {x, y = 5} = {x: 1};
// x = 1
// y = 5
var {x: y = 3} = {};
// y = 3
var {x: y = 3} = {x: 5};
// y = 5
var { message: msg = 'Something went wrong' } = {};
// msg = "Something went wrong"
默認值生效的條件是，對象的屬性值嚴格等於undefined。
var {x = 3} = {x: undefined};
// x = 3
var {x = 3} = {x: null};
// x = null
（7）用途
1）交換變量的值
2）從函數返回多個值，可以很方便解構賦值給變量
3）提取 JSON 數據
4）函數參數的默認值
5）輸入模塊的指定方法
（8）其它說明
1）如果解構失敗，則變量的值爲 undefined
2）解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉爲對象。由於undefined和null無法轉爲對象，所以對它們進行解構賦值，都會報錯。