如何在 ES12 中使用转换 Object.fromEntries() 和 Object.entries()

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在 ECMAScript 2019 (ES12) 中,新增了两个方法 Object.fromEntries() 和 Object.entries(),这两个方法对于前端开发者来说非常实用。本文将详细介绍这两个方法的用法和实际应用场景,并提供示例代码,帮助读者更好地理解。

Object.fromEntries()

Object.fromEntries() 方法接受一个键值对数组,返回一个新的对象。该方法与 Object.entries() 相反,后者将一个对象转换为一个键值对数组。

下面是一个简单的示例,演示如何使用 Object.fromEntries() 方法将一个键值对数组转换为一个对象:

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

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

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

在这个示例中,我们首先定义了一个键值对数组 entries,然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果是 {foo: "bar", baz: 42}。

我们还可以使用 Object.fromEntries() 方法来转换一个 Map 对象,如下所示:

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

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

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

在这个示例中,我们首先创建了一个 Map 对象,然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果与前面的示例相同。

Object.entries()

Object.entries() 方法接受一个对象,返回一个键值对数组。该方法与 Object.fromEntries() 相反,后者将一个键值对数组转换为一个对象。

下面是一个简单的示例,演示如何使用 Object.entries() 方法将一个对象转换为一个键值对数组:

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

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

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

在这个示例中,我们首先定义了一个对象 obj,然后使用 Object.entries() 方法将其转换为一个键值对数组 entries。最终输出结果是 [["foo", "bar"], ["baz", 42]]。

我们还可以使用 Object.entries() 方法来迭代一个对象的属性和值,如下所示:

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

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

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

在这个示例中,我们首先定义了一个对象 obj,然后使用 Object.entries() 方法迭代其属性和值。最终输出结果是:

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

应用场景

Object.fromEntries() 和 Object.entries() 方法在实际开发中有很多应用场景。下面是一些示例:

将 URL 参数转换为对象

在 Web 开发中,我们经常需要将 URL 参数转换为对象。下面是一个示例,演示如何使用 Object.fromEntries() 方法将 URL 参数转换为对象:

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

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

在这个示例中,我们首先创建了一个 URLSearchParams 对象,然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最终输出结果是 {foo: "bar", baz: "42"}。

将对象转换为 FormData

在 Web 开发中,我们经常需要将一个对象转换为 FormData。下面是一个示例,演示如何使用 Object.entries() 方法将一个对象转换为 FormData:

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

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

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

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

在这个示例中,我们首先定义了一个对象 obj,然后使用 Object.entries() 方法迭代其属性和值,并将它们添加到 FormData 中。最终输出结果是 FormData {foo: "bar", baz: "42"}。

总结

Object.fromEntries() 和 Object.entries() 是 ECMAScript 2019 (ES12) 中新增的方法,它们可以方便地将一个键值对数组和一个对象之间进行转换。在实际开发中,这两个方法有很多应用场景,例如将 URL 参数转换为对象和将对象转换为 FormData。希望本文对读者有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/660d5328d10417a222daabaa


