摘要：距離上一篇走馬觀花已經快兩年時間了，上個月底正式發布，再寫一篇姊妹篇，介紹新特性。會議的每一項決議必須大部分人贊同，并且沒有人強烈反對才可以通過。已經準備就緒，該特性會出現在年度發布的規范之中。

距離上一篇《ES6 走馬觀花》已經快兩年時間了，上個月底 ES8 正式發布，再寫一篇姊妹篇，介紹 ES8 新特性。

ES8 是 ECMA-262 標準第 8 版的簡稱，從 ES6 開始每年發布一個版本，以年份作為名稱，因此又稱 ECMAScript 2017，簡稱 ES2017。

兩個版本之間間隔時間太久（從 ES5 到 ES6 經歷了 6 年）會有以下兩個問題：

有很多早已討論完畢的特性需要等到標準的大版本發布才能進入標準

有一些特性本身比較復雜，需要較長的時間去討論。但如果推遲到下一個版本，又必須等待很長的時間才能發布

從 ES6 開始新版本發布會更頻繁，每年發布一個版本，把這一年內討論完畢的特性納入標準。

TC39（Technical Committee 39）是一個推動JavaScript發展的委員會。它的成員由各個主流瀏覽器廠商的代表構成。會議的每一項決議必須大部分人贊同，并且沒有人強烈反對才可以通過。因為，對成員來說，同意就意味著有責任去實現它。每個 ECMAScript 特性都會經歷 stage 0 到 stage 4 的每一個階段。在 TC39 proposals 這個 github 倉庫可以看到每個特性的進度。

一種推進ECMAScript發展的自由形式，任何TC39成員，或者注冊為TC39貢獻者的會員，都可以提交。

該階段產生一個正式的提案。

確定一個帶頭人來負責該提案，帶頭人或者聯合帶頭人必須是TC39的成員。

描述清楚要解決的問題，解決方案中必須包含例子，API以及關于相關的語義和算法。

潛在問題也應該指出來，例如與其他特性的關系，實現它所面臨的挑戰。

polyfill和demo也是必要的。

草案是規范的第一個版本，與最終標準中包含的特性不會有太大差別。草案之后，原則上只接受增量修改。

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

必須包含2個實驗性的具體實現，其中一個可以是用轉譯器實現的，例如Babel。

候選階段，獲得具體實現和用戶的反饋。此后，只有在實現和使用過程中出現了重大問題才會修改。

規范文檔必須是完整的，評審人和ECMAScript的編輯要在規范上簽字。

至少要有兩個符合規范的具體實現。

已經準備就緒，該特性會出現在年度發布的規范之中。

通過Test 262的驗收測試。

有2個通過測試的實現，以獲取使用過程中的重要實踐經驗。

ECMAScript的編輯必須規范上的簽字。

新增了 String.prototype.padStart 和 String.prototype.padEnd 兩個函數，用于在字符串開頭或結尾添加填充字符串。函數的聲明如下：

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

其中第一個參數是目標長度；第二個參數是填充字符串，默認是空格。示例：

"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 進行時間格式化。

"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 給命令行輸出信息對齊。

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 事件  為此特性的貢獻

這兩個靜態方法是對原有的 Object.keys() 方法的補充。

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

靜態方法 Object.values() 獲取對象的所有可遍歷屬性的值，返回一個數組。示例如下：

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

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

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

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

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

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

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

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

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

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

使用 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);
}

上述例子中兩種遍歷方式等價。但在更復雜的情況下，這兩種方式的結果會不一樣。for...in 循環會遍歷對象的可枚舉屬性，包括原型鏈上繼承的屬性，而 Object.keys() 不會遍歷繼承的屬性。下面是一個繼承的例子，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"

靜態方法 Object.getOwnPropertyDescriptors 用于獲取對象的屬性描述符，該屬性必須是對象自己定義而不是繼承自原型鏈。結果中包含的鍵可能有 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 標準中允許函數參數列表與調用中的尾部逗號，該特性允許我們在定義或者調用函數時添加尾部逗號。

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

思考：在上述例子中，函數內部的 arguments.length 是 3 還是 4 ？

為解決異步調用引入的 async 函數，由于 Babel 和 Nodejs 很早就支持 async 和 await 關鍵字，這個特性應該是最眾望所歸、最應用廣泛的 ES8 特性了。

Async 函數主要是從 ES6 的 generator 和 yield 進化而來，另外還得益于 TJ 大神的 co 模塊 的廣泛應用，使得 JavaScript 的異步流程控制在 Async 函數進入標準之前就已經在社區經過了廣泛的實踐和討論。這里就不對 Async 函數再做介紹了，社區里有很多優秀的文章，大家自行搜索吧。

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

"ECMAScript" TC39 process

The TC39 process for ECMAScript features

ECMAScript 6 入門