源自：https://es6.ruanyifeng.com/

第二章

let命令

ES6 新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

for循環(huán)的計數(shù)器，就很合適使用let命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

不存在變量提升

var命令會發(fā)生“變量提升”現(xiàn)象，即變量可以在聲明之前使用，值為undefined。這種現(xiàn)象多多少少是有些奇怪的，按照一般的邏輯，變量應該在聲明語句之后才可以使用。

為了糾正這種現(xiàn)象，let命令改變了語法行為，它所聲明的變量一定要在聲明后使用，否則報錯。

暫時性死區(qū)

只要塊級作用域內(nèi)存在let命令，它所聲明的變量就“綁定”（binding）這個區(qū)域，不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面代碼中，存在全局變量tmp，但是塊級作用域內(nèi)let又聲明了一個局部變量tmp，導致后者綁定這個塊級作用域，所以在let聲明變量前，對tmp賦值會報錯。

ES6 規(guī)定暫時性死區(qū)和let、const語句不出現(xiàn)變量提升，主要是為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行為。這樣的錯誤在 ES5 是很常見的，現(xiàn)在有了這種規(guī)定，避免此類錯誤就很容易了。

不允許重復聲明

let不允許在相同作用域內(nèi)，重復聲明同一個變量。

塊級作用域

塊級作用域與函數(shù)聲明

ES5 規(guī)定，函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明，不能在塊級作用域聲明。但是，瀏覽器沒有遵守這個規(guī)定，為了兼容以前的舊代碼，還是支持在塊級作用域之中聲明函數(shù)，因此能運行，不會報錯。

ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數(shù)。ES6 規(guī)定，塊級作用域之中，函數(shù)聲明語句的行為類似于let，在塊級作用域之外不可引用。

還有一個需要注意的地方。ES6 的塊級作用域必須有大括號，如果沒有大括號，JavaScript 引擎就認為不存在塊級作用域。

const 命令

• const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

• const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

• const的作用域與let命令相同：只在聲明所在的塊級作用域內(nèi)有效。

• const命令聲明的常量也是不提升，同樣存在暫時性死區(qū)，只能在聲明的位置后面使用。

• const聲明的常量，也與let一樣不可重復聲明。

本質(zhì)

const實際上保證的，并不是變量的值不得改動，而是變量指向的那個內(nèi)存地址所保存的數(shù)據(jù)不得改動。對于簡單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個內(nèi)存地址，因此等同于常量。但對于復合類型的數(shù)據(jù)（主要是對象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個指向?qū)嶋H數(shù)據(jù)的指針，const只能保證這個指針是固定的（即總是指向另一個固定的地址），至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。

頂層對象的屬性

ES6 為了改變這一點，一方面規(guī)定，為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另一方面規(guī)定，let命令、const命令、class命令聲明的全局變量，不屬于頂層對象的屬性。也就是說，從 ES6 開始，全局變量將逐步與頂層對象的屬性脫鉤。

gobalThis對象

JavaScript 語言存在一個頂層對象，它提供全局環(huán)境（即全局作用域），所有代碼都是在這個環(huán)境中運行。但是，頂層對象在各種實現(xiàn)里面是不統(tǒng)一的。

• 瀏覽器里面，頂層對象是window，但 Node 和 Web Worker 沒有window。
• 瀏覽器和 Web Worker 里面，self也指向頂層對象，但是 Node 沒有self。
• Node 里面，頂層對象是global，但其他環(huán)境都不支持。

同一段代碼為了能夠在各種環(huán)境，都能取到頂層對象，現(xiàn)在一般是使用this變量，但是有局限性。

• 全局環(huán)境中，this會返回頂層對象。但是，Node 模塊和 ES6 模塊中，this返回的是當前模塊。
• 函數(shù)里面的this，如果函數(shù)不是作為對象的方法運行，而是單純作為函數(shù)運行，this會指向頂層對象。但是，嚴格模式下，這時this會返回undefined。
• 不管是嚴格模式，還是普通模式，new Function('return this')()，總是會返回全局對象。但是，如果瀏覽器用了 CSP（Content Security Policy，內(nèi)容安全策略），那么eval、new Function這些方法都可能無法使用。

第三章

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構(gòu)（Destructuring）。

數(shù)組的解構(gòu)賦值

