JS 文法 ES7、ES8、ES9、ES10、ES11、ES12新特性

ES7（2016）

1. Array.prototype.includes()

[1].include(1) // true

[0].include(1) // false
           

2. 指數操作符

2 ** 3 // 8
           

ES8（2017）

1. async/await

2. Object.values()

Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]
           

3. Object.entries()

Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]
           

4. String padding

方法用另一個字元串填充目前字元串(如果需要的話，會重複多次)，以便産生的字元串達到給定的長度

const str1 = '5';

// padStart

str1.padStart(2, '0')  //"05"

// padEnd

str1.padEnd(2,'0')   //"50"
           

5. 函數參數清單結尾允許逗号

6. Object.getOwnPropertyDescriptors()

擷取一個對象的所有自身屬性的描述符,如果沒有任何自身屬性，則傳回空對象。

7. SharedArrayBuffer對象

SharedArrayBuffer 對象用來表示一個通用的，固定長度的原始二進制資料緩沖區

8. Atomics對象

Atomics 對象提供了一組靜态方法用來對 SharedArrayBuffer 對象進行原子操作。

ES9（2018）

1. 異步疊代

await可以和for...of循環一起使用，以串行的方式運作異步操作

2. Promise.finally()

ES10（2019）

1. Array.flat()和Array.flatMap()

flat()

[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]


flatMap()

[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]
[1,2,4].flatMap(e=>e+2); [3, 4, 6]
           

2. String.trimStart()和String.trimEnd()

去除字元串首尾空白字元

3. String.prototype.matchAll

matchAll（）為所有比對的比對對象傳回一個疊代器

4. Symbol.prototype.description

隻讀屬性，傳回 Symbol 對象的可選描述的字元串。

Symbol('description').description; // 'description'
           

5. Object.fromEntries()

傳回一個給定對象自身可枚舉屬性的鍵值對數組

// 通過 Object.fromEntries， 可以将 Map 轉化為 Object:
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
console.log(Object.fromEntries(map)); // { foo: "bar", baz: 42 }
           

6. 可選 Catch

ES11（2020）

1. Nullish coalescing Operator(空值處理)

表達式在 ?? 的左側 運算符求值為undefined或null，傳回其右側。

2. Optional chaining（可選鍊）

?.使用者檢測不确定的中間節點

ES12（2021）

1. replaceAll

傳回一個全新的字元串，所有符合比對規則的字元都将被替換掉

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"
           

2. Promise.any

Promise.any() 接收一個Promise可疊代對象，隻要其中的一個 promise 成功，就傳回那個已經成功的 promise 。如果可疊代對象中沒有一個 promise 成功（即所有的 promises 都失敗/拒絕），就傳回一個失敗的 promise

const promise1 = new Promise((resolve, reject) => reject('我是失敗的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失敗的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});
           

3. WeakRefs

使用WeakRefs的Class類建立對對象的弱引用(對對象的弱引用是指當該對象應該被GC回收時不會阻止GC的回收行為)

4. 邏輯運算符和指派表達式

邏輯運算符和指派表達式，新特性結合了邏輯運算符（&&，||，??）和指派表達式而JavaScript已存在的 複合指派運算符有

a ||= b
//等價于
a = a || (a = b)

a &&= b
//等價于
a = a && (a = b)

a ??= b
//等價于
a = a ?? (a = b)
           

5. 數字分隔符

數字分隔符，可以在數字之間建立可視化分隔符，通過_下劃線來分割數字，使數字更具可讀性

const money = 1_000_000_000;
//等價于
const money = 1000000000;

1_000_000_000 === 1000000000; // true