1.ECMAScript 和 JavaScript 的關系
ECMAScript 和 JavaScript 的關系是，前者是后者的規格，后者是前者的一種實現
2.let命令
let命令的基本用法:ES6 新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內有效。
{
var a = 10;
let b = 1;
}
console.log(a); //10
console.log(b); //報錯
for循環有一個特別之處，就是設置循環變量的那部分是一個父作用域，而循環體內部是一個單獨的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
//abc
//abc
//abc
上面代碼正確運行，輸出了3次abc。這表明函數內部的變量i與循環變量i不在同一個作用域，有各自單獨的作用域。
let不存在變量提升
console.log(foo); //undefined
var foo = 2;
console.log(bar); //報錯
let bar = 2;
暫時性死區
var tmp = 123;
if (true) {
tmp = 'abc'; //報錯
let tmp;
}
上面代碼中，存在全局變量tmp，但是塊級作用域內let又聲明了一個局部變量tmp，導致后者綁定這個塊級作用域，所以在let聲明變量前，對tmp賦值會報錯。
ES6明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。
if (true) {
tmp = 'abc';
console.log(tmp); //報錯
let tmp;
console.log(tmp); //undefined
tmp = 123;
console.log(tmp); //123
}
總之，暫時性死區的本質就是，只要一進入當前作用域，所要使用的變量就已經存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現，才可以獲取和使用該變量。
不允許重復聲明
let不允許在相同作用域內，重復聲明同一個變量。
//報錯
function fn() {
let a = 10;
var a = 1;
}
//報錯
function fn() {
let a = 10;
let a = 1;
}
因此，不能在函數內部重新聲明參數。
function fn(arg) {
let arg; //報錯
}
function fn(arg) {
｛
let arg；//不報錯
｝
}
3.塊級作用域
-
為什么需要塊級作用域？
ES5 只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。
第一種場景，內層變量可能會覆蓋外層變量。
function fn() { console.log(tmp); if (false) { var tmp = 'hello world'; } } fn(); //undefined上面代碼的原意是，if代碼塊的外部使用外層的tmp變量，內部使用內層的tmp變量。但是，函數f執行后，輸出結果為undefined，原因在于變量提升，導致內層的tmp變量覆蓋了外層的tmp變量。
第二種場景，用來計數的循環變量泄露為全局變量。
var str = 'hello'; for (var i = 0; i < str.length; i++) { console.log(str[i]); } console.log(i);上面代碼中，變量i只用來控制循環，但是循環結束后，它并沒有消失，泄露成了全局變量。
-
塊級作用域和函數聲明
ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數。ES6規定，塊級作用域之中，函數聲明語句的行為類似于let，在塊級作用域之外不可引用。
但是注意在瀏覽器的ES6環境中，塊級作用域內聲明的函數，行為類似于var聲明的變量。
function f() { console.log('outer'); } (function () { if (false) { function f() { console.log('inside'); } } f(); }())在es5中結果是inside，因為在if內聲明的函數f會被提升到函數頭部；在es6中結果是outer，因為塊級作用域內聲明的函數類似于let，對作用域之外沒有影響。但是在符合es6的瀏覽器中會報錯。實際上執行的代碼是
function f() { console.log('outer'); } (function () { var f; if (false) { function f() { console.log('inside'); } } f();//報錯：f不是一個函數 }())所以考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。如果確實需要，也應該寫成函數表達式，而不是函數聲明語句。
//函數聲明語句 { let a = 'smm'; function f() { return a; } } //函數表達式 { let a = 'smm'; let f = function () { return a; } }
4.const命令
-
基本用法
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。改變常量的值會報錯。
const PI = 3.1415; PI //3.1415 PI = 3; //報錯const一旦聲明變量，就必須立即初始化，不能留到以后賦值。對于const來說，只聲明不賦值，就會報錯。
const foo; //報錯其余的與let相同，1.只在聲明所在的塊級作用域內有效。2.const命令聲明的常量也是不提升，同樣存在暫時性死區，只能在聲明的位置后面使用。3.const聲明的常量，也與let一樣不可重復聲明。
5.數組的結構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
以前，為變量賦值，只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允許寫成下面這樣。
let [a,b,c] = [1,2,3];
上面代碼表示，可以從數組中提取值，按照對應位置，對變量賦值。
本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。
let [foo, [[bar]], baz] = [1, [[2]], 3];
foo; //1
bar; //2
baz; //3
let [, , third] = ['foo', 'bar', 'baz'];
third; //baz
let [x, , y] = [1, 2, 3];
x; //1
y; //3
let [head, ...tail] = [1, 2, 3, 4];
head; //1
tail; //[2,3,4]
let [x, y, ...z] = ['a'];
x; //'a'
y; //undefined
z; //[]
如果解構不成功，變量的值就等于undefined。
let [foo] = [];
let [bar, foo] = [1];
以上兩種情況都屬于解構不成功，foo的值都會等于undefined。
另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。這種情況下，解構依然可以成功。
let [x, y] = [1, 2, 3];
x; //1
y; //2
let [a, [b], c] = [1, [2, 3], 4];
a; //1
b; //2
c; //4
如果等號的右邊不是數組（或者嚴格地說，不是可遍歷的結構），那么將會報錯。
//報錯
let[foo] =1;
let[foo] =false;
let[foo] =NaN;
let[foo] =undefined;
let[foo] =null;
let[foo] ={};
上面的語句都會報錯，因為等號右邊的值，要么轉為對象以后不具備Iterator接口（前五個表達式），要么本身就不具備Iterator接口（最后一個表達式）。
默認值
解構賦值允許指定默認值。
let [foo = true] = [];
foo; //true
let [x, y = 'b'] = ['a']; //x = 'a',y = 'b'
let [x, y = 'b'] = ['a',undefined]; //x = 'a',y = 'b'
注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員只有嚴格等于undefined，默認值才會生效的。看下面例子：
let [x = 1] = [undefined];
x; //1
let [x = 1] = [null];
x; //null
上面代碼中，如果一個數組成員是null，默認值就不會生效，因為null不嚴格等于undefined。
如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1];
x; //1
上面代碼中，因為x能取到值，所以函數f根本不會執行。
默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。
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] = []; //報錯
上面最后一個表達式之所以會報錯，是因為x用到默認值y時，y還沒有聲明。
6.對象的結構賦值
let {bar, foo} = {foo: 'aaa', bar: 'bbb'};
foo; //'aaa'
bar; //'bbb'
let {baz} = {foo: 'aaa', bar: 'bbb'};
baz; //undefined
對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
上面代碼的第一個例子，等號左邊的兩個變量的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變量沒有對應的同名屬性，導致取不到值，最后等于undefined。
對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。
let {foo:baz} = {foo: 'aaa', bar: 'bbb'};
baz; //'aaa'
foo; // 報錯
與數組一樣，解構也可以用于嵌套結構的對象。
let obj = {
p: [
'hello',
{y: 'world'}
]
};
let {p: [x, {y}]} = obj;
x; //hello
y; //world
注意，這時p是模式，不是變量，因此不會被賦值。如果p也要作為變量賦值，可以寫成下面這樣。
let obj = {
p: [
'hello',
{y: 'world'}
]
};
let {p,p: [x, {y}]} = obj;
x; //hello
y; //world
p; //['hello',{y:'world'}]
下面再看一個例子：
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let {loc, loc: {start}, loc: {start: {line}}} = node;
line; //1
loc; //{start : obj}
start //{line : 1, column : 5}
上面代碼有三次解構賦值，分別是對loc、start、line三個屬性的解構賦值。注意，最后一次對line屬性的解構賦值之中，只有line是變量，loc和start都是模式，不是變量。
下面是嵌套賦值的例子：
let obj = {};
let arr = [];
({foo: obj.prop, bar: arr[0]} = {foo: 123, bar: true});
obj; //{prop:123}
arr; //[true]
上邊的例子嚴格按照對象的解構賦值的內部機制賦值，看起來就是很簡單了
對象的解構也可以指定默認值。同樣，默認值生效的條件是，對象的屬性值嚴格等于undefined。
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 = 'smm'} = {};
msg; //'smm'
再看例子：
var {x = 3} = {x: undefined};
x; //3
var {x = 3} = {x: null};
x; //null
上面代碼中，如果x屬性等于null，就不嚴格相等于undefined，導致默認值不會生效。
如果解構失敗，變量的值等于undefined。
let {foo} = {bar: 'bar'};
foo; //undefined
如果解構模式是嵌套的對象，而且子對象所在的父屬性不存在，那么將會報錯。
let {foo: {bar}} = {baz: 'baz'}; //報錯
上面代碼中，等號左邊對象的foo屬性，對應一個子對象。該子對象的bar屬性，解構時會報錯。原因很簡單，因為foo這時等于undefined，再取子屬性就會報錯。
如果要將一個已經聲明的變量用于解構賦值，必須非常小心。
//報錯
let x;
{x} = {x : 1};
正確的寫法是：
let x;
（{x} = {x : 1}）;
上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免JavaScript將其解釋為代碼塊，才能解決這個問題。
7.字符串的結構賦值
字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。
let [a, b, c, d, e] = 'hello';
a; //'h'
b; //'e'
c; //'l'
d; //'l'
e; //'o'
類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。
let {length: len} = 'hello';
len; //5
8.函數參數的結構賦值
function add([x, y]) {
return x + y;
}
add([1, 2]); //3
上面代碼中，函數add的參數表面上是一個數組，但在傳入參數的那一刻，數組參數就被解構成變量x和y。對于函數內部的代碼來說，它們能感受到的參數就是x和y。
下面是另一個例子。
[[1, 2], [3, 4]].map(([x, y]) => x + y); //[3,7]
函數參數的解構也可以使用默認值。
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); //[3,8]
move({x: 3}); //[3,0]
move({}); //[0,0]
move(); //[0,0]
上面代碼中，函數move的參數是一個對象，通過對這個對象進行解構，得到變量x和y的值。如果解構失敗，x和y等于默認值。
注意，下面的寫法會得到不一樣的結果。
function move({x, y} = {x: 0, y: 0}) {
return [x, y];
}
move({x: 3, y: 8}); //[3,8]
move({x: 3}); //[3,undefined]
move({}); //[undefined,undefined]
move(); //[0,0]
上面代碼是為函數move的參數指定默認值，而不是為變量x和y指定默認值，所以會得到與前一種寫法不同的結果。
undefined就會觸發函數參數的默認值。
[1, undefined, 3].map((x = 'yes') => x);
// [1,'yes',3]
9.變量的解構賦值的用途
1.交換變量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
2.從函數返回多個值
函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。
//返回一個數組
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
//返回一個對象
function example() {
return {
foo: 1,
bar: 2
}
}
let {foo, bar} = example();
3.函數參數的定義
解構賦值可以方便地將一組參數與變量名對應起來。
//參數是一組有序的值
function f([x, y, z]) {
}
f([1, 2, 3]);
//參數是一組無序的值
function f({foo, bar}) {
}
f({bar: 1, foo: 2});
4.提取JSON數據
解構賦值對提取JSON對象中的數據，尤其有用。
let jsonData = {
id: 42,
status: 'OK',
data: [867, 5309]
};
let {id, status, data: num} = jsonData;
console.log(id, status, num);
//42,'OK',[867,5309]
上面代碼可以快速提取 JSON 數據的值。
5.函數參數的默認值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true
}) {
}
指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || 'default foo';這樣的語句。
6.遍歷Map結構
任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。
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) {
}
7.輸入模塊的指定方法
加載模塊時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。
const {SourseMapConsumer, SourseNode} = require('sourse-map');
參考文章阮一峰的ECMAScript 6入門
