ES9 的 Object.fromEntries() 方法使用技巧分享-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2018 标准中，JavaScript 引入了一个新的静态方法，即 Object.fromEntries() 方法。该方法可以将一个二维数组转换为一个对象。该方法是个非常实用的方法，可以帮助我们更加轻松和高效地操作对象和数据。

一、`Object.fromEntries()` 方法的用法

Object.fromEntries() 方法接受一个二维数组作为参数，该数组的每个元素都应该是一个长度为 2 的数组，第一个元素表示对象的属性名，第二个元素表示对象的属性值。返回值是一个新的对象，包含了参数二维数组中各个元素的属性名和属性值。

举个例子，我们可以通过以下代码将一个二维数组转化为一个对象：

const entries = [['foo', 'bar'], ['baz', 42]];
const obj = Object.fromEntries(entries);
console.log(obj); // {foo: "bar", baz: 42}

二、`Object.fromEntries()` 的技巧

1. 对象键值对的反转

如果你想要将对象的键和值反转，可以使用 Object.entries() 和 Object.fromEntries() 方法，如下所示：

const obj = {a: 1, b: 2, c: 3};
const invertedObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [value, key])
);
console.log(invertedObj); // {1: "a", 2: "b", 3: "c"}

在这个例子中，我们首先使用 Object.entries() 方法将对象转换为二维数组，然后使用 map() 方法替换数组元素的顺序，最后将结果作为参数传递给 Object.fromEntries() 方法。这样我们就成功地得到了一个反转后的对象。

2. 从 URLSearchParams 对象构建对象

如果你需要从 URLSearchParams 对象中构建对象，可以使用 Object.fromEntries() 方法进行转换，如下所示：

const params = new URLSearchParams('foo=bar&baz=42');
const obj = Object.fromEntries(params);
console.log(obj); // {foo: "bar", baz: "42"}

我们可以使用 new URLSearchParams() 获取 URLSearchParams 对象，取 URLSearchParams 对象的方式可以是字符串，也可以是实际的 URLSearchParams。然后将 URLSearchParams 对象转换为对象，使用 Object.fromEntries() 方法就可以方便地将 URLSearchParams 对象转换为对象。

3. 简化对象属性筛选

如果你需要筛选掉某个对象中的属性，可以使用 Object.entries() 方法，在过滤后使用 Object.fromEntries() 方法转换回对象，如下所示：

const obj = {a: 1, b: 2, c: 3};
const filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => key !== 'a')
);
console.log(filteredObj); // {b: 2, c: 3}

这个例子中，我们首先使用 Object.entries() 方法将对象转换为二维数组，然后使用 filter() 方法过滤掉不需要的属性，最后将结果作为参数传递给 Object.fromEntries() 方法。

三、总结

在本文中，我们学习了 Object.fromEntries() 方法，这是 ECMAScript 2018 中一个非常实用的方法。我们展示了如何使用它来实现各种各样的操作，包括对象键值对的反转、从 URLSearchParams 对象构建对象和简化对象属性筛选。

为了更好地利用 Object.fromEntries() 方法，我们建议掌握 ES6 之后的新语法和一些常见的 JavaScript 数据类型。掌握这些知识可以帮助你更加轻松地理解和使用 Object.fromEntries() 方法。

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

ES9 的 Object.fromEntries() 方法使用技巧分享

一、Object.fromEntries() 方法的用法