ES2016-ES2020

參考：https://zhuanlan.zhihu.com/p/59096242

備注：可以使用ES6取代的10個Lodash特性 https://www.w3cplus.com/javascript/lodash-features-replace-es6.html

Finished Proposals

https://github.com/tc39/proposals/blob/master/finished-proposals.md

1.邏輯空賦值

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

a ||= b;
a || (a = b);

// "And And Equals"
a &&= b;
a && (a = b);

// "QQ Equals"
a ??= b;
a ?? (a = b);

2.String.prototype.replaceAll

3.WeakRef

4.Promise.any

5.Numeric Separators

let budget = 1_000_000_000_000;
let nibbles = 0b1010_0001_1000_0101;

ES2016(ES7) https://www.html.cn/archives/9965

1.Array.prototype.includes

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

2.求冪運算符**

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation

ES2017(ES8) https://www.html.cn/archives/9981

1.字符串填充 padStart() 和 padEnd()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd 

2.Object.values()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

3.Object.entries()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

4.Object.getOwnPropertyDescriptors()

返回對象的所有自有（非繼承的）屬性描述符

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

作用：

ES2015 給我們帶來了 Object.assign() 方法，它從一個或多個對象復制所有可枚舉的屬性，并返回一個新對象。

但是存在問題，它無法正確復制具有非默認特性(attribute) 的屬性 (property)（getter，setter，不可寫屬性，等）。

如果一個對象只有一個 setter ，則無法使用 Object.assign() 正確地復制到一個新對象。

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

以下代碼將不起作用：

const person2 = {}
Object.assign(person2, person1)

但下面的代碼就會奏效：

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

person2 丟失了 setter ，因為它沒有復制過來。

使用 Object.create() 對淺拷貝對象也有同樣的限制。

5.函數參數列表和調用中的尾隨逗號

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Trailing_commas

const doSomething = (var1, var2,) => {
  //...
}
doSomething('test2', 'test2',)

6.Async Functions (異步函數)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

7.共享內存 和 Atomics

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Atomics

WebWorkers 用于在瀏覽器中創建多線程程序。

他們通過事件提供消息傳遞協議。 從ES2017開始，您可以使用 SharedArrayBuffer 在 Web worker 及其創建者之間創建共享內存數組。

由于我們不知道向共享內存部分寫入要花費多少時間來傳播，因此 Atomics 是一種在讀取值時執行該操作的方法，并且完成了任何類型的寫入操作。

ES2018(ES9) https://www.html.cn/archives/9990

1.Rest(剩余)/Spread(展開) 屬性

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

ES6 在處理數組解構時,引入了 rest(剩余)元素的概念

ES2018 為對象引入了類似的功能

2.Asynchronous iteration （異步迭代）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for-await...of

新的 for-await-of 構造允許您使用異步可迭代對象作為循環迭代

for await (const line of readLines(filePath)) {
  console.log(line)
}

3.Promise.prototype.finally()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

4.正則表達式改進

(1) 先行斷言(lookahead) 和 后行斷言(lookbehind)

新增后行斷言

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Special_characters_meaning_in_regular_expressions

• (?=pattern) 零寬正向先行斷言(zero-width positive lookahead assertion)
• (?!pattern) 零寬負向先行斷言(zero-width negative lookahead assertion)
• (?<=pattern) 零寬正向后行斷言(zero-width positive lookbehind assertion)
• (?<!pattern) 零寬負向后行斷言(zero-width negative lookbehind assertion)

(2) Unicode 屬性轉義 \p{…} 和 \P{…}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode

新功能將擴展此概念到引入 \p{} 匹配所有 Unicode 字符，否定為 \P{}

/^\p{ASCII}+$/u.test('abc')
/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF')
/^\p{Lowercase}$/u.test('h')
/^\p{Emoji}+$/u.test('????')
/^\p{Script=Latin}+$/u.test('hey')

還有許多其他布爾屬性，您只需通過在花括號中添加它們的名稱來檢查它們，包括 Uppercase, Lowercase, White_Space, Alphabetic, Emoji 等

除了這些二進制屬性之外，您還可以檢查任何 unicode 字符屬性以匹配特定值。在上面例子中，檢查字符串是用希臘語還是拉丁字母寫的

