ES2020

ES2020 提供了一些幫助簡化邏輯判斷的語法糖，讓我們開始介紹吧

1. 可選鏈操作符 (Optional Chaining)：透過 ?.的方式在訪問屬性時若是 null 或是 undefined 時不會拋出錯誤，而是返回 undefined

const user = {
  name: "Alice",
  address: {
    street: "123 JS Street"
  }
};

console.log(user.address?.zipCode); // undefined

2. 空值合併操作符 (Nullish Coalescing)：透過 ?? 字符來判斷當左側為 null 或是 undefined 時才會回傳右側的值，與 || 不同，|| 是當左側值會被 javascript 視為 null 的任何值都會回傳右側值

// || 判斷
const resultA1 = false || 'default';    // 'default'
const resultA2 = 0 || 'default';        // 'default'
const resultA3 = '' || 'default';       // 'default'
const resultA4 = null || 'default';     // 'default'
const resultA5 = undefined || 'default';// 'default'

// ?? 判斷
const resultB1 = false ?? 'default';    // false
const resultB2 = 0 ?? 'default';        // 0
const resultB3 = '' ?? 'default';       // ''
const resultB4 = null ?? 'default';     // 'default'
const resultB5 = undefined ?? 'default';// 'default'

3. bigint：與很多程式語言一樣，針對高位數的數字用有額外的型別來儲存

const bigNumber = 1234567890123456789012345678901234567890n;
typeof bigNumber // 'bigint'

4. promise.allSettled()：這個方法返回一個 Promise，該 Promise 在所有給定的 Promise 都已經 fulfilled 或 rejected 後才會兌現，與 primise.all() 不同，promise.all() 當內部有被拒絕的值時就會跳出

const promises = [
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  Promise.reject(new Error('An error occurred'))
];

Promise.allSettled(promises).then(results => console.log(results));
// [
//   { status: 'fulfilled', value: 33 },
//   { status: 'fulfilled', value: 66 },
//   { status: 'rejected', reason: Error: An error occurred }
// ]

5. globalThis：ES2020 提供了一個標準方式來獲取全局的 this 值，不用額外宣告或綁定

console.log(globalThis); // 在瀏覽器中是 window，在 Node.js 中是 global

ES2021

ES2021 主要是提供了些舊有的功能增強與簡化，讓我們開始吧

1. String.replaceAll()：與之前的 replace 不同，會把所有匹配到的字全部替換掉

const str = 'I like apples. You like apples.';
const newStr = str.replaceAll('apples', 'bananas');
console.log(newStr); // 'I like bananas. You like bananas.'

2. Promise.any()：將會回傳第一個被接受的 Promise

const promises = [
  Promise.reject('Error 1'),
  Promise.resolve('Success'),
  Promise.reject('Error 2')
];

Promise.any(promises).then(
  result => console.log(result), // 輸出: 'Success'
  error => console.log(error)
);

3. 邏輯賦值操作符： 引入了 &&=、||= 和 ??= 操作符，簡化了條件賦值的寫法

let a = 1;
a ||= 10; // 等同於 a = a || 10
console.log(a); // 1

let b = null;
b ??= 20; // 等同於 b = b ?? 20
console.log(b); // 20

let obj = { x: 5 };
obj.x &&= 2; // 等同於 obj.x = obj.x && 2
console.log(obj.x); // 2

4. 數字分隔符： 允許使用下劃線 (_) 作為數字分隔符，提高大數字的可讀性

const largeNumber = 1_000_000_000;
console.log(largeNumber); // 1000000000