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)變量名與屬性名不一致，必須寫成下面這樣。這實際上說明，對象的解構賦值是下面形式的簡寫。也就是說，對象的解構賦值的內部機制，是先找到同名屬性，而後再賦給對應的變量。真正被賦值的是後者，而不是前者。

//對象的解構賦值的內部機制，是先找到同名屬性，而後再賦給對應的變量。
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");