更多屬性：https://github.com/tc39/proposal-regexp-unicode-property-escapes

(3) 命名捕獲組（Named capturing groups）

https://github.com/tc39/proposal-regexp-named-groups

在 ES2018 中，可以為捕獲組分配一個名稱，而不是僅在結果數組中分配一個 slot（插槽）：

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')
 
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

(4) 正則表達式的 ‘s’ 標志 dotAll

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll

ES2018以前元字符.無法匹配\r \n \u{2048} \u{2049}等換行符。 在 ES2018 中為正則表達式增加了一個新的標志s 用來表示屬性dotAll。以使 .可以匹配任意字符, 包括換行符。

s 標志是 ‘single line'(單行)的縮寫，它使 . 匹配新的行字符。如果沒有它，點將匹配普通字符，而不是新行：

/hi.welcome/.test('hi\nwelcome') // false
/hi.welcome/s.test('hi\nwelcome') // true

5.ES2018關于非法轉義序列的修訂

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings#%E5%B8%A6%E6%A0%87%E7%AD%BE%E7%9A%84%E6%A8%A1%E7%89%88%E5%AD%97%E9%9D%A2%E9%87%8F%E5%8F%8A%E8%BD%AC%E4%B9%89%E5%BA%8F%E5%88%97

ES2019(ES10) https://zhuanlan.zhihu.com/p/59096242 https://github.com/AttemptWeb/Record/issues/3

1.可選 Catch Binding

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_exception_identifier

可選的 catch binding 允許開發人員在catch塊中，不使用error參數的情況下使用try/catch。

try {
  // try to use a web feature which may not be implemented
} catch {
 // 省略catch后的函數括號
}

2.JSON 超集

https://github.com/tc39/proposal-json-superset

當json文本中存在未轉義的換行符如\u2028,\u2029時，js中會報語法錯誤。

ES2018中對此作了擴展，支持了所有的json文本，因此同樣允許未轉義的換行符的存在。

3.Symbol.prototype.description

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description

Symbol對象添加了一個只讀屬性description，它會返回Symbol對象的可選描述的字符串

在ES2019之前，Symbol 的描述存儲在內部的 [[Description]]，沒有直接對外暴露，只有調用 Symbol 的 toString()才能讀取到

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/description

4.Function.prototype.toString revision

https://tc39.es/Function-prototype-toString-revision/

Function.prototype.toString()現在返回精確字符，包括空格和注釋。

5.Object.fromEntries()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Object.fromEntries()與Object.entries()對應，它把鍵值對列表轉換為一個對象

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
[...map.entries()]   // [[1,'one'], [2, 'two'], [3, 'three']]

Object.fromEntries(map) // { 1: 'one', 2: 'two', 3: 'three' }

6.Well-formed JSON.stringify()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Well-formed_JSON.stringify()

更友好的JSON.stringify，對于一些超出范圍的 Unicode，為其輸出轉義序列，使其成為有效 Unicode

// Previously:
JSON.stringify("\uD800"); // '"?"'
// Now:
JSON.stringify("\uD800"); // '"\\ud800"'

7.String.prototype.{trimStart,trimEnd}

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd

The trimEnd() method removes whitespace from the end of a string. trimRight() is an alias of this method.

8.Array.prototype.{flat,flatMap} 平鋪數組

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]

ES2020(ES11) https://juejin.im/post/6844904080955932679

1.可選鏈操作符（Optional Chaining）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

2.空位合并操作符（Nullish coalescing Operator）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

空值合并操作符（??）是一個邏輯操作符，當左側的操作數為 null 或者 undefined 時，返回其右側操作數，否則返回左側操作數

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

3.Promise.allSettled

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

Promise.all 具有并發執行異步任務的能力。但它的最大問題就是如果參數中的任何一個promise為reject的話，則整個Promise.all 調用會立即終止，并返回一個reject的新的 Promise 對象。 

el.onclick = () => {
  import('/modules/my-module.js')
    .then(module => {
      // Do something with the module.
    })
    .catch(err => {
      // load error;
    })
}
// 或者
let module = await import('/modules/my-module.js');

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

Object.prototype.isPrototypeOf(globalThis); // true