猜你喜欢

  • LESS 预处理器技术:优化规范的 CSS 代码

    CSS 是前端开发中不可或缺的一部分,但是随着项目规模的增大和代码量的增加,CSS 的维护变得越来越困难。LESS 是一种 CSS 预处理器,通过引入变量、函数、嵌套等特性,可以帮助我们编写更加优化规...

    7 个月前
  • 解决 ESLint 格式化 JavaScript 代码之后丢失行末分号

    问题背景 在前端开发中,我们通常使用 ESLint 对 JavaScript 代码进行格式化和规范化。然而,有时候在使用 ESLint 进行代码格式化之后,会出现丢失行末分号的问题,这会导致代码无法正...

    7 个月前
  • Material Design:Floating Action Button 的使用详解

    Material Design 是 Google 推出的一种全新的设计语言,它强调使用平面化和卡片化的设计风格,使得界面更加简洁、直观和美观。其中,Floating Action Button(简称 ...

    7 个月前
  • Kubernetes 中使用 custom-metrics-api 实现自定义指标扩展

    前言 Kubernetes 是一个流行的容器编排系统,它提供了许多内置的指标来监控集群和容器的健康状况。然而,有时候我们需要自定义指标来更好地监控应用程序的状态,例如,我们可能需要监控某个特定的业务指...

    7 个月前
  • ECMAScript 2021 中的解构和重组

    在 ECMAScript 2021 中,解构和重组是两个非常重要的特性。这两个特性可以让我们更加方便地管理和操作数据,从而提高代码的可读性和可维护性。在本文中,我们将深入探讨这两个特性的使用方法和应用...

    7 个月前
  • ES8 之新特性 Object.entries() 和 Object.values() 快速变量两全其美

    在前端开发中,我们经常需要对对象进行遍历或者获取对象中的某些属性值。ES8 中新增了两个方法 Object.entries() 和 Object.values(),它们可以快速地帮助我们实现这些操作。

    7 个月前
  • Cypress 中文文档:全面学习 Cypress 测试框架

    前言 在前端开发中,测试是非常重要的一环。而 Cypress 是一款非常优秀的前端测试框架,可以帮助我们快速、准确地进行自动化测试。本文将介绍 Cypress 的基本用法和一些高级技巧,帮助大家更好地...

    7 个月前
  • ES10 中的 JSON.parse() 和 JSON.stringify() 方法中的扩展字符 escape 和 unescape 的用法

    在 ES10 中,JSON.parse() 和 JSON.stringify() 方法又新增了两个扩展字符,分别是 escape 和 unescape。这两个字符的作用是对字符串进行编码和解码,以避免...

    7 个月前
  • ES7 如何使用 SharedArrayBuffer 和 Atomics 在多线程中共享数据

    在传统的 JavaScript 中,单线程的限制使得开发者无法充分利用多核处理器的性能,因为 JavaScript 只能在一个线程中执行代码。为了解决这个问题,Web Workers API 被引入到...

    7 个月前
  • 如何利用 LESS 变量实现可回收的 CSS 样式

    在前端开发中,我们常常需要定义一些常用的样式,例如颜色、字体、边框等。为了避免代码冗余,我们可以使用 LESS 变量来实现可回收的 CSS 样式。 LESS 变量 LESS 是一种 CSS 预处理器,...

    7 个月前
  • 必读:Mongoose 实战,如何在查询中使用正则表达式

    前言 Mongoose 是一个优秀的 Node.js ORM 库,它提供了一种优雅的方式来操作 MongoDB 数据库。在实际开发中,我们经常需要对数据进行查询和过滤,而正则表达式是一种非常强大的工具...

    7 个月前
  • 使用 ESLint 创建 Node.js 项目代码风格

    在开发 Node.js 项目时,代码风格的一致性是非常重要的,可以提高代码的可读性和可维护性。而 ESLint 是一个非常流行的 JavaScript 代码检查工具,可以帮助我们规范代码风格,避免一些...

    7 个月前
  • Mocha 测试框架的 Stub、Spy、Mock 三种测试替身实现方法

    在前端开发中,测试是不可避免的一环。而 Mocha 是一个常用的 JavaScript 测试框架,它提供了三种测试替身实现方法:Stub、Spy、Mock。本文将详细介绍这三种方法的实现原理、使用场景...

    7 个月前
  • 解决 Fastify 框架 UTF-8 编码错误

    背景 Fastify 是一个高效、低开销、易于使用的 Web 框架,它支持异步编程,可以处理大量并发请求。然而,在使用 Fastify 进行开发时,我们可能会遇到一个常见的问题:UTF-8 编码错误。

    7 个月前
  • Kubernetes 中使用 Horizontal Pod Autoscaler 实现应用自动扩容

    随着云计算和容器技术的普及,Kubernetes 已经成为了最受欢迎的容器编排工具之一。在 Kubernetes 中,我们可以使用 Horizontal Pod Autoscaler(HPA)来实现应...

    7 个月前
  • ECMAScript 2021 中的 try 和 catch 语句:JavaScript 错误处理技术详解

    JavaScript 是一种动态语言,它的灵活性和易用性使得它成为了 Web 前端开发的主流语言。然而,JavaScript 也因为它的动态特性带来了一些难以避免的问题,比如说:运行时错误。

    7 个月前
  • RxJS 和 Firebase:使用 RxJS 和 Firebase 进行交互

    前言 RxJS 是一个强大的响应式编程库,它可以帮助我们处理异步数据流。Firebase 是一个实时数据库,它可以帮助我们实时同步数据。在本文中,我们将介绍如何使用 RxJS 和 Firebase 进...

    7 个月前
  • ES8 的正则表达式命名捕获组

    在前端开发中,正则表达式是一个非常重要的工具,它可以帮助我们对文本进行强大的处理和分析。而在 ES8 中,正则表达式新增了命名捕获组的功能,它可以让我们的代码更加简短易读,同时也可以提高代码的可维护性...

    7 个月前
  • Node.js 如何实现 Gzip 压缩及解压

    在前端开发中,经常需要传输大量的数据,但传输大量数据会导致网站速度变慢,影响用户体验。为了解决这个问题,可以使用 Gzip 压缩技术,减少数据传输的大小,提高网站性能。

    7 个月前
  • 使用 Docker 容器化部署 TensorFlow 应用的指南及最佳实践

    前言 TensorFlow 是一款广泛使用的开源机器学习框架,它提供了一系列的 API 和工具,可以帮助用户快速构建、训练和部署机器学习模型。然而,要部署一个 TensorFlow 应用并不是一件简单...

    7 个月前

相关推荐

    暂无文章