利用 ES10 中的 Object.fromEntries() 方法快速将数组转为对象-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要将数组转换为对象。在 ES10 中，新增的 Object.fromEntries() 方法可以非常方便地实现这个转换过程。

Object.fromEntries() 方法简介

Object.fromEntries() 方法可以将由键值对数组构成的数组转换为对象。这个方法接收一个由键值对数组组成的数组作为参数，返回一个新对象，该对象由这些键值对组成。

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(arr);
console.log(obj); // {a: 1, b: 2, c: 3}

Object.fromEntries() 的兼容性

Object.fromEntries() 是 ES10 中新增的方法，因此在旧版浏览器中可能无法使用。

从数组到对象的转换

在我们实际开发中，经常使用数组来表示一系列数据。例如，下面这个数组表示了一个用户列表：

const users = [
  ['id', 'name', 'age'],
  [1, 'Alice', 18],
  [2, 'Bob', 20],
  [3, 'Charlie', 25],
];

我们可以使用 Object.fromEntries() 方法将这个数组转换成一个对象：

const userObjects = users.slice(1).map(user => Object.fromEntries(users[0].map((key, index) => [key, user[index]])));
console.log(userObjects);
// [
//   {id: 1, name: "Alice", age: 18},
//   {id: 2, name: "Bob", age: 20},
//   {id: 3, name: "Charlie", age: 25}
// ]

具体来说，上述代码中的步骤如下：

先通过 slice(1) 去掉 users 中的首项，也就是头部的键名数组；
然后，遍历每个用户的信息数组 user，将其转换为一个由键值对构成的数组；
针对每个键值对数组，使用 Object.fromEntries() 将其转换为一个用户对象。

这样，我们就轻松地将一个由键值对数组构成的数组转换成了一组 JavaScript 对象。

实际应用

上面的转换方式为我们在实际开发中处理一些数据问题提供了思路。比如，有时候后端 API 返回的数据与前端需要的数据结构不同，我们就可以使用类似上述的方法，对数据进行适当的转换。也可以将本地存储的一些数据转换成更有结构化的对象，建立一个本地数据的对象缓存，方便访问等等。

总结

ES10 中新增的 Object.fromEntries() 方法可以非常方便地将由键值对数组构成的数组转换成一个对象。在实际开发过程中，我们可以使用这个方法来解决一些数据转换的问题。尤其在处理从后端返回数据的时候，我们可以先将数据转换成更加便于前端处理的结构，减少数据操作的复杂性。

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