ES9 的 Object.fromEntries & Object.entries 方法详解-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一种快速发展的语言，每年都有新的特性和功能被添加到语言的核心中。ES9（ECMAScript 2018）是 JavaScript 商品化的最新版本。其中包括了一些新的方法和语言特性，其中 Object.fromEntries() 和 Object.entries() 就是其中之一。

这两个方法允许你在对象和数组之间进行转换。下面将对这两个方法进行详细介绍。

Object.fromEntries()

Object.fromEntries() 方法用于将一个键值对数组转换为一个对象。这个数组可以通过 Object.entries() 方法产生，或者自己手工创建。下面是一个示例：

const entries = [['key1', 'value1'], ['key2', 'value2']];

const obj = Object.fromEntries(entries);

console.log(obj); // { key1: 'value1', key2: 'value2' }

上面的代码将数组 entries 转换成了一个对象。

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。数组中每个元素都是一个长度为 2 的数组，包含了对象自身可枚举属性的 key 和 value。下面是一个示例：

const obj = { key1: 'value1', key2: 'value2' };

const entries = Object.entries(obj);

console.log(entries); // [['key1', 'value1'], ['key2', 'value2']]

上面的代码将对象 obj 转换成了一个数组。

基本用法

Object.fromEntries() 方法通常用于将键值对数组转换为对象。下面是一个更复杂的示例：

const entries = [['name', 'Alice'], ['age', 25], ['city', 'Shanghai']];

const obj = Object.fromEntries(entries);

console.log(obj); // { name: 'Alice', age: 25, city: 'Shanghai' }

高级用法

Object.entries() 和 Object.fromEntries() 可以结合使用来更轻松地操作对象。下面是一个示例：

// javascriptcn.com 代码示例
const person = {
  name: 'Alice',
  age: 25,
  city: 'Shanghai',
};

const updatedPerson = Object.fromEntries(
  Object.entries(person).map(([key, value]) => [key, value.toUpperCase()])
);

console.log(updatedPerson); // { name: 'ALICE', age: 25, city: 'SHANGHAI' }

上面的代码中，我们可以在一个对象上使用 Object.entries()，将其转换为一个键值对数组。我们然后将这个数组映射到一个新数组中，并通过一个将值转换为大写的函数来对其进行转换。最后，我们使用 Object.fromEntries()，创建一个新对象并将映射后的数组作为参数传递，最终得到一个更新后的对象。

总结

Object.fromEntries() 和 Object.entries() 这两个方法可以让我们更方便地在对象和数组之间进行转换。这些功能有助于更快地开发和维护 JavaScript 代码。研究这些新的 ES9 方法并将它们应用到项目中，可以让你编写更简洁、易于阅读和维护的代码。

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