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 方法具有以下几个优点和用途：
- 可以从键值对数组快速创建对象
在很多情况下，我们需要创建一个键值对数组或返回一个键值对数组。使用 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 }- 可以方便地从对象中删除属性
在以前，我们需要使用 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' }- 可以合并多个对象或键值对数组
使用 Object.fromEntries 方法，我们可以将多个对象或键值对数组合并成一个对象。这使得我们避免使用深拷贝或循环操作，从而提高代码的可读性和效率。
-- -------------------- ---- ------- -- ------ ----- ---- - - ----- ------- ---- -- -- ----- ---- - - ------- ------ -- ----- ---- - - ------ -------- -- ----- -------- - -------------------- ------------------------ ------------------------ ----------------------- --- ---------------------- -- - ----- ------- ---- --- ------- ------- ------ -------- - -- --------- ----- ---- - --------- -------- ------- ----- ----- ---- - ----------- -------- --------- ----------- ----- --------- - -------------------- -------- ------- --- ----------------------- -- - ----- ------- ---- --- ------- ------- ------ -------- -
Object.fromEntries 的示例代码
结合上面的用途和优势，我们可以实现许多有用的代码功能。下面是一些示例代码，帮助读者更好地理解 Object.fromEntries 方法的应用场景和实践。
- 创建一个基于对象的键值对数组
const obj = { name: 'Mike', age: 25, gender: 'male' };
const entries = Object.entries(obj);
console.log(entries); // [['name', 'Mike'], ['age', 25], ['gender', 'male']]- 从键值对数组创建一个对象
const entries = [['name', 'Mike'], ['age', 25], ['gender', 'male']];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'Mike', age: 25, gender: 'male' }- 从对象删除属性
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' }- 从表单元素数组创建一个包含所有元素的对象
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 }- 合并多个对象或键值对数组
-- -------------------- ---- ------- -- ------ ----- ---- - - ----- ------- ---- -- -- ----- ---- - - ------- ------ -- ----- ---- - - ------ -------- -- ----- -------- - -------------------- ------------------------ ------------------------ ----------------------- --- ---------------------- -- - ----- ------- ---- --- ------- ------- ------ -------- - -- --------- ----- ---- - --------- -------- ------- ----- ----- ---- - ----------- -------- --------- ----------- ----- --------- - -------------------- -------- ------- --- ----------------------- -- - ----- ------- ---- --- ------- ------- ------ -------- -
总结
Object.fromEntries 方法是一个非常实用的方法，它可以帮助我们快速创建和修改对象。使用该方法，我们可以避免手动添加或修改每个键值对，从而提高代码的可读性和效率。
同时，Object.fromEntries 方法的应用场景非常丰富，从创建键值对数组到合并多个对象或数组，都可以使用该方法来实现。如果您在生产环境中使用 JavaScript，那么 Object.fromEntries 方法一定会给您带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593f392eb4cecbf2d88f1ef