ES6 的一些高級技巧

引言

ES6（ECMAScript 2015）引入了許多新的功能和語法，其中一些功能可能相對較冷門，但非常實用。本文將介紹一些這樣的高級技巧，包括

Object.entries()
Object.fromEntries()
Symbol 類型和 Symbol 屬性
WeakMap 和 WeakSet
Promise.allSettled()
BigInt
Array.of
Array.from
.at 和 flat

Object.entries() 和 Object.fromEntries()

Object.entries() 方法返回一個給定對象自身可枚舉屬性的鍵值對數組。
Object.fromEntries() 方法將鍵值對列表轉換爲一個對象。

當使用 Object.entries() 時，可以傳入一個對象作爲參數。這個對象可以是任何具有可枚舉屬性的對象。例如：

const obj = { a: 1, b: 2, c: 3 };

const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]

在這個例子中，我們將一個包含三個屬性的對象傳遞給 Object.entries() 方法，並將返回的結果存儲在 entries 變量中。entries 變量現在是一個包含鍵值對數組的數組。

同樣地，當使用 Object.fromEntries() 時，可以傳入一個鍵值對數組作爲參數。這個數組中的每個元素都是一個包含鍵和值的數組。例如：

const entries = [["a", 1], ["b", 2], ["c", 3]];

const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

在這個例子中，我們將一個包含三個鍵值對的數組傳遞給 Object.fromEntries() 方法，並將返回的結果存儲在 obj 變量中。obj 變量現在是一個由鍵值對組成的對象。

Symbol 類型和 Symbol 屬性

Symbol 是一種新的原始數據類型，用於創建唯一的標識符。

Symbol 屬性是對象中使用 Symbol 作爲鍵創建的屬性。

const sym = Symbol('description');
    
const obj = {
  [sym]: 'value'
};
    
console.log(obj[sym]); // value

WeakMap 和 WeakSet

WeakMap 是一種集合類型，其中鍵必須是對象，並且在沒有其他引用時會被垃圾回收。
WeakSet 是一種集合類型，其中元素必須是對象，並且在沒有其他引用時會被垃圾回收。
```
const wm = new WeakMap();
    
const obj = {};
    
wm.set(obj, 'value');
    
console.log(wm.get(obj)); // value
    
const ws = new WeakSet();
    
ws.add(obj);
    
console.log(ws.has(obj)); // true
```
在這個例子中，我們創建了一個 WeakMap 和一個 WeakSet 實例。我們使用 set() 方法將 obj 對象添加到 WeakMap 中，並將值設置爲'value'。然後，我們使用 get() 方法從 WeakMap 中獲取值。類似地，我們使用 add() 方法將 obj 對象添加到 WeakSet 中，並使用 has() 方法檢查集合中是否存在該對象。

Promise.allSettled()

Promise.allSettled() 方法返回一個在所有給定的 promise 已被解析或被拒絕後決議的 promise，並帶有一個對象數組，每個對象表示對應的 promise 結果。

const promises = [
  Promise.resolve('resolved'),
  Promise.reject('rejected'),
  Promise.resolve('resolved')
];

Promise.allSettled(promises)
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });

 // 輸出結果:
 // [
 //  { status: 'fulfilled', value: 'resolved' },
 //  { status: 'rejected', reason: 'rejected' },
 //  { status: 'fulfilled', value: 'resolved' }
 // ]

我們創建了一個包含三個 promise 的數組，並將其傳遞給 Promise.allSettled() 方法。然後，我們使用. then() 方法處理返回的結果數組，或使用. catch() 方法處理任何錯誤。

BigInt

BigInt 是一種新的原始數據類型，用於表示任意精度的整數。

 const bigIntValue = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1);

 console.log(bigIntValue); // 9007199254740992n

Array.of、Array.from

Array.of() 方法創建一個具有可變數量參數的新數組實例。
Array.of 方法用於創建一個由參數組成的新數組。它與 Array 構造函數不同之處在於，當參數只有一個且爲數字時，Array.of 會創建一個只包含該數字的數組，而不是創建指定長度的空數組。
Array.from() 方法從類似數組或可迭代對象創建一個新的數組實例。
Array.from 方法將類似數組或可迭代對象轉換爲真正的數組。它可以接收第二個參數來進行映射或篩選操作。

const arr1 = Array.of(1, 2, 3);
console.log(arr1); // [1, 2, 3]

const str = 'Hello';
const arr = Array.from(str);
console.log(arr); // 輸出: ['H', 'e', 'l', 'l', 'o']

const nums = [1, 2, 3, 4, 5];
const doubled = Array.from(nums, num => num * 2);
console.log(doubled); // 輸出: [2, 4, 6, 8, 10]

.at 和 flat

.at() 方法返回指定索引處的元素。
.at 方法用於獲取數組指定索引位置的元素，支持負數索引。
flat() 方法將嵌套的數組扁平化爲一個新的數組。
flat 方法用於將多維數組扁平化爲一維數組，可以指定扁平化的層數。

 const arr3 = [1, 2, 3, 4, 5];
 console.log(arr3.at(2)); // 3

 const arr4 = [1, [2, [3]]];
 console.log(arr4.flat()); // [1, 2, [3]]

總結

ES6 引入了許多實用但相對較冷門的高級技巧。Object.entries()和Object.fromEntries()可以方便地在對象和鍵值對之間進行轉換。Symbol類型和Symbol屬性可以創建唯一的標識符。WeakMap和WeakSet提供了一種在沒有其他引用時自動垃圾回收的集合類型。Promise.allSettled()可以處理多個 promise 並返回所有結果。BigInt允許表示任意精度的整數。Array.of、Array.from、.at和flat提供了更方便的數組操作方法。這些技巧可以幫助開發者更高效地編寫代碼。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/L-nKwuY9LNHAdD1S1sByWA

引言

總結

猜你喜歡