摘要：距離上一篇走馬觀(guān)花已經(jīng)快兩年時(shí)間了，上個(gè)月底正式發(fā)布，再寫(xiě)一篇姊妹篇，介紹新特性。會(huì)議的每一項(xiàng)決議必須大部分人贊同，并且沒(méi)有人強(qiáng)烈反對(duì)才可以通過(guò)。已經(jīng)準(zhǔn)備就緒，該特性會(huì)出現(xiàn)在年度發(fā)布的規(guī)范之中。

距離上一篇《ES6 走馬觀(guān)花》已經(jīng)快兩年時(shí)間了，上個(gè)月底 ES8 正式發(fā)布，再寫(xiě)一篇姊妹篇，介紹 ES8 新特性。

ES8 是 ECMA-262 標(biāo)準(zhǔn)第 8 版的簡(jiǎn)稱(chēng)，從 ES6 開(kāi)始每年發(fā)布一個(gè)版本，以年份作為名稱(chēng)，因此又稱(chēng) ECMAScript 2017，簡(jiǎn)稱(chēng) ES2017。

兩個(gè)版本之間間隔時(shí)間太久（從 ES5 到 ES6 經(jīng)歷了 6 年）會(huì)有以下兩個(gè)問(wèn)題：

有很多早已討論完畢的特性需要等到標(biāo)準(zhǔn)的大版本發(fā)布才能進(jìn)入標(biāo)準(zhǔn)

有一些特性本身比較復(fù)雜，需要較長(zhǎng)的時(shí)間去討論。但如果推遲到下一個(gè)版本，又必須等待很長(zhǎng)的時(shí)間才能發(fā)布

從 ES6 開(kāi)始新版本發(fā)布會(huì)更頻繁，每年發(fā)布一個(gè)版本，把這一年內(nèi)討論完畢的特性納入標(biāo)準(zhǔn)。

TC39（Technical Committee 39）是一個(gè)推動(dòng)JavaScript發(fā)展的委員會(huì)。它的成員由各個(gè)主流瀏覽器廠(chǎng)商的代表構(gòu)成。會(huì)議的每一項(xiàng)決議必須大部分人贊同，并且沒(méi)有人強(qiáng)烈反對(duì)才可以通過(guò)。因?yàn)?，?duì)成員來(lái)說(shuō)，同意就意味著有責(zé)任去實(shí)現(xiàn)它。每個(gè) ECMAScript 特性都會(huì)經(jīng)歷 stage 0 到 stage 4 的每一個(gè)階段。在 TC39 proposals 這個(gè) github 倉(cāng)庫(kù)可以看到每個(gè)特性的進(jìn)度。

一種推進(jìn)ECMAScript發(fā)展的自由形式，任何TC39成員，或者注冊(cè)為T(mén)C39貢獻(xiàn)者的會(huì)員，都可以提交。

該階段產(chǎn)生一個(gè)正式的提案。

確定一個(gè)帶頭人來(lái)負(fù)責(zé)該提案，帶頭人或者聯(lián)合帶頭人必須是TC39的成員。

描述清楚要解決的問(wèn)題，解決方案中必須包含例子，API以及關(guān)于相關(guān)的語(yǔ)義和算法。

潛在問(wèn)題也應(yīng)該指出來(lái)，例如與其他特性的關(guān)系，實(shí)現(xiàn)它所面臨的挑戰(zhàn)。

polyfill和demo也是必要的。

草案是規(guī)范的第一個(gè)版本，與最終標(biāo)準(zhǔn)中包含的特性不會(huì)有太大差別。草案之后，原則上只接受增量修改。

草案中包含新增特性語(yǔ)法和語(yǔ)義的，盡可能的完善的形式說(shuō)明，允許包含一些待辦事項(xiàng)或者占位符。

必須包含2個(gè)實(shí)驗(yàn)性的具體實(shí)現(xiàn)，其中一個(gè)可以是用轉(zhuǎn)譯器實(shí)現(xiàn)的，例如Babel。

候選階段，獲得具體實(shí)現(xiàn)和用戶(hù)的反饋。此后，只有在實(shí)現(xiàn)和使用過(guò)程中出現(xiàn)了重大問(wèn)題才會(huì)修改。

