ES10 中 Object.fromEntries 的作用与使用场景全解析-JavaScript中文网-JavaScript教程资源分享门户

Object.fromEntries() 是 JavaScript 的新方法，被添加到 ES10 中。这个方法允许我们将由键值对组成的数组转换成一个对象，同时也提供了其他的一些有用的功能。本文将详细探讨这个方法的作用及其使用场景。

对象的创建

在 JavaScript 中创建一个对象的方式有很多。比如使用字面量创建一个对象：

const person = { name: '张三', age: 18, gender: 'male' };

使用 Object() 构造函数创建对象：

const person = new Object();
person.name = '张三';
person.age = 18;
person.gender = 'male';

使用类创建对象：

-- -------------------- ---- -------
----- ------ -
  ----------------- ---- ------- -
    --------- - -----
    -------- - ----
    ----------- - -------
  -
-

----- ------ - --- ------------ --- --------

这些方式都有适用的场景。但是在某些情况下，我们需要将一个由键值对组成的数组转换成对象。这时候 Object.fromEntries() 就可以派上用场了。

Object.fromEntries 的作用

Object.fromEntries() 方法接收一个由键值对组成的数组，返回一个由这些键值对组成的对象。

下面是一个简单的例子：

const entries = [['name', '张三'], ['age', 18], ['gender', 'male']];
const person = Object.fromEntries(entries);

console.log(person); // { name: '张三', age: 18, gender: 'male' }

现在我们将一个由键值对组成的数组传入了 Object.fromEntries() 方法，方法返回了一个对象，对象中包含了这些键值对。我们甚至不需要事先创建一个空对象。

操作对象的属性

不仅如此，Object.fromEntries() 方法还可以像 Object.entries() 方法一样从对象中提取出键值对。

假设我们有这样一个对象：

const person = { name: '张三', age: 18, gender: 'male' };

我们可以使用 Object.entries() 方法将这个对象中的键值对提取出来：

const entries = Object.entries(person);

console.log(entries); // [['name', '张三'], ['age', 18], ['gender', 'male']]

现在我们可以通过操作这个 entries 数组来修改或者添加对象的属性。比如：

entries.push(['hobby', 'reading']);
entries[1][1] = 20;

const newPerson = Object.fromEntries(entries);
console.log(newPerson); // { name: '张三', age: 20, gender: 'male', hobby: 'reading' }

我们可以在 entries 数组中添加新的键值对，并且通过修改特定的键值对来修改对象的属性。最终使用 Object.fromEntries() 方法将修改后的数组转换成对象。

使用场景

Object.fromEntries() 方法在某些情况下会非常有用。下面是一些使用场景的示例。

对象的克隆

如果我们需要克隆一个对象而又不想改变原对象，我们可以使用 Object.fromEntries() 方法来实现。

下面是一个克隆对象的例子：

const person = { name: '张三', age: 18, gender: 'male' };
const newPerson = Object.fromEntries(Object.entries(person));

这里我们将对象中的键值对提取出来转换成数组，然后再通过 Object.fromEntries() 方法将其转换成对象。这样我们就克隆了一个新的对象。

扁平化对象

扁平化是指将一个嵌套层次较深的对象转换成一个扁平的对象，其中嵌套的对象的属性被展开并作为新对象的属性。

下面是一个示例：

-- -------------------- ---- -------
----- ---- - -
  ----- -----
  ---- ---
  -------- -
    --------- -----
    ----- -----
    ------- -----
  -
--

----- ------- - ----- ------ - --- --
  -------------------------------- --- --- --
    ------ - --- --------
      - - ------- ------------- ----------------- -
      - - ------- ---- ------------------ - - -
    - ----

----- -------- - --------------
----------------------  -- - ----- ----- ---- --- ------------------- ----- --------------- ----- ----------------- ----- -

在这个示例中，我们定义了一个函数 flatten()，它使用了 Object.entries() 和 reduce() 方法，将嵌套的对象扁平化，最后返回一个扁平对象。

将数组转换成对象

有时候，我们需要根据数组中的元素创建一个对象。这时候，Object.fromEntries() 方法会非常有用。

下面是一个示例：

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

总结

Object.fromEntries() 方法是 JavaScript 的一个非常有用的新方法。它允许我们将由键值对组成的数组转换成一个对象，提供了一种更方便的方式来操作对象的属性。此外，它还可以在一些特殊的场景中派上用场。当需要将数组转换成对象或者扁平化一个对象时，这个方法会非常有用。

这个方法简短且易于理解，建议开发者深入研究。

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