迅速瞭解一下 ES10 中 Object.fromEntries 的用法

Object.fromEntries 方法就是 entries 的逆操做，做用是將一個鍵值對數組轉化爲一個對象

一樣的該方法也已經成爲 ES10 中 stage4 提案：

Object.entries

在介紹 fromEntries 以前，回顧一下 entries 的用法。這個方法返回的是對象自身的、可枚舉的屬性組成的數組：

const obj = { a: '1', b: 2 }
Object.entries(obj)
複製代碼

也能夠經過 new Map 構造函數將對象轉爲 Map：

new Map(Object.entries(obj))
// Map(2) {"a" => "1", "b" => 2}
複製代碼

Object.fromEntries

fromEntries 方法則恰好相反，將數組轉爲對象：

Object.fromEntries([['a', '1'], ['b', 2]])
複製代碼

固然也能夠傳入一個 Map 將其轉爲對象：

const map = new Map().set('a', 1).set('b', 2)

Object.fromEntries(map)
複製代碼

幾個注意事項

當傳入的參數中有重複出現的 key：

傳入給 fromEntries 的參數，若是有重複的 key 出現，後面的會被採用：

Object.fromEntries([['a', '1'], ['a', '2']])
複製代碼

雖然 entries 不支持 symbol 做爲 key，但 fromEntries 卻能夠：

Object.fromEntries([[s, 1]])
Object.entries({ s: 1 })
複製代碼

上述代碼效果以下，entreis 接收的對象中若是有 symbol 做爲 key 會直接被轉換爲字符串：

key 爲字符串或 symbol 以外的類型會被強制轉爲字符串：

他能夠接收任何類數組，如 Map 等，甚至是有自定義迭代器的對象：

obj = {}
obj[Symbol.iterator] = function* () {
    yield [1, 11]
    yield [2, 22]
    yield [3, 33]
}

console.dir(Object.fromEntries(obj))
複製代碼

最後還有隻支持建立對象可遍歷的屬性

應用：過濾屬性

定義一個函數，這個函數第一個參數爲對象，另外接收其餘幾個參數做爲須要保留的屬性

function foo(obj, ...keys) {
    return Object.fromEntries(Object.entries(obj)
        .filter(([key]) => keys.includes(key))
    )
}

console.table(foo({ name: 'oli', age: '12' }, 'name'))
複製代碼

應用：處理表單

假設咱們有這樣一組數據：

[{
    name: 'oli',
    age: 12
}, {
    name: 'troy',
    age: 14
}]
複製代碼

若是須要將其填充到 csv、sql 數據庫表中，那麼只須要以下方法過濾數據：

arr = [{
    name: 'oli',
    age: 12
}, {
    name: 'troy',
    age: 14
}]

obj = Object.fromEntries(
    arr.map(({name, age}) => [name, age])
)

console.table(obj)
複製代碼

數據過濾完畢後就能夠很輕鬆的粘貼到 Excel 表格或方便的存儲到數據庫中

應用：交換屬性和值

function foo(obj) {
    return Object.fromEntries(Object.entries(obj)
        .map(([key, value]) => [value, key])
    )
}

console.table({ name: 'oli', age: '12' })
console.table(foo({ name: 'oli', age: '12' }))
複製代碼

還有其餘經過使用數組方法來實現的各類功能，這裏就不一一展現了

應用：將 url 查詢字符串轉爲對象

query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// {foo: "bar", baz: "qux"}
複製代碼

測試環境

想要嘗試的童鞋，須要下載 chrome 測試版，保證 chrome 瀏覽器版本要大於 73:

參考：

• https://www.chromestatus.com/features/5747878282657792
• https://github.com/tc39/proposal-object-from-entries
• http://2ality.com/2019/01/object-from-entries.html

更多內容關注：