ES6的一些實用高級技巧總結

更新時間：2023年12月29日 11:02:01 作者：俊剛

ES6不僅在語法上有很大的改進,在代碼的組織結構上也有重大升級,下面這篇文章主要給大家介紹了關于ES6的一些實用高級技巧的相關資料,需要的朋友可以參考下

引言

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

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

1. Object.entries()和Object.fromEntries()

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

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

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變量現(xiàn)在是一個包含鍵值對數(shù)組的數(shù)組。

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

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

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

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

2. Symbol類型和Symbol屬性

Symbol是一種新的原始數(shù)據(jù)類型，用于創(chuàng)建唯一的標識符。

Symbol屬性是對象中使用Symbol作為鍵創(chuàng)建的屬性。

const sym = Symbol('description');

const obj = {
  [sym]: 'value'
};

console.log(obj[sym]); // value

3. 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
```
在這個例子中，我們創(chuàng)建了一個WeakMap和一個WeakSet實例。我們使用set()方法將obj對象添加到WeakMap中，并將值設置為'value'。然后，我們使用get()方法從WeakMap中獲取值。類似地，我們使用add()方法將obj對象添加到WeakSet中，并使用has()方法檢查集合中是否存在該對象。

4. Promise.allSettled()

Promise.allSettled()方法返回一個在所有給定的promise已被解析或被拒絕后決議的promise，并帶有一個對象數(shù)組，每個對象表示對應的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' }
 // ]

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

5. BigInt

BigInt是一種新的原始數(shù)據(jù)類型，用于表示任意精度的整數(shù)。

 const bigIntValue = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1);
 console.log(bigIntValue); // 9007199254740992n

6. Array.of、Array.from

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

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]

7. .at和flat

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

 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屬性可以創(chuàng)建唯一的標識符。WeakMap和WeakSet提供了一種在沒有其他引用時自動垃圾回收的集合類型。Promise.allSettled()可以處理多個promise并返回所有結果。BigInt允許表示任意精度的整數(shù)。Array.of、Array.from、.at和flat提供了更方便的數(shù)組操作方法。這些技巧可以幫助開發(fā)者更高效地編寫代碼。