使用 ES10 中的 object.fromEntries() 来创建新的 Map 和对象字面量

在 ES2019 中，JavaScript 引入了 Object.fromEntries() 方法，它可以将一个包含键值数组的列表转换为一个对象字面量或者一个 Map。

在前端开发中，我们经常需要处理对象和 Map 类型的数据。本文将介绍 Object.fromEntries() 方法的详细用法，并提供一些示例代码，帮助你更好地理解和掌握这个方法。

Object.fromEntries() 方法的用途

在 ES10 中，Object.fromEntries() 方法的作用是将一个包含键值数组的列表转换为一个对象字面量或者一个 Map。它的语法如下：

Object.fromEntries(iterable)

其中，iterable 参数是一个键值数组的列表，每个元素都是一个包含两个元素的数组：第一个元素是键名，第二个元素是键值。

该方法的返回值是一个对象，该对象的属性是由列表中的键值数组生成的。

使用 Object.fromEntries() 创建新的对象字面量

下面是使用 Object.fromEntries() 创建对象字面量的一个示例代码：

const entries = [
  ['foo', 'bar'],
  ['baz', 42]
];

const obj = Object.fromEntries(entries);

console.log(obj); // { foo: "bar", baz: 42 }

在这个示例中，我们创建了一个包含键值数组的列表 entries，它包含两个元素，每个元素都是一个包含两个元素的数组。

然后，我们调用了 Object.fromEntries(entries) 方法，将列表 entries 转换为一个对象字面量 obj。

最后，我们将对象字面量 obj 输出到控制台。输出结果是：

{ foo: "bar", baz: 42 }

我们可以看到，Object.fromEntries() 方法将列表 entries 转换为了一个对象字面量，该对象的属性是由列表中的键值数组生成的。

使用 Object.fromEntries() 创建新的 Map

除了可以创建对象字面量外，Object.fromEntries() 方法还可以创建新的 Map。下面是一个示例代码：

const entries = [
  ['foo', 'bar'],
  ['baz', 42]
];

const map = new Map(entries);

console.log(map); // Map { 'foo' => 'bar', 'baz' => 42 }

在这个示例中，我们同样创建了一个包含键值数组的列表 entries，它包含两个元素，每个元素都是一个包含两个元素的数组。

然后，我们调用了 new Map(entries) 方法，将列表 entries 转换为了一个新的 Map map。

最后，我们将新的 Map map 输出到控制台。输出结果是：

Map { 'foo' => 'bar', 'baz' => 42 }

我们可以看到，我们成功地使用 Object.fromEntries() 方法创建了一个新的 Map 对象。

深入理解 Object.fromEntries() 方法

除了创建新的对象字面量和 Map 外，Object.fromEntries() 方法还可以用于以下场景：

1. 将对象的属性名和属性值互换；
2. 过滤属性值为 undefined 的属性；

下面分别介绍这两个场景。

将对象的属性名和属性值互换

有时候，我们可能需要将对象的属性名和属性值互换。使用 Object.fromEntries() 方法可以轻松实现这个功能。下面是一个示例代码：

const obj = { one: 1, two: 2, three: 3 };

const entries = Object.entries(obj).map(([key, value]) => [value, key]);

const newObj = Object.fromEntries(entries);

console.log(newObj); // { '1': 'one', '2': 'two', '3': 'three' }

在这个示例中，我们创建了一个对象字面量 obj，它包含三个属性：one、two、three，分别对应值 1、2、3。

我们使用 Object.entries(obj) 方法将对象转换为一个包含键值数组的列表 entries，然后调用 map() 方法将每个键值数组中的键名和键值互换。

最后，我们调用 Object.fromEntries(entries) 方法，将列表 entries 转换为了一个新的对象字面量 newObj。

输出结果是：

{ '1': 'one', '2': 'two', '3': 'three' }

我们可以看到，成功地将对象 obj 的属性名和属性值互换了。

过滤属性值为 undefined 的属性

有时候，我们需要过滤对象中属性值为 undefined 的属性。使用 Object.fromEntries() 方法可以轻松实现这个功能。下面是一个示例代码：

const obj = { a: 'foo', b: undefined, c: 'bar' };

const entries = Object.entries(obj).filter(([key, value]) => value !== undefined);

const newObj = Object.fromEntries(entries);

console.log(newObj); // { a: 'foo', c: 'bar' }

在这个示例中，我们创建了一个对象字面量 obj，它包含三个属性：a、b、c，分别对应值 'foo'、undefined、'bar'。

我们使用 Object.entries(obj) 方法将对象转换为一个包含键值数组的列表 entries，然后调用 filter() 方法将属性值为 undefined 的属性过滤掉。

最后，我们调用 Object.fromEntries(entries) 方法，将列表 entries 转换为了一个新的对象字面量 newObj。

输出结果是：

{ a: 'foo', c: 'bar' }

我们可以看到，成功地过滤掉了 obj 中属性值为 undefined 的属性。

如何使用 Object.fromEntries() 方法

在实际开发中，我们可以使用 Object.fromEntries() 方法来简化一些常见操作，比如将对象的属性名和属性值互换，过滤掉属性值为 undefined 的属性，等等。

同时，在使用 Object.fromEntries() 方法时，我们需要注意以下几点：

1. iterable 参数必须是一个可迭代对象，每个元素都必须是一个包含两个元素的数组，第一个元素是键名，第二个元素是键值；
2. 如果 iterable 参数中有重复的键名，最后一个键值将覆盖之前的键值；
3. 如果包含不是键值数组的元素，或者键值数组中的元素不是数组或者数组长度不为 2，将会抛出一个 TypeError 错误；

总结

Object.fromEntries() 方法是 ES10 中的一个新方法，它可以将一个包含键值数组的列表转换为一个对象字面量或者一个 Map。在前端开发中，我们经常需要处理对象和 Map 类型的数据，而 Object.fromEntries() 方法可以简化一些常见操作，比如将对象的属性名和属性值互换，过滤掉属性值为 undefined 的属性，等等。在使用该方法时，我们需要注意参数的格式以及可能会发生的错误，避免程序出现异常。

本文中提供的示例代码可以帮助你更好地理解和掌握 Object.fromEntries() 方法，希望能对你有所启发，帮助你更好地解决实际开发中遇到的问题。

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