規(guī)范文檔必須是完整的，評(píng)審人和ECMAScript的編輯要在規(guī)范上簽字。

至少要有兩個(gè)符合規(guī)范的具體實(shí)現(xiàn)。

已經(jīng)準(zhǔn)備就緒，該特性會(huì)出現(xiàn)在年度發(fā)布的規(guī)范之中。

通過(guò)Test 262的驗(yàn)收測(cè)試。

有2個(gè)通過(guò)測(cè)試的實(shí)現(xiàn)，以獲取使用過(guò)程中的重要實(shí)踐經(jīng)驗(yàn)。

ECMAScript的編輯必須規(guī)范上的簽字。

新增了 String.prototype.padStart 和 String.prototype.padEnd 兩個(gè)函數(shù)，用于在字符串開(kāi)頭或結(jié)尾添加填充字符串。函數(shù)的聲明如下：

String.prototype.padStart( maxLength [ , fillString ] )
String.prototype.padEnd( maxLength [ , fillString ] )

其中第一個(gè)參數(shù)是目標(biāo)長(zhǎng)度；第二個(gè)參數(shù)是填充字符串，默認(rèn)是空格。示例：

"es8".padStart(2);          // "es8"
"es8".padStart(5);          // "  es8"
"es8".padStart(6, "woof");  // "wooes8"
"es8".padStart(14, "wow");  // "wowwowwowwoes8"
"es8".padStart(7, "0");     // "0000es8"

"es8".padEnd(2);          // "es8"
"es8".padEnd(5);          // "es8  "
"es8".padEnd(6, "woof");  // "es8woo"
"es8".padEnd(14, "wow");  // "es8wowwowwowwo"
"es8".padEnd(7, "6");     // "es86666"

使用 padStart 進(jìn)行時(shí)間格式化。

"8:00".padStart(5, "0");  // "08:00"
"18:00".padStart(5, "0");  // "18:00"
"12".padStart(10, "YYYY-MM-DD") // "YYYY-MM-12"
"09-12".padStart(10, "YYYY-MM-DD") // "YYYY-09-12"

使用 padStart 給命令行輸出信息對(duì)齊。

Commands:

  run       Start a front service
  start     Start a background service
  stop      Stop current background service
  restart   Restart current background service
  help      Display help information

感謝 left-pad 事件  為此特性的貢獻(xiàn)

這兩個(gè)靜態(tài)方法是對(duì)原有的 Object.keys() 方法的補(bǔ)充。

const obj = { 
  x: "xxx", 
  y: 1 
};
Object.keys(obj); // ["x", "y"]

靜態(tài)方法 Object.values() 獲取對(duì)象的所有可遍歷屬性的值，返回一個(gè)數(shù)組。示例如下：

// 基本用法
const obj = { 
  x: "xxx", 
  y: 1 
};
Object.values(obj); // ["xxx", 1]

// 數(shù)組可以看做鍵為下標(biāo)的對(duì)象
// ["e", "s", "8"] -> { 0: "e", 1: "s", 2: "8" }
const obj = ["e", "s", "8"];
Object.values(obj); // ["e", "s", "8"]

// 字符串可以看做鍵為下標(biāo)的對(duì)象
// "es8" -> { 0: "e", 1: "s", 2: "8" }
Object.values("es8"); // ["e", "s", "8"]

// 如果是純 number 型的鍵值，則返回值順序根據(jù)鍵值從小到大排列
const obj = { 10: "xxx", 1: "yyy", 3: "zzz" };
Object.values(obj); // ["yyy", "zzz", "xxx"]

靜態(tài)方法 Object.entries 獲取對(duì)象的雖有可遍歷屬性的鍵值對(duì)，以 [key, value] 數(shù)組的形式返回，順序和 Object.values() 一致。

// 基本用法
const obj = { 
  x: "xxx", 
  y: 1 
};
Object.entries(obj); // [["x", "xxx"], ["y", 1]]

// 數(shù)組可以看做鍵為下標(biāo)的對(duì)象
// ["e", "s", "8"] -> { 0: "e", 1: "s", 2: "8" }
const obj = ["e", "s", "8"];
Object.entries(obj); // [["0", "e"], ["1", "s"], ["2", "8"]]

