作者:Shadeed
譯者:前端小智
來源:dmitripavlutin
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。
我們知道 Object.entries()
是將物件轉成一個自身可列舉屬性的鍵值對陣列。同樣,我們也可以把鍵值對陣列轉成了物件。
const keyValuePair = [
['cow', '?'],
['pig', '?'],
]
Object.fromEntries(keyValuePair);
// { cow: '?', pig: '?' }
Object.fromEntries
我們知道,物件結構是一個是有鍵和值組合體,如下所示:
const object = {
key: 'value',
};
基於這個邏輯,如果我們想將某個東西轉成物件,就必須要傳遞鍵和值。
有兩種型別的引數可以滿足這些要求:
- 具有巢狀鍵值對的陣列
- Map 物件
使用 Object.fromEntries
將陣列轉成物件
下面是個鍵-值對巢狀陣列
const nestedArray = [
['key 1', 'value 1'],
['key 2', 'value 2']
]
使用Object.fromEntries
可以將該陣列轉成物件:
Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}
使用 Object.fromEntries
將 Map 轉成物件
ES6 為我們帶來了一個名為 map 的新物件,它與物件非常相似。
TC39:對映物件是鍵/值對的集合,其中鍵和值都可以是任意 ECMAScript 語言值。
我們來建立一個 Map 物件:
// 使用建構函式
const map = new Map([
['key 1', 'value 1'],
['key 2', 'value 2']
])
// 或者我們可以使用例項方法“set”
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')
// 結果
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}
讓我們使用Object.fromentries
將 map 轉換為一個物件
Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}
物件的型別錯誤:試圖使用 Object.fromEntries
將 其它型別 轉成物件
將下面的型別傳入 Object.fromEntries
都會導致報錯 caught TypeError
。
確保傳遞值要有鍵-值對。
大家都說簡歷沒專案寫,我就幫大家找了一個專案,還附贈【搭建教程】。
Object.fromEntries vs Object.entries
Object.fromEntries
是 Object.entries
反向。 Object.entries()
方法返回一個給定物件自身可列舉屬性的鍵值對陣列,而Object.fromEntries()
方法把鍵值對列表轉換為一個物件。
const object = { key1: 'value1', key2: 'value2' }
const array = Object.entries(object)
// [ ["key1", "value1"], ["key2", "value2"] ]
Object.fromEntries(array)
// { key1: 'value1', key2: 'value2' }
物件到物件的轉換
如果你閱讀了 TC39 提案,這就是引入此新方法的原因。 隨著Object.entries
的引入之前,要將一些非物件結構轉成物件是比較麻煩的。
通常,當我們選擇使用Object.entries
,是因為它使我們能夠訪問許多漂亮的陣列方法,例如filter
。 但是在完成轉換之後,我們有點被該陣列所困擾。
const food = { meat: '?', broccoli: '?', carrot: '?' }
// ? 卡在這結果上...
const vegetarian = Object.entries(food).filter(
([key, value]) => key !== 'meat',
)
// [ ["broccoli", "?"], ["carrot", "?"] ]
好吧! 我們可以利用所有這些有用的陣列方法,但仍然可以返回物件。 最後,從物件到物件的轉換?
const food = { meat: '?', broccoli: '?', carrot: '?' }
const vegetarian = Object.fromEntries(
Object.entries(food).filter(([key, value]) => key !== 'meat'),
)
// { broccoli: '?', carrot: '?' }
陣列轉成物件的替代方案
Object.fromEntries
是 ES10 推出來,很新,可能瀏覽器支援度還夠友好。 因此,讓我們看一下如果將具有鍵值對結構的陣列轉成物件。
使用 reduce 方法將陣列轉成物件
將陣列轉換為物件的一種流行方法是使用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}),
{}
)
}
// 結果
// { key1: 'value1', key2: 'value2' }
使用 庫 將陣列轉成物件
Lodash 也提供了將鍵值對轉換為物件的方法。
_.object
將陣列轉換為物件。 傳遞[key, value]
對的單個列表,或鍵的列表和值的列表。
const array = [
['key1', 'value1'],
['key2', 'value2']
]
_.object(array)
// { key1: 'value1', key2: 'value2' }
_.fromPairs
_.fromPairs
是 _.toPairs
的反向,它的方法返回一個由鍵值對組成的物件。
const array = [
['key1', 'value1'],
['key2', 'value2'],
]
_.fromPairs(array)
// { key1: 'value1', key2: 'value2' }
瀏覽器支援情況
程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文:https://medium.com/@samantham...
交流
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。