ES12 新特性之 Object.fromEntries

阅读时长 5 分钟读完

ES12(也称作 ES2021)是 ECMAScript(即 JavaScript)语言的最新标准版本。在这个标准版本中,有许多新的语言特性和 API,其中之一就是 Object.fromEntries 方法。

在本文中,我们将详细介绍 Object.fromEntries 的用法、指导意义以及示例代码。

什么是 Object.fromEntries

Object.fromEntries 是 ES12 中新增的静态方法,它用于将一个键值对的数组转换为一个对象。它的定义如下:

其中,iterable 是一个为键值对数组的可迭代对象,例如由 Object.entries 生成的数组。

这个方法返回的对象包含 iterable 中所有键值对的属性和值,其中键值对的键是数组中的第一个元素,值是数组中的第二个元素。

下面是一个示例代码与结果:

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

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

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

Object.fromEntries 的指导意义

Object.fromEntries 方法可以帮助我们将一个键值对数组转换为一个对象。这种情况在开发中很常见,例如我们经常需要将一些从后端接口获取到的数据以键值对数组的形式传递给前端组件,这时候就可以使用 Object.fromEntries 来将它们转换为对象。

另外,通过 Object.fromEntries,我们还可以将一个 Map 转换为对象。Map 是 ES6 中新增的数据结构,可以用于存储一系列键值对,它与对象的区别在于,其键可以是任意类型,而对象的键必须是字符串或符号。有些时候我们需要将 Map 转换为对象,这时候就可以使用 Object.fromEntries。

Object.fromEntries 的示例代码

接下来,我们将给出一些使用 Object.fromEntries 的示例代码:

1. 将一个 Map 转换为对象

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

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

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

2. 将查询字符串转换为对象

在 URL 中,查询字符串是指 URL 中 ? 后面的部分,例如 ?name=john&age=30。这种格式的数据可以使用 Object.fromEntries 转换为对象:

3. 将表格行转换为对象

在 HTML 中,表格是通过 table 元素和 tr 元素构成的。我们通常使用 DOM API 获取表格中的行,例如:

这个 rows 对象是一个 NodeList,其中每个元素都代表一个表格行。如果我们想要将它们转换为一个数组,并且每个数组元素都是一个对象,其中对象的属性名是表格中第一列的值,属性值是表格中第二列的值。这时候我们就可以将 NodeList 转换为数组,然后使用 Object.fromEntries:

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

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

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

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

总结

Object.fromEntries 是 ES12 中新增的静态方法,用于将一个键值对数组转换为对象。它的指导意义在于可以帮助我们将一些常见的数据格式转换为对象,从而方便地在应用程序中使用。同时,它可以帮助我们将 Map 转换为对象,从而使得两种数据结构之间的转换更加方便。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6495344248841e9894275973

纠错
反馈