ES6 學習筆記
1.let命令
1）let和var的區別：let聲明的變量只有所在的代碼塊有效。
2）沒有變量的提升，一定要聲明後使用。使用let命令聲明變量之前，該變量都是不可用的。形成“暫時性死區”。
3）typeof 不再是一個百分之百安全的操作。
2.塊級作用域
1）es5和es6比較：es5 只有全局作用域和函數作用域，沒有塊級作用域。
2）let實際上為javascript新增了塊級作用域
3）es6 允許塊級作用域的任意嵌套。
4）es5規定函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明，嚴格模式下會報錯。為ES5和es6環境避免報錯，應不要在塊級作用域裏聲明函數。
3.const命令
1）const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。const一旦聲明變量，就必須立即初始化，不能留到以後賦值。
2）其他特性和let類似
3）對於復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const命令只是保證變量名指向的地址不變，並不保證該地址的數據不變，所以將一個對象聲明為常量必須非常小心。
const foo = {}; foo.prop = 123; foo.prop // 123 foo = {}; //常量foo儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把foo指向另一個地址，但對象本身是可變的，所以依然可以為其添加新屬性。
ES5只有兩種聲明變量的方法：var命令和function命令。ES6除了添加let和const命令，後面章節還會提到，另外兩種聲明變量的方法：import命令和class命令。所以，ES6一共有6種聲明變量的方法。
4.頂層對象的屬性
頂層對象，在瀏覽器環境指的是window對象，在Node指的是global對象。 ES6規定，為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另一方面規定，let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。也就是說，從ES6開始，全局變量將逐步與頂層對象的屬性脫鉤。
var a = 1;// 如果在Node的REPL環境，可以寫成global.a // 或者采用通用方法，寫成this.a window.a // 1 let b = 1; window.b // undefined
5.解構賦值
1.數組得解構賦值
1)“模式匹配”為變量賦值；var [a, b, c] = [1, 2, 3];
2) 不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。
let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
3)解構賦值不僅適用於var命令，也適用於let和const命令，對於Set結構，也可以使用數組的解構賦值。只要某種數據結構具有Iterator接口，都可以采用數組形式的解構賦值。
2.對象的解構賦值
1)對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
var { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" var { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined
2)變量名與屬性名不一致，必須寫成下面這樣。這實際上說明，對象的解構賦值是下面形式的簡寫。也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變量。真正被賦值的是後者，而不是前者。
//對象的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變量。<br>var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; var { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ }; baz // "aaa" let obj = { first: ‘hello‘, last: ‘world‘ }; let { first: f, last: l } = obj; f // ‘hello‘ l // ‘world‘
3)和數組一樣，解構也可以用於嵌套結構的對象
var obj = { p: [ ‘Hello‘, { y: ‘World‘ } ] }; var { p: [x, { y }] } = obj; x // "Hello" y // "World" //這時p是模式，不是變量，因此不會被賦值 var node = { loc: { start: { line: 1, column: 5 } } }; var { loc: { start: { line }} } = node; line // 1 loc // error: loc is undefined start // error: start is undefined let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }); obj // {prop:123} arr // [true]
4)數組本質是特殊的對象，因此可以對數組進行對象屬性的解構
var arr = [1, 2, 3]; var {0 : first, [arr.length - 1] : last} = arr; first // 1 last // 3
3.字符串的解構賦值
1)字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。
2)類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。
const [a, b, c, d, e] = ‘hello‘; a // "h" b // "e" c // "l" d // "l" e // "o" let {length : len} = ‘hello‘; len // 5
4.數值和布爾值的解構賦值
解構賦值的規則是，只要等號右邊的值不是對象，就先將其轉為對象。由於undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
5.變量得解構賦值用途
1）交換變量的值。
[x,y]=[y,x];
2)從函數返回多個值
3)函數參數的定義，解構賦值可以方便地將一組參數與變量名對應起來。
// 參數是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 參數是一組無次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
4)提取json數據，解構賦值對提取json對象中的數據，尤其有用。
var jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309] //可以快速提取json中的數據的值。
5）函數參數的默認值
？？？？???????? jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config }) { // ... do stuff };
6)遍歷map結構
任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。
var 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 { SourceMapConsumer, SourceNode } = require("source-map");
ES6 學習筆記