ES11 标准：Object.fromEntries，让我们一起来学习吧！-JavaScript中文网-JavaScript教程资源分享门户

引言

在 ECMAScript 2020 标准（也称为 ES11）中，提供了一项新功能：Object.fromEntries()。这是一个非常实用的功能，可以快速将数组转换为对象，同时提高 JavaScript 编程的效率。在本篇文章中，我们会一起探讨 Object.fromEntries() 的用法和应用场景。

什么是 Object.fromEntries()？

Object.fromEntries() 是 ECMAScript 2020 标准中的一个新方法，用于将键值对数组转换为对象。该方法接收一个键值对的二维数组作为参数，而且每个元素也是由一个数组组成的。

这个新方法返回一个新的对象，对象的属性名是数组元素的第一项，而属性值是数组元素的第二项。以下是一个使用 Object.fromEntries() 方法的示例：

const entries = [['foo', 'bar'], ['baz', 42]];
const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: { foo: 'bar', baz: 42 }

Object.fromEntries() 和 Object.entries() 的比较

在介绍 Object.fromEntries() 方法之前，先讲一下另一个和它相关的方法：Object.entries()。这个方法是 ES2017 标准中推出的，作用是将对象转换为键值对数组。

Object.entries() 将对象的每个属性名和属性值组成一个二维数组，然后返回所有二维数组的集合。与 Object.fromEntries() 方法不同的是，Object.entries() 方法可以将对象转换为数组，而 Object.fromEntries() 方法可以将数组转换为对象。

以下是一个使用 Object.entries() 方法的示例：

const obj = { foo: 'bar', baz: 42 };
const entries = Object.entries(obj);

console.log(entries);
// expected output: [['foo', 'bar'], ['baz', 42]]

Object.fromEntries() 的应用场景

在许多场景下，我们需要将数组转换为对象。比如，数据的形式不一定是对象，可能是数组或其他格式，如果需要对数据进行处理，通常需要将其转换为对象。

Object.fromEntries() 方法提供了一种简单且快速的方法来将数组转换为对象。例如，我们在处理 form 表单数据时，可能会遇到以下数据结构：

const formData = [
  ['name', 'John'],
  ['age', 30],
  ['email', 'john@example.com']
];

这个数据结构看起来像一个数组，但实际上每个元素都表示一个键值对，这种情况下我们可以使用 Object.fromEntries() 方法将其转换为对象：

const formObject = Object.fromEntries(formData);
console.log(formObject);
// expected output: { name: 'John', age: 30, email: 'john@example.com' }

另一个应用场景是封装一个快捷方式，以便于操作对象的键和值。例如：

const objectify = (object, key, value) => {
  return Object.assign({}, object, { [key]: value });
};

const person = {};
const newPerson = objectify(person, 'name', 'John');
console.log(newPerson);
// expected output: { name: 'John' }

结论

Object.fromEntries() 方法是一个实用的工具，用于将数组转换为对象。它使得在 JavaScript 中进行数据处理变得更加容易和高效。无论是处理表单数据，还是通过快捷方式来操作对象数据，Object.fromEntries() 都是一个非常有用的方法。

在使用 Object.fromEntries() 方法时，请确保您的浏览器支持 ECMAScript 2020 标准，尤其是早期版本的浏览器可能不支持该方法。现在，它已经成为主流浏览器的标准特性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67701d57e9a7045d0d7a3213