ES12 的 Object.fromEntries 方法大大简化对象的创建！-JavaScript中文网-JavaScript教程资源分享门户

ES12 中新增的 Object.fromEntries 方法，它是一个非常有用的对象创建工具。相比于传统的对象初始化方法，这个方法可以更加简洁、易于理解。本文将详细介绍使用 Object.fromEntries 方法创建对象的方法与意义，并通过示例代码加深理解。

Object.fromEntries 方法的概述

Object.fromEntries 方法是在 ES2019 中新增的一个静态方法，用于从一个由键值对数组构成的一个可迭代对象中创建一个新的对象。该方法有以下语法：

Object.fromEntries(iterable)

其中，iterable 是一个可迭代对象，它的每个元素都是一个键值对的数组。

Object.fromEntries 方法的使用

我们来看看如何使用 Object.fromEntries 方法。比如我们有一个包含键值对的数组：

const objArr = [
  ["name", "xiaoming"],
  ["age", 18],
  ["gender", "male"]
]

我们可以使用 Object.fromEntries 将其转化为一个对象：

const newObj = Object.fromEntries(objArr);
console.log(newObj);

输出结果为：

{ name: "xiaoming", age: 18, gender: "male" }

这样就可以在使用数据时，以对象的形式更加直观和方便。

Object.fromEntries 方法的实现过程

了解了使用方法后，我们来看看它的实现过程。在语法方面，它比较简单，主要还是考虑针对每一个键值对元素，将其“解构”为一个 key-value 的关系。

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

如上代码所示，我们首先定义了一个空对象 obj，然后遍历 iterable，将每个元素都解构成键值对 key-value，最终以对象形式返回。值得注意的是，在每次循环中，我们都会对数组的长度做一个校验，如果不符合相应的格式，就会向外抛出一个错误，意指迭代器中的数组元素必须包含且仅包含两个元素。

Object.fromEntries 方法的优势与局限

相比于传统创建对象的方法，Object.fromEntries 方法是更加简练、易于理解的。而且， _fromEntries 方法也可结合很多迭代器进行使用，比如 Map 中的 entries() 方法，FormData 中的 entries() 方法，这也是该方法得以推广的重要原因。但是，需要注意的是，fromEntries 方法不能用于迭代器元素的键值校验。当使用不合法的 Key，它不会抛出错误，而是忽略整个元素。这点需要特别关注。

Object.fromEntries 方法的应用

本文中的案例虽然只是新手们熟悉使用 Object.fromEntries 方法从数组转化为对象的方式，实际上该方法还有很多应用场景。例如，使用 Object.entries 方法和 Object.fromEntries 方法可以简化数组操作（注意，下面代码适用于支持 Array.prototype.flatMap 方法的浏览器环境）：

const arr = [
  { key: 'name', value: 'Julia' },
  { key: 'age', value: 18 },
  { key: 'gender', value: 'female' },
];
const obj = Object.fromEntries(arr.flatMap(Object.entries));
console.log(obj);

以上代码将遍历 arr 数组中的所有元素，利用 Object.entries 将每个元素的 key 和 value 直接拆分成一个键值对的数组，之后 flatMap 方法会将多个数组合并为单个一维数组，最终使用 Object.fromEntries 方法将它们合并为一个对象。使用这种方式，你可以直接将数据源是数组的对象快速转换为一个快速的访问方式。这种方法非常简单、易懂，同时还具有很好的代码风格。

结论

在本文中，我们学习了关于 ES12 Object.fromEntries 方法的使用和实现，并学以致用，通过示例代码和案例帮助新手们掌握如何使用这个方法从数组转为对象的方式。同时，我们也讲述了它的优势和局限，最后以一个更通用的例子，阐述了其繁且易于掌握框架等技术的优雅运用。总之，ES12 Object.fromEntries 是一种非常好的创建对象方法，为前端开发提供了非常可靠的解决方案。希望通过本文的学习，大家也能更好地使用这个方法，以提高开发效率和代码风格。

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