ES12 中的对象.fromEntries()-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中，新增了一个对象方法 Object.fromEntries()，它可以将一个键值对数组转换成一个对象。

语法

Object.fromEntries(iterable)

iterable：一个可迭代对象，它的元素是由键值对组成的数组。

简单示例

const entries = [['name', '张三'], ['age', 18]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: '张三', age: 18 }

深入理解

Object.fromEntries() 方法主要用于将一个键值对数组转换成一个对象。在实际开发中，我们经常会遇到这种情况，比如后端返回的数据格式为键值对数组，而我们需要将其转换成对象方便操作。

Object.fromEntries() 方法的实现原理非常简单，它实际上是通过遍历数组中的每一个键值对，然后将其添加到一个新的对象中。

Object.fromEntries = function (iterable) {
  let obj = {};
  for (let [key, value] of iterable) {
    obj[key] = value;
  }
  return obj;
};

需要注意的是，Object.fromEntries() 方法会忽略掉不是数组的元素，所以在使用时需要确保每个元素都是由键值对组成的数组。

使用场景

除了将键值对数组转换成对象之外，Object.fromEntries() 方法还有很多其他的使用场景。下面介绍几个常见的场景。

将 Map 转换成对象

在 ES6 中，新增了一个数据结构 Map，它可以存储任意类型的键和值，并且支持迭代器。如果我们需要将一个 Map 转换成对象，可以使用 Object.fromEntries() 方法。

const map = new Map([['name', '张三'], ['age', 18]]);
const obj = Object.fromEntries(map);
console.log(obj); // { name: '张三', age: 18 }

将 URLSearchParams 转换成对象

在前端开发中，我们经常需要对 URL 进行解析和操作。在 ES6 中，新增了一个 URLSearchParams 对象，它可以方便地对 URL 参数进行解析和操作。如果我们需要将一个 URLSearchParams 对象转换成对象，可以使用 Object.fromEntries() 方法。

const searchParams = new URLSearchParams('name=张三&age=18');
const obj = Object.fromEntries(searchParams);
console.log(obj); // { name: '张三', age: '18' }

需要注意的是，如果 URL 参数中存在相同的键，Object.fromEntries() 方法只会取最后一个键值对的值。

将数组转换成对象

有时候，我们需要将一个数组转换成一个对象，其中数组中的每个元素都是一个对象，且对象中包含了键和值。这时候，我们可以使用 Object.fromEntries() 方法。

const arr = [
  { key: 'name', value: '张三' },
  { key: 'age', value: 18 },
];
const obj = Object.fromEntries(arr.map(item => [item.key, item.value]));
console.log(obj); // { name: '张三', age: 18 }

总结

Object.fromEntries() 方法是 ES12 中新增的一个对象方法，它可以将一个键值对数组转换成一个对象。在实际开发中，它有很多使用场景，比如将 Map 转换成对象、将 URLSearchParams 转换成对象、将数组转换成对象等等。需要注意的是，在使用时需要确保每个元素都是由键值对组成的数组。

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