這篇文章給大家分享的是有關(guān)JS中Object.fromEntries和Object.entries的應(yīng)用，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出龍華免費(fèi)做網(wǎng)站回饋大家。

object.entries() 轉(zhuǎn)換一個(gè)object為array。但是，如果你想做相反的事情怎么辦？不用再想了！ 使用 Object.fromEntries() 來(lái)把a(bǔ)rray轉(zhuǎn)換為object。

const keyValuePair = [
  ['cow', 'val1'],
  ['pig', 'val2'],
];
Object.fromEntries(keyValuePair);
// { cow: 'val1', pig: 'val2' }

Object.fromEntries

我們先指出對(duì)象的解剖方法，對(duì)象是有一個(gè)鍵和一個(gè)值的東西。

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

如果我們想將某物轉(zhuǎn)換為對(duì)象，我們需要傳遞具有這兩個(gè)要求的東西：key 和 value。

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

1. 具有嵌套鍵值對(duì)的數(shù)組
2. Map對(duì)象

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

這是帶有鍵值對(duì)的嵌套數(shù)組

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

當(dāng)我們將 Object.fromEntries 應(yīng)用于它時(shí)，我們可以從中獲取對(duì)象。

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

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

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

讓我們創(chuàng)建新的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"}

現(xiàn)在，我們使用 Object.fromEntries 將Map轉(zhuǎn)換為對(duì)象

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

Object.fromEntries與其他類(lèi)型的類(lèi)型錯(cuò)誤

當(dāng)你試圖將其他數(shù)據(jù)類(lèi)型傳遞到 Object.fromEntries 時(shí)，請(qǐng)小心，所有這些都會(huì)拋出一個(gè)錯(cuò)誤

?未捕獲的類(lèi)型錯(cuò)誤（Uncaught TypeError）

確保只傳遞鍵值對(duì)

Object.fromEntries vs Object.entries

Object.fromEntries 與 Object.entries 的效果相反。所以 Object. entries 將轉(zhuǎn)換我們的數(shù)組并返回一個(gè)新的嵌套的鍵值對(duì)數(shù)組。而 Object.fromEntries 將把這個(gè)數(shù)組轉(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' }

Object到Object的轉(zhuǎn)換

如果你閱讀了原始的TC39提案，這就是引入此新方法的原因。隨著 Object.entries 的引入，沒(méi)有一種簡(jiǎn)單的方法可以將結(jié)果轉(zhuǎn)換回對(duì)象。

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

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "v2"], ["carrot", "v3"] ]

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

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: 'v2', carrot: 'v3' }

瀏覽器支持

除了Internet Explorer，大多數(shù)主流瀏覽器都支持此方法 。

關(guān)于JS中Object.fromEntries和Object.entries的應(yīng)用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞標(biāo)題：JS中Object.fromEntries和Object.entries的應(yīng)用
文章網(wǎng)址：http://www.2m8n56k.cn/article34/poocpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、Google、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、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；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)