JavaScript Object.fromEntries()

摘要：在本教程中，您将学习如何使用 JavaScript Object.fromEntries() 方法将键值对列表转换为对象。

ES6 引入了 Object.entries() 方法，允许您将 对象 转换为 数组

const boxStyle = {
    color: 'red',
    borderWidth: '1px'
};

let arr = Object.entries(boxStyle);
console.log(arr);Code language: JavaScript (javascript)

输出

[['color', 'red'],['borderWidth', '1px']]Code language: JSON / JSON with Comments (json)

但是，如果您想做相反的事情，并将键值对列表转换为对象呢？

ES2019 引入了 Object.fromEntries() 方法，允许您轻松地将键值对列表转换为对象。

let arr = [['color', 'red'],['borderWidth', '1px']];
let obj = Object.fromEntries(arr);Code language: JavaScript (javascript)

输出

{color: "red", borderWidth: "1px"}Code language: CSS (css)

JavaScript Object.fromEntries() 方法简介

Object.fromEntries() 接受可迭代对象，例如 数组 或 Map，并将它们转换为 对象

Object.fromEntries(iterable);Code language: JavaScript (javascript)

Object.fromEntries() 返回一个新对象，其 属性 由 可迭代对象 的条目指定。

Object.fromEntries() 期望可迭代对象返回一个迭代器对象，该对象产生键值对。它使用键作为对象的属性键，使用值作为与属性键关联的值。

Object.fromEntries() 执行 Object.entries() 的反向操作。

JavaScript Object.fromEntries() 示例

让我们看一些使用 Object.fromEntries() 方法的示例。

1) 将数组转换为对象

此示例演示如何将数组转换为对象

const arr = [
    ['firstName', 'John'],
    ['lastName', 'Doe'],
    ['age', 20]
];

const person = Object.fromEntries(arr);
console.log(person);Code language: JavaScript (javascript)

输出

{firstName: "John", lastName: "Doe", age: 20}Code language: CSS (css)

2) 将 Map 转换为对象

以下示例演示如何使用 Object.fromEntries() 方法将 Map 转换为对象

const config = new Map();

config.set('type', 'database');
config.set('duration', 30);


const cache = Object.fromEntries(config);
console.log(cache);Code language: JavaScript (javascript)

输出

{type: "database", duration: 30}
Code language: CSS (css)

3) 将 URL 参数字符串转换为对象

以下示例演示如何使用 Object.fromEntries() 将 URL 的查询字符串转换为对象，其中每个属性都是一个参数

const params = 'type=listing&page=2&rowCount=10';
const searchParams = new URLSearchParams(params);

console.log(Object.fromEntries(searchParams));Code language: JavaScript (javascript)

输出

{type: "listing", page: "2", rowCount: "10"}Code language: CSS (css)

总结

• Object.fromEntries() 将可迭代对象转换为对象。
• Object.fromEntries() 执行 Object.entries() 的反向操作。