ES11 中 Object.fromEntries 方法给生产环境带来的好处

ES11（又称 ES2020）中新增了许多有用的特性和方法，其中一个非常实用的方法是 Object.fromEntries。该方法可以将一个键值对数组转换成一个对象，并且允许我们方便地创建和修改对象。在本文中，我们将详细介绍 Object.fromEntries 的用途、优势和示例，以便让读者更好地理解和应用该方法。

什么是 Object.fromEntries 方法

Object.fromEntries 方法是由 ECMAScript 提案 #106（从 Object.entries 和 Map 转化为 Object）提出的。它的作用是将一个键值对数组转换为一个对象。使用该方法，我们可以很容易地创建或更新一个对象，而不必手动添加或修改每个键值对。

该方法的语法如下：

Object.fromEntries(entries)

其中，entries 是一个由键值对组成的数组。每个键值对都是一个数组，其中第一个元素是键，第二个元素是值。例如：

const entries = [['name', 'Mike'], ['age', 25], ['gender', 'male']];
const obj = Object.fromEntries(entries);
console.log(obj);  // { name: 'Mike', age: 25, gender: 'male' }

Object.fromEntries 的优势和用途

Object.fromEntries 方法具有以下几个优点和用途：

1. 可以从键值对数组快速创建对象

在很多情况下，我们需要创建一个键值对数组或返回一个键值对数组。使用 Object.fromEntries 方法，我们可以很方便地将该数组转换为一个对象。

举个例子，我们有一个由表单元素组成的数组，每个元素有一个 name 属性和一个 value 属性。我们可以使用该方法将该数组转换为一个包含所有表单元素的对象。

const formEles = [
  { name: 'email', value: 'example@email.com' },
  { name: 'password', value: '123456' },
  { name: 'remember', value: true },
];
const formObj = Object.fromEntries(formEles.map(ele => [ele.name, ele.value]));
console.log(formObj); // { email: 'example@email.com', password: '123456', remember: true }

1. 可以方便地从对象中删除属性

在以前，我们需要使用 delete 操作符来删除对象的属性。现在，使用 Object.fromEntries 方法，我们可以很方便地实现该需求。

const obj = { name: 'Mike', age: 25, gender: 'male' };
delete obj.age;
const newObj = Object.fromEntries(Object.entries(obj).filter(([key, value]) => key !== 'age'));
console.log(newObj);  // { name: 'Mike', gender: 'male' }

1. 可以合并多个对象或键值对数组

使用 Object.fromEntries 方法，我们可以将多个对象或键值对数组合并成一个对象。这使得我们避免使用深拷贝或循环操作，从而提高代码的可读性和效率。

// 合并多个对象
const obj1 = { name: 'Mike', age: 25 };
const obj2 = { gender: 'male' };
const obj3 = { phone: '123456' };
const mergeObj = Object.fromEntries([ ...Object.entries(obj1), ...Object.entries(obj2), ...Object.entries(obj3) ]);
console.log(mergeObj);  // { name: 'Mike', age: 25, gender: 'male', phone: '123456' }

// 合并多个键值对数组
const arr1 = [['name', 'Mike'], ['age', 25]];
const arr2 = [['gender', 'male'], ['phone', '123456']];
const mergeObj2 = Object.fromEntries([ ...arr1, ...arr2 ]);
console.log(mergeObj2);  // { name: 'Mike', age: 25, gender: 'male', phone: '123456' }

Object.fromEntries 的示例代码

结合上面的用途和优势，我们可以实现许多有用的代码功能。下面是一些示例代码，帮助读者更好地理解 Object.fromEntries 方法的应用场景和实践。

1. 创建一个基于对象的键值对数组

const obj = { name: 'Mike', age: 25, gender: 'male' };
const entries = Object.entries(obj);
console.log(entries); // [['name', 'Mike'], ['age', 25], ['gender', 'male']]

1. 从键值对数组创建一个对象

const entries = [['name', 'Mike'], ['age', 25], ['gender', 'male']];
const obj = Object.fromEntries(entries);
console.log(obj);  // { name: 'Mike', age: 25, gender: 'male' }

1. 从对象删除属性

const obj = { name: 'Mike', age: 25, gender: 'male' };
delete obj.age;
const newObj = Object.fromEntries(Object.entries(obj).filter(([key, value]) => key !== 'age'));
console.log(newObj);  // { name: 'Mike', gender: 'male' }

1. 从表单元素数组创建一个包含所有元素的对象

const formEles = [
  { name: 'email', value: 'example@email.com' },
  { name: 'password', value: '123456' },
  { name: 'remember', value: true },
];
const formObj = Object.fromEntries(formEles.map(ele => [ele.name, ele.value]));
console.log(formObj); // { email: 'example@email.com', password: '123456', remember: true }

1. 合并多个对象或键值对数组

// 合并多个对象
const obj1 = { name: 'Mike', age: 25 };
const obj2 = { gender: 'male' };
const obj3 = { phone: '123456' };
const mergeObj = Object.fromEntries([ ...Object.entries(obj1), ...Object.entries(obj2), ...Object.entries(obj3) ]);
console.log(mergeObj);  // { name: 'Mike', age: 25, gender: 'male', phone: '123456' }

// 合并多个键值对数组
const arr1 = [['name', 'Mike'], ['age', 25]];
const arr2 = [['gender', 'male'], ['phone', '123456']];
const mergeObj2 = Object.fromEntries([ ...arr1, ...arr2 ]);
console.log(mergeObj2);  // { name: 'Mike', age: 25, gender: 'male', phone: '123456' }

总结

Object.fromEntries 方法是一个非常实用的方法，它可以帮助我们快速创建和修改对象。使用该方法，我们可以避免手动添加或修改每个键值对，从而提高代码的可读性和效率。

同时，Object.fromEntries 方法的应用场景非常丰富，从创建键值对数组到合并多个对象或数组，都可以使用该方法来实现。如果您在生产环境中使用 JavaScript，那么 Object.fromEntries 方法一定会给您带来很大的帮助。

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