ES9 的 Object.fromEntries() 方法与实际应用-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2018 (ES9) 中，新增了一个非常方便的方法——Object.fromEntries()，它可以让开发者更快捷、更高效地将键值对数组转化成对象，从而为前端开发带来了极大的便利。本文将详细介绍 Object.fromEntries() 的功能和应用，并结合实例演示。

Object.fromEntries() 简介

Object.fromEntries() 方法是从 ECMAScript 2019（ES10）开始，被定义为“Object”构造函数的一个静态方法。它的作用是将一个包含键值对的数组转换为一个对象。该方法接收一个键值对数组（如 Map 对象转换成的数组），然后返回一个由这些键值对生成的新对象。

具体语法如下：

Object.fromEntries(iterable)

iterable：表示一个键值对数组。

返回值：由参数中的键值对生成的新对象。

Object.fromEntries() 实例演示

下面通过实例来演示 Object.fromEntries() 方法在实际编码中的应用。

1. 将 Map 对象转换成对象

我们来看一个最简单的例子，将 Map 转换为对象：

const mapObj = new Map([['name', 'Jack'], ['age', 21]]);
const obj = Object.fromEntries(mapObj);
console.log(obj); // 输出：{name: "Jack", age: 21}

可以看到，使用 Object.fromEntries() 方法将 Map 对象转换为了一个对象。

2. 将 URLSearchParams 对象转换成对象

URLSearchParams 对象是一个包含 URL 查询参数的对象，通常用于解析和操作 URL 上的查询字符串。我们可以使用 Object.fromEntries() 方法将 URLSearchParams 对象转换成对象：

const params = new URLSearchParams('name=Jack&age=21');
const obj = Object.fromEntries(params);
console.log(obj); // 输出：{name: "Jack", age: "21"}

3. 合并对象数组

除了将 Map 或 URLSearchParams 对象转换成对象以外，Object.fromEntries() 方法还可以对对象数组进行合并。我们可以对每个对象从中提取和转换指定属性。例如，我们有一个对象数组：

const arr = [{ name: 'Jack', gender: 'male' }, { age: 21, score: 85 }];

现在想要将这个对象数组转换成一个对象，其中只包含 name 和 score 属性，我们可以这样做：

const obj = Object.fromEntries(
  arr.map((item) =>
    Object.entries(item).filter(([key]) => ['name', 'score'].includes(key))
  )
);
console.log(obj); // 输出：{name: "Jack", score: 85}

在这个例子中，我们先使用 map() 方法提取每个对象的指定属性，再使用 Object.entries() 方法将每个对象转换为一个键值对的二维数组。接着使用 filter() 方法筛选出包含指定属性的键值对，最后使用 Object.fromEntries() 方法将键值对数组转换为对象。

总结

Object.fromEntries() 方法是 ES9 提供的一项非常实用的功能，可以让我们更高效地将键值对数组转换为对象。在实际开发中，它有很多应用场景，如将 Map 对象转换为对象、将 URLSearchParams 对象转换为对象，以及合并对象数组等。使用 Object.fromEntries() 方法可以帮助我们更好地提升代码效率，因此建议大家在开发过程中多加利用。

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