ES6、ES7、ES8、ES9、ES10 新特性簡述

• Stage 0: strawman——最初想法的提交。
• Stage 1: proposal（提案）——由TC39至少一名成員倡導的正式提案文件，該文件包括API事例。
• Stage 2: draft（草案）——功能規范的初始版本，該版本包含功能規范的兩個實驗實現。
• Stage 3: candidate（候選）——提案規范通過審查並從廠商那里收集反饋
• Stage 4: finished（完成）——提案准備加入ECMAScript，但是到瀏覽器或者Nodejs中可能需要更長的時間。

查看 TC39 ECMAScript proposals 1、2、3 狀態： https://github.com/tc39/proposals

查看 TC39 ECMAScript proposals 最終完成狀態： https://github.com/tc39/proposals/blob/master/finished-proposals.md

ES6新特性（2015）

• 類 class
• 模塊化 import && export
• 箭頭函數 =>
• 函數參數默認值 fn(a = 1) {}
• 模板字符串 url = ${window.location.href}
• 解構賦值 let { a, b } = { a: 1, b: 2 }
• 延展操作符
• 對象屬性簡寫 let a = 1; let obj = {a}
• Promise
• Let與Const

關於延展操作符，注意 ES2015 有一次更新，ES2018 也有一次更新

// 把所有參數賦值給 iterableObj 數組
myFunction(...iterableObj);

// 注意 ES2015 沒有此功能。
// 構造對象時,進行克隆或者屬性拷貝（ECMAScript 2018規范新增特性）
let objClone = { ...obj };
// 把剩余參數賦值給 iterableObj 數組
myFunction(a, b, ...iterableObj);

ES7新特性（2016）

• Array.prototype.includes()
• 指數操作符

在ES7中引入了指數運算符，具有與Math.pow(..)等效的計算結果

ES8新特性（2017）

• async/await
• Object.values()
• Object.entries()
• String padding: padStart()和padEnd()，填充字符串達到當前長度
• 函數參數列表結尾允許逗號
• Object.getOwnPropertyDescriptors()
• ShareArrayBuffer 和 Atomics對象，用於從共享內存位置讀取和寫入

ES9新特性（2018）

• 異步迭代
• Promise.finally()。stage-4
• Rest/Spread 屬性。stage-4
• 正則表達式命名捕獲組（Regular Expression Named Capture Groups）。stage-4
• 正則表達式反向斷言（lookbehind）。stage-4
• 正則表達式dotAll模式。stage-4
• 正則表達式 Unicode 轉義。stage-4
• 非轉義序列的模板字符串。 詳見模版字符串

異步迭代允許與 for...of 循環一起使用

// 串行遍歷
async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}
// 等效於
async function process(array) {
  for (let i = 0; i < array.length; i++) {
    await doSomething(i);
  }
}

Rest/Spread 屬性

// 注意 ES2015 沒有此功能。
// 構造對象時,進行克隆或者屬性拷貝（ECMAScript 2018規范新增特性）
let objClone = { ...obj };
// 把剩余參數賦值給 iterableObj 數組
myFunction(a, b, ...iterableObj);

ES10新特性（2019）

• 行分隔符（U + 2028）和段分隔符（U + 2029）符號現在允許在字符串文字中，與JSON匹配
• Well-formed JSON.stringify。stage-4
• 新增了Array的flat()方法和flatMap()方法。stage-4
• 新增了String的trimStart()方法和trimEnd()方法。stage-4
• Object.fromEntries()，fromEntries() 其實是 entries() 的反轉。stage-4
• Symbol.prototype.description。stage-4
• String.prototype.matchAll。stage-4
• Function.prototype.toString() 現在返回精確字符，包括空格和注釋。stage-4
• 修改 catch 綁定，try {} catch {} catch 中不必帶 error 對象
• 新的基本數據類型 BigInt，所以 ES10 后基礎數據類型有 7 種。stage-4，參見英文設計文檔
• globalThis。stage-3
• import()。stage-3
• Legacy RegEx。stage-3
• 私有的實例方法和訪問器。stage-3

flat 最為常用的功能就是數組降維

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作為深度，展開任意深度的嵌套數組
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

trimStart 和 trimLeft 其實上是同一個函數的兩個別名，但 trimLeft 是老版本 ES 所支持的。