ECMAScript 10 學習筆記

參考學習資源：阮一峰 ECMAScript 6 (ES6) 標準入門教程

Object.fromEntries()

Object.fromEntries() 方法允許你輕鬆地將鍵值對列表轉換為物件

此方法的主要目的，是將鍵值對的資料結構還原為物件，因此特別適合將 Map 結構轉為物件。

const arr = [
  ['name', 'sheep'],
  ['age', 25],
];
console.log(Object.fromEntries(arr));
// prints: {name: 'sheep', age: 25}

const m = new Map();
m.set('name', 'hitsuji');
m.set('age', 100);
console.log(Object.fromEntries(m)); 
// prints: {name: 'hitsuji', age: 100}

用途

配合 URLSearchParams 物件，將 query string 轉為物件。

const str = 'name=sheep&age=18';
const searchParams = new URLSearchParams(str);

console.log(Object.fromEntries(searchParams)); 
// prints: {name: 'sheep', age: '18'}

情境案例：把下面的 obj 物件轉成是 A 類型的有幾個 B 類型的有幾個...的結構。

const obj = {
  A: ['A1', 'A2', 'A3'],
  B: ['B1', 'B2'],
  C: ['C1'],
};

const myArr = Object.entries(obj);
const myNewArr = myArr.map(([key, value]) => [key, value.length]);
console.log(Object.fromEntries(myNewArr)); 
// prints: {A: 3, B: 2, C: 1}

trimStart() & trimEnd()

trimStart() 和 trimEnd() 方法在實作與 trimLeft() 和 trimRight 相同。

const str = '  sheep  ';
console.log('|' + str.trim() + '|');      // |sheep|
console.log('|' + str.trimStart() + '|'); // |sheep  |
console.log('|' + str.trimEnd() + '|');   // |  sheep|

Symbol 物件的 description 屬性

為 Symbol 物件新增了唯讀屬性 description，該物件回傳包含 Symbol 描述的字串。

const s = Symbol('sheep');
console.log(s.description); // sheep

選擇性的 catch

ES10 中可以根據需求決定 catch 需不需要接收一個 error 參數。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1000);
  }, 30000);
});
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(2000);
  }, 2000);
});

async function test() {
  try {
    await Promise.race([p1, p2]);
  } catch (err) {
  } catch {
    console.log('錯誤');
  }
}
test();