ES10中的Object.fromEntries的示例分析

這篇文章主要介紹ES10中的Object.fromEntries的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、衡水ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的衡水網(wǎng)站制作公司

我們知道 Object.entries() 是將對(duì)象轉(zhuǎn)成一個(gè)自身可枚舉屬性的鍵值對(duì)數(shù)組。同樣，我們也可以把鍵值對(duì)數(shù)組轉(zhuǎn)成了對(duì)象。

const keyValuePair = [
  ['cow', '?'],
  ['pig', '?'],
]

Object.fromEntries(keyValuePair);
// { cow: '?', pig: '?' }

Object.fromEntries

---

我們知道，對(duì)象結(jié)構(gòu)是一個(gè)是有鍵和值組合體，如下所示：

const object = {
  key: 'value',
};

基于這個(gè)邏輯，如果我們想將某個(gè)東西轉(zhuǎn)成對(duì)象，就必須要傳遞鍵和值。

有兩種類型的參數(shù)可以滿足這些要求：

• 具有嵌套鍵值對(duì)的數(shù)組

• Map 對(duì)象

【推薦學(xué)習(xí)：javascript高級(jí)教程】

使用 Object.fromEntries 將數(shù)組轉(zhuǎn)成對(duì)象

---

下面是個(gè)鍵-值對(duì)嵌套數(shù)組

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
]

使用Object.fromEntries可以將該數(shù)組轉(zhuǎn)成對(duì)象:

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

使用 Object.fromEntries 將 Map 轉(zhuǎn)成對(duì)象

---

ES6 為我們帶來了一個(gè)名為 map的新對(duì)象，它與對(duì)象非常相似。

TC39：映射對(duì)象是鍵/值對(duì)的集合，其中鍵和值都可以是任意 ECMAScript 語(yǔ)言值。

我們來創(chuàng)建一個(gè) Map對(duì)象：

// 使用構(gòu)造函數(shù)
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者我們可以使用實(shí)例方法“set”
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// 結(jié)果
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

讓我們使用Object.fromentries將 map轉(zhuǎn)換為一個(gè)對(duì)象

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}

對(duì)象的類型錯(cuò)誤：試圖使用 Object.fromEntries 將 其它類型 轉(zhuǎn)成對(duì)象

---

將下面的類型傳入 Object.fromEntries 都會(huì)導(dǎo)致報(bào)錯(cuò) caught TypeError。

確保傳遞值要有鍵-值對(duì)。

Object.fromEntries vs Object.entries

---

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

const object = { key1: 'value1', key2: 'value2' }

const array = Object.entries(object)
// [ ["key1", "value1"], ["key2", "value2"] ]


Object.fromEntries(array)
// { key1: 'value1', key2: 'value2' }

對(duì)象到對(duì)象的轉(zhuǎn)換

---

如果你閱讀了 TC39 提案，這就是引入此新方法的原因。 隨著Object.entries的引入之前，要將一些非對(duì)象結(jié)構(gòu)轉(zhuǎn)成對(duì)象是比較麻煩的。

通常，當(dāng)我們選擇使用Object.entries，是因?yàn)樗刮覀兡軌蛟L問許多漂亮的數(shù)組方法，例如filter。 但是在完成轉(zhuǎn)換之后，我們有點(diǎn)被該數(shù)組所困擾。

const food = { meat: '?', broccoli: '?', carrot: '?' }

// ? 卡在這結(jié)果上...
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
)
// [ ["broccoli", "?"], ["carrot", "?"] ]

好吧！ 我們可以利用所有這些有用的數(shù)組方法，但仍然可以返回對(duì)象。 最后，從對(duì)象到對(duì)象的轉(zhuǎn)換?

const food = { meat: '?', broccoli: '?', carrot: '?' }

const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
)

// { broccoli: '?', carrot: '?' }

數(shù)組轉(zhuǎn)成對(duì)象的替代方案

---

Object.fromEntries是 ES10 推出來，很新，可能瀏覽器支持度還夠友好。 因此，讓我們看一下如果將具有鍵值對(duì)結(jié)構(gòu)的數(shù)組轉(zhuǎn)成對(duì)象。

使用 reduce 方法將數(shù)組轉(zhuǎn)成對(duì)象

將數(shù)組轉(zhuǎn)換為對(duì)象的一種流行方法是使用reduce。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value}),
    {}
  )
}


// 結(jié)果
// { key1: 'value1', key2: 'value2' }

使用 庫(kù) 將數(shù)組轉(zhuǎn)成對(duì)象

Lodash 也提供了將鍵值對(duì)轉(zhuǎn)換為對(duì)象的方法。

_.object

將數(shù)組轉(zhuǎn)換為對(duì)象。 傳遞[key, value]對(duì)的單個(gè)列表，或鍵的列表和值的列表。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.object(array)
// { key1: 'value1', key2: 'value2' }

_.fromPairs

_.fromPairs 是 _.toPairs 的反向，它的方法返回一個(gè)由鍵值對(duì)組成的對(duì)象。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

_.fromPairs(array)
// { key1: 'value1', key2: 'value2' }

瀏覽器支持情況

---

以上是“ES10中的Object.fromEntries的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：ES10中的Object.fromEntries的示例分析
當(dāng)前地址：http://muchs.cn/article8/gdseop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、網(wǎng)站維護(hù)、企業(yè)建站、ChatGPT、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)