// 字符串可以看做鍵為下標(biāo)的對(duì)象
// "es8" -> { 0: "e", 1: "s", 2: "8" }
Object.entries("es8"); // [["0", "e"], ["1", "s"], ["2", "8"]]

// 如果是純 number 型的鍵值，則返回值順序根據(jù)鍵值從小到大排列
const obj = { 10: "xxx", 1: "yyy", 3: "zzz" };
Object.entries(obj); // [["1", "yyy"], ["3", "zzz"], ["10": "xxx"]]

上述的 Object.keys(), Object.values(), Object.entries() 通常用來(lái)遍歷一個(gè)對(duì)象，除了這三個(gè)方法外，常用的還有 for...in 和 for...of + Object.keys() 循環(huán)

使用 for...in 遍歷

const obj = { 
  x: "xxx", 
  y: 1 
};
for (let key in obj) {
  console.log(key);
}

使用 for...of + Object.keys() 遍歷

const obj = { 
  x: "xxx", 
  y: 1 
};
for (let key of Object.keys(obj)) {
  console.log(key);
}

上述例子中兩種遍歷方式等價(jià)。但在更復(fù)雜的情況下，這兩種方式的結(jié)果會(huì)不一樣。for...in 循環(huán)會(huì)遍歷對(duì)象的可枚舉屬性，包括原型鏈上繼承的屬性，而 Object.keys() 不會(huì)遍歷繼承的屬性。下面是一個(gè)繼承的例子，Human 繼承自 Animal。

function Animal() {
  this.legs = 4;
}
function Human(name) {
  this.name = name;
}
Human.prototype = new Animal();
let human = new Human("es8");

使用 for...in 遍歷

for (let key in human) {
  console.log(key);
}
// "name", "legs"

使用 for...of + Object.keys() 遍歷

for (let key of Object.keys(human)) {
  console.log(key);
}
// "name"

靜態(tài)方法 Object.getOwnPropertyDescriptors 用于獲取對(duì)象的屬性描述符，該屬性必須是對(duì)象自己定義而不是繼承自原型鏈。結(jié)果中包含的鍵可能有 configurable、enumerable、writable、get、set 以及 value。

const obj = { es8: "hello es8" };
Object.getOwnPropertyDescriptor(obj, "es8");
// {
//   configurable: true,
//   enumerable: true,
//   value: "hello es8"
//   writable: true
// }

ES8 標(biāo)準(zhǔn)中允許函數(shù)參數(shù)列表與調(diào)用中的尾部逗號(hào)，該特性允許我們?cè)诙x或者調(diào)用函數(shù)時(shí)添加尾部逗號(hào)。

function es8(var1, var2, var3,) {
  // do something
}
es8(10, 20, 30,);

思考：在上述例子中，函數(shù)內(nèi)部的 arguments.length 是 3 還是 4 ？

為解決異步調(diào)用引入的 async 函數(shù)，由于 Babel 和 Nodejs 很早就支持 async 和 await 關(guān)鍵字，這個(gè)特性應(yīng)該是最眾望所歸、最應(yīng)用廣泛的 ES8 特性了。

Async 函數(shù)主要是從 ES6 的 generator 和 yield 進(jìn)化而來(lái)，另外還得益于 TJ 大神的 co 模塊 的廣泛應(yīng)用，使得 JavaScript 的異步流程控制在 Async 函數(shù)進(jìn)入標(biāo)準(zhǔn)之前就已經(jīng)在社區(qū)經(jīng)過(guò)了廣泛的實(shí)踐和討論。這里就不對(duì) Async 函數(shù)再做介紹了，社區(qū)里有很多優(yōu)秀的文章，大家自行搜索吧。

SharedArrayBuffer 和 Atomics 是 JavaScript 為多線(xiàn)程能力增加的特性，暫時(shí)使用的場(chǎng)景不多，更多信息可以參考這個(gè)知乎的討論： hax 的回答 —— JavaScript 如果擁有多線(xiàn)程能力會(huì)怎樣？，還有這篇文章對(duì) Shared memory and atomics 介紹得很詳細(xì) 《ES proposal: Shared memory and atomics》

"ECMAScript" TC39 process

The TC39 process for ECMAScript features

ECMAScript 6 入門(mén)