本質(zhì)上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數(shù)組進行解構(gòu)的例子。

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 // []

如果解構(gòu)不成功，變量的值就等于undefined。

另外，解構(gòu)賦值允許指定默認值。

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 內(nèi)部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，只有當一個數(shù)組成員嚴格等于undefined，默認值才會生效。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代碼中，如果一個數(shù)組成員是null，默認值就不會生效，因為null不嚴格等于undefined。

如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值。

對象的解構(gòu)賦值

對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

對象的解構(gòu)可以指定默認值，默認值生效的條件是，對象的屬性值嚴格等于undefined。

字符串的解構(gòu)賦值

字符串也可以解構(gòu)賦值。這是因為此時，字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

類似數(shù)組的對象都有一個length屬性，因此還可以對這個屬性解構(gòu)賦值。

let {length : len} = 'hello';
len // 5

數(shù)值和布爾值的解構(gòu)賦值

解構(gòu)賦值時，如果等號右邊是數(shù)值和布爾值，則會先轉(zhuǎn)為對象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代碼中，數(shù)值和布爾值的包裝對象都有toString屬性，因此變量s都能取到值。

解構(gòu)賦值的規(guī)則是，只要等號右邊的值不是對象或數(shù)組，就先將其轉(zhuǎn)為對象。由于undefined和null無法轉(zhuǎn)為對象，所以對它們進行解構(gòu)賦值，都會報錯。

圓括號問題

ES6 的規(guī)則是，只要有可能導致解構(gòu)的歧義，就不得使用圓括號

建議只要有可能，就不要在模式中放置圓括號

不能使用圓括號的情況

以下三種解構(gòu)賦值不得使用圓括號。

（1）變量聲明語句

// 全部報錯
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

上面 6 個語句都會報錯，因為它們都是變量聲明語句，模式不能使用圓括號。

（2）函數(shù)參數(shù)

函數(shù)參數(shù)也屬于變量聲明，因此不能帶有圓括號。

// 報錯
function f([(z)]) { return z; }
// 報錯
function f([z,(x)]) { return x; }

（3）賦值語句的模式

// 全部報錯
({ p: a }) = { p: 42 };
([a]) = [5];

上面代碼將整個模式放在圓括號之中，導致報錯。

// 報錯
[({ p: a }), { x: c }] = [{}, {}];

上面代碼將一部分模式放在圓括號之中，導致報錯。

可以使用圓括號的情況

可以使用圓括號的情況只有一種：賦值語句的非模式部分，可以使用圓括號。

[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確
[(parseInt.prop)] = [3]; // 正確

上面三行語句都可以正確執(zhí)行，因為首先它們都是賦值語句，而不是聲明語句；其次它們的圓括號都不屬于模式的一部分。第一行語句中，模式是取數(shù)組的第一個成員，跟圓括號無關(guān)；第二行語句中，模式是p，而不是d；第三行語句與第一行語句的性質(zhì)一致。

用途

變量的解構(gòu)賦值用途很多。

（1）交換變量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

上面代碼交換變量x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。

（2）從函數(shù)返回多個值

函數(shù)只能返回一個值，如果要返回多個值，只能將它們放在數(shù)組或?qū)ο罄锓祷亍Ｓ辛私鈽?gòu)賦值，取出這些值就非常方便。

// 返回一個數(shù)組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個對象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

（3）函數(shù)參數(shù)的定義

解構(gòu)賦值可以方便地將一組參數(shù)與變量名對應起來。

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

// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取 JSON 數(shù)據(jù)

解構(gòu)賦值對提取 JSON 對象中的數(shù)據(jù)，尤其有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代碼可以快速提取 JSON 數(shù)據(jù)的值。

（5）函數(shù)參數(shù)的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

指定參數(shù)的默認值，就避免了在函數(shù)體內(nèi)部再寫var foo = config.foo || 'default foo';這樣的語句。

（6）遍歷 Map 結(jié)構(gòu)

任何部署了 Iterator 接口的對象，都可以用for...of循環(huán)遍歷。Map 結(jié)構(gòu)原生支持 Iterator 接口，配合變量的解構(gòu)賦值，獲取鍵名和鍵值就非常方便。

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）輸入模塊的指定方法

加載模塊時，往往需要指定輸入哪些方法。解構(gòu)賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

原文鏈接