ES12 新增：Object.fromEntries() 实用性分析

在 JavaScript 中，Object 是一个经常使用的对象类型，而ES12 新增的 Object.fromEntries() 方法进一步增强了 Object 对象的实用性。该方法可以轻松地将一个数组转换成一个对象。

Object.fromEntries() 方法的用法

Object.fromEntries() 方法的用法很简单，它只接受一个由键值对数组组成的数组作为参数，然后返回一个由这些键值对组成的新对象。

const arr = [['foo', 1], ['bar', 2]];
const obj = Object.fromEntries(arr);
console.log(obj); // {foo: 1, bar: 2}

实用性分析

有了 Object.fromEntries() 方法，我们就可以轻松地处理由键值对数组组成的数据，比如将一个形如 [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}] 的数组转换成一个以 name 为键，age 为值的对象。

const arr = [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}];
const obj = Object.fromEntries(arr.map(({name, age}) => [name, age]));
console.log(obj); // {Tom: 18, Jerry: 20}

除此之外，结合其他方法， Object.fromEntries() 可以实现很多实用的场景，比如：

从 URL 参数中解析出一个对象

const params = new URLSearchParams('name=Tom&age=18');
const obj = Object.fromEntries(params);
console.log(obj); // {name: 'Tom', age: '18'}

用简洁的语法生成一个对象

const name = 'Tom';
const age = 18;
const obj = Object.fromEntries([['name', name], ['age', age]]);
console.log(obj); // {name: 'Tom', age: 18}

与 Object.entries() 配合实现对象的深拷贝

const obj1 = {foo: {bar: 'baz'}};
const obj2 = Object.fromEntries(Object.entries(obj1));
console.log(obj2); // {foo: {bar: 'baz'}}
// 修改 obj1.foo.bar 的值，不会影响 obj2.foo.bar 的值
obj1.foo.bar = 'qux';
console.log(obj1); // {foo: {bar: 'qux'}}
console.log(obj2); // {foo: {bar: 'baz'}}

总结

Object.fromEntries() 方法是一个非常实用的方法，它可以轻松地将一个由键值对数组组成的数组转换成一个对象。结合其他方法，我们可以使用它来解析 URL 参数、实现深拷贝、用简洁的语法生成一个对象等等场景，增强了 Object 对象的实用性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a10096add4f0e0ff928cd2