引言

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

• Object.entries()

• Object.fromEntries()

• Symbol類型和Symbol屬性

• WeakMap和WeakSet

• Promise.allSettled()

• BigInt

• Array.of

• Array.from

• .at和flat

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

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

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

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

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

在這個(gè)例子中，我們將一個(gè)包含三個(gè)屬性的對(duì)象傳遞給Object.entries()方法，并將返回的結(jié)果存儲(chǔ)在entries變量中。entries變量現(xiàn)在是一個(gè)包含鍵值對(duì)數(shù)組的數(shù)組。

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

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

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

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

2. Symbol類型和Symbol屬性

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

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

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

3. WeakMap和WeakSet

• WeakMap是一種集合類型，其中鍵必須是對(duì)象，并且在沒有其他引用時(shí)會(huì)被垃圾回收。

• WeakSet是一種集合類型，其中元素必須是對(duì)象，并且在沒有其他引用時(shí)會(huì)被垃圾回收。

  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

  在這個(gè)例子中，我們創(chuàng)建了一個(gè)WeakMap和一個(gè)WeakSet實(shí)例。我們使用set()方法將obj對(duì)象添加到WeakMap中，并將值設(shè)置為'value'。然后，我們使用get()方法從WeakMap中獲取值。類似地，我們使用add()方法將obj對(duì)象添加到WeakSet中，并使用has()方法檢查集合中是否存在該對(duì)象。

4. Promise.allSettled()

• Promise.allSettled()方法返回一個(gè)在所有給定的promise已被解析或被拒絕后決議的promise，并帶有一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象表示對(duì)應(yīng)的promise結(jié)果。

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

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

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

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

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)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例。

• Array.of方法用于創(chuàng)建一個(gè)由參數(shù)組成的新數(shù)組。它與Array構(gòu)造函數(shù)不同之處在于，當(dāng)參數(shù)只有一個(gè)且為數(shù)字時(shí)，Array.of會(huì)創(chuàng)建一個(gè)只包含該數(shù)字的數(shù)組，而不是創(chuàng)建指定長(zhǎng)度的空數(shù)組。

• Array.from()方法從類似數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的數(shù)組實(shí)例。

• Array.from方法將類似數(shù)組或可迭代對(duì)象轉(zhuǎn)換為真正的數(shù)組。它可以接收第二個(gè)參數(shù)來(lái)進(jìn)行映射或篩選操作。

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ù)組指定索引位置的元素，支持負(fù)數(shù)索引。

• flat()方法將嵌套的數(shù)組扁平化為一個(gè)新的數(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]]

總結(jié)

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

到此這篇關(guān)于ES6的一些實(shí)用高級(jí)技巧的文章就介紹到這了,更多相關(guān)ES6高級(jí)技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論