ES11 中Object.fromEntries的使用详解-JavaScript中文网-JavaScript教程资源分享门户

在ES11中，Object.fromEntries是一项更新和增强的功能。该功能为我们提供了一个新的方法来将数组转换为对象。当我们在开发前端应用程序时，这个功能可以让我们更加高效地管理数据并且编写更加干净的代码。在本文中，我们将深入了解Object.fromEntries的使用方法。

什么是Object.fromEntries？

Object.fromEntries接受一个包含键/值配对的数组作为参数，并从中创建一个新对象。每个键/值对都是数组中的一个元素，其中第一个元素表示键，第二个元素表示值。

例如，考虑以下数组：

const keyValueArr = [['name', 'John'], ['age', '32'], ['country', 'USA']];

我们可以使用Object.fromEntries将其转换为以下对象：

{
  name: 'John',
  age: '32',
  country: 'USA'
}

如何使用Object.fromEntries？

使用Object.fromEntries很简单，并且非常易于理解。首先，我们需要创建一个包含键/值数组的变量。这个变量通常由某个API，例如窗口.localStorage.getItem('key')返回的数据。

然后，我们可以在该数组上调用Object.fromEntries方法，该方法将创建并返回一个新对象。

这是一个基本的示例：

const arr = [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']];
const obj = Object.fromEntries(arr);

console.log(obj);

输出结果为:

{
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

请注意，Object.fromEntries方法仅适用于符合特定格式的数组，其中每个元素都是一个键/值数组，每个键/值数组仅由两个元素组成。

示例应用

现在我们来看一些实际应用Object.fromEntries的示例，以更好地理解它。

数组转换为对象

首先，让我们利用该功能将一个数组转换为一个对象，这在许多场景下都很有用。

考虑以下数组：

const userData = [
  ['id', '001'],
  ['name', 'James'],
  ['age', 32],
  ['occupation', 'Developer'],
];

现在，我们可以使用Object.fromEntries将其转换为以下对象：

{
  id: '001',
  name: 'James',
  age: 32,
  occupation: 'Developer',
}

对象的键值反转

有时候，我们需要交换对象中键和值的位置。这个时候，Object.fromEntries就特别有用了。

考虑以下对象：

const myObj = {
  name: 'James',
  age: 32,
  occupation: 'Developer',
};

现在，我们可以使用Object.fromEntries和Array.map方法将其转换为以下对象：

{
  James: 'name',
  32: 'age',
  Developer: 'occupation',
}

这里是如何实现这种转换：

const newObj = Object.fromEntries(
  Object.entries(myObj).map(([key, value]) => [value, key])
);

console.log(newObj);

输出结果为：

{
  James: 'name',
  32: 'age',
  Developer: 'occupation',
}

从URL查询参数创建对象

使用Object.fromEntries，我们可以将URL查询参数转换为对象。URLSearchParams类是一个用于处理URL查询字符串的内置API。使用该类的entries()方法，我们可以获取一个包含所有查询参数的迭代器。我们可以将这个迭代器转换为数组，并将其传递给Object.fromEntries，从而创建一个新对象。

const searchParams = new URLSearchParams('?search=ES11&user=John&age=25');

const obj = Object.fromEntries([...searchParams.entries()]);

console.log(obj);

输出结果为：

{
  search: 'ES11',
  user: 'John',
  age: '25',
}

总结

Object.fromEntries是一个功能强大且易于使用的方法。该方法可以使前端开发变得更加高效和有趣。我们可以使用它来将一个数组转换为一个对象，反转对象的键/值对或将URL查询参数转换为对象。希望该文章使您更好地理解Object.fromEntries的使用方法，并且激发您在代码编写中的创造力。

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