ECMAScript 2019 中使用 Object.fromEntries() 实现数组和对象互转

在 ECMAScript 2019 中,引入了 Object.fromEntries() 方法,该方法可以将由键值对组成的数组转换为对象。同时,对象也可以通过 Object.entries() 方法转换为数组形式。这个新的方法提供了一种更加便捷的方式来实现数组和对象之间互转。

Object.fromEntries() 方法

Object.fromEntries() 是 ECMAScript 2019 的新特性,它可以将键值对数组转换为对象。这个方法接收一个由键值对组成的数组作为参数,并返回一个对象,该对象的属性和值对应于数组中的键值对。

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

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

运行结果如下:

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

在上面的代码中,我们将一个由键值对组成的数组 arr,通过调用 Object.fromEntries() 方法转换为了一个对象 obj。根据数组中的键值对,我们可以看到 obj 对象中含有三个属性:name、age 和 gender,它们的值分别为 Tom、24 和 male。

Object.entries() 方法

Object.entries() 方法是 Object.fromEntries() 方法的逆方法。它接收一个对象作为参数,并返回一个由键值对组成的数组。如果我们需要将一个对象转换为数组形式,可以使用该方法。

下面是一个示例代码,演示了如何使用 Object.entries() 方法将对象转换为数组。

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

运行结果如下:

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

在上面的代码中,我们先定义了一个对象 obj,然后通过调用 Object.entries() 方法,将它转换为了一个含有三个键值对的数组形式。

数组转换为对象

在一些场景下,我们需要将一个由键值对组成的数组转换为对象形式。在 ECMAScript 2019 中,我们可以通过 Object.fromEntries() 方法实现这个功能。

下面是一个示例代码。

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

运行结果如下:

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

在上面的代码中,我们定义了一个由键值对组成的数组 arr,并通过调用 Object.fromEntries() 方法,将其转换为了一个对象 obj。根据数组中的值对应到对象中,我们可以看到 obj 对象中包含三个属性:name、age 和 gender,它们的值分别为 Tom、24 和 male。

对象转换为数组

有时候,我们也需要将一个对象转换为一个由键值对组成的数组。在 ECMAScript 2019 中,我们可以使用 Object.entries() 方法实现这个转换过程。

下面是一个示例代码。

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

运行结果如下:

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

在上面的代码中,我们定义了一个对象 obj,并通过调用 Object.entries() 方法,将其转换为了一个由键值对组成的数组 arr。数组中包含三个元素,每个元素都是一个数组,第一个元素是属性名,第二个元素是属性值。

总结

在 ECMAScript 2019 中,Object.fromEntries() 方法提供了一种更加便捷的方式来实现数组和对象之间的互转。通过 Object.fromEntries() 方法可以将由键值对组成的数组转换为对象。同时,对象也可以通过 Object.entries() 方法转换为数组形式。这个新特性的引入使得 JavaScript 的编程更加灵活和高效。

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


猜你喜欢

  • Angular4 中 RxJS 使用详解

    在现代的前端开发中,异步编程已经成为了不可避免的一个方向。而在 Angular4 中,RxJS 就是个非常好的异步操作库。那么本文就要详细解析 Angular4 中 RxJS 的应用。

    9 个月前
  • Next.js SSR 页面关闭后的状态维护方案

    Next.js SSR 页面关闭后的状态维护方案 在使用 Next.js 进行服务器端渲染(SSR)开发时,会遇到一种问题:当页面关闭或刷新后,原本已经存在的状态数据会被清空,导致用户体验不佳。

    9 个月前
  • ESLint error 'request' is not defined 异常的解决办法

    在前端开发过程中,使用 ESLint 对 JavaScript 代码进行静态代码分析是一个比较好的实践。但是有时候会遇到一些意想不到的异常,比如 "request is not defined",这个...

    9 个月前
  • ES7 异步编程之 Promise 对象详解

    ES7 异步编程之 Promise 对象详解 在前端开发中,异步编程是必不可少的一部分。而其中,Promise 对象是一个非常重要且使用频繁的工具。本文将详细介绍 ES7 中的 Promise 对象,...

    9 个月前
  • Elasticsearch 性能优化指南

    Elasticsearch 是一款开源的搜索引擎,拥有强大的搜索和分析能力,被广泛应用于全文搜索、日志分析、数据挖掘等领域。然而,随着数据量和查询负载的增加,Elasticsearch 的性能问题也逐...

    9 个月前
  • 如何处理 ES11 中的可选链操作符的 TypeError

    如何处理 ES11 中的可选链操作符的 TypeError 在 ES11 中,新添加了可选链操作符(Optional Chaining Operator),可以让我们在访问一个对象时,不必担心对象不存...

    9 个月前
  • Sass 及 PostCSS 的常用插件

    Sass 及 PostCSS 的常用插件 前端开发是一个快速变化的行业,每天都有新的技术和插件涌现,让前端工程师不断更新自己的技能。而 Sass 和 PostCSS 是两款在前端开发中广泛使用的工具。

    9 个月前
  • Serverless 架构中配置不当导致 Lambda 崩溃的解决方法

    什么是 Serverless 架构? Serverless 架构是一种云计算模式,它将应用程序的构建和操作委托给云服务提供商,这样开发者就不需要关注基础设施的细节。

    9 个月前
  • Hapi 和 React 实现服务器渲染 (SSR)

    什么是服务器渲染(SSR) 服务器渲染(SSR)指的是在服务器端直接生成 HTML,并将其发送到客户端的方式,这与单页面应用(SPA)不同,后者是将 JavaScript 发送到客户端后,交由客户端通...

    9 个月前
  • Material Design 中的 Bottom Sheet 使用指南

    Bottom Sheet 是 Google 在 Material Design 中推荐的一种 UI 元素,可以提供更加自然的用户体验,它通常位于 App 的底部,可以滑动打开,展示一些跟当前内容相关的...

    9 个月前
  • 使用 LESS 进行表格样式设计的技巧

    在前端开发中,表格是一个常见的元素,但是表格的样式设计却往往被忽略。使用 LESS 可以帮助我们更方便地管理表格样式,同时也能提高效率。本文将介绍使用 LESS 进行表格样式设计的技巧,并提供示例代码...

    9 个月前
  • ES10 新特性之 Object.fromEntries,将数组转化为对象

    在 ES10 中,引入了一个新的静态方法 Object.fromEntries,该方法可以将数组转化为对象。这个方法的使用在前端开发中非常常见,让我们能够更加轻松地处理数组和对象之间的转化。

    9 个月前
  • Mocha 测试中发现 supertest 无法发送 post 请求的解决方法

    在使用 Mocha 进行前端测试时,我们通常会使用 supertest 库来进行 HTTP 请求的测试,包括 GET、POST 等多种请求。但是,在使用 supertest 发送 POST 请求时,有...

    9 个月前
  • 开发微信小程序,如何使用 Next.js?

    开发微信小程序,如何使用 Next.js? 在微信小程序的开发中,我们经常会遇到多页应用、多端适配、SEO 优化等需求,很多开发者为此而感到困扰。而 Next.js 恰好提供了一种很好的解决方案。

    9 个月前
  • JavaScript 新特性解析:ES7 新增 api

    什么是 ES7? ES7,全称 ECMAScript 7,是 JavaScript 的一项新的标准。它包含了许多新增的 API,提供了更加强大的功能,同时也修复了一些旧版的问题。

    9 个月前
  • 在 Node.js 中实现 OAuth 认证

    OAuth 是一种开放标准,用于用户授权同意第三方应用访问他们的资源,比如通过 Google 或 Facebook 登录第三方网站。本文将介绍在 Node.js 中实现 OAuth 认证的方法。

    9 个月前
  • MongoDB C# 客户端详解及应用实例

    前言 MongoDB 是一种面向文档的 NoSQL 数据库,相比传统的关系型数据库,它更适合应对海量数据的存储和处理。而 C# 是一种广泛应用于 Windows 平台的编程语言,可以使用它来编写 Mo...

    9 个月前
  • 使用 Server-sent Events(SSE) 构建实时性能监控系统

    随着互联网快速发展,性能监控成为了 Web 应用程序开发中不可或缺的一步。在开发过程中,我们需要确保页面能够快速加载、响应迅速,同时还需要保证用户能够愉快地使用应用程序。

    9 个月前
  • Docker 容器 CPU 占用过高的解决方案

    什么是 Docker 容器 CPU 占用过高? 在运行 Docker 容器时,有时候我们会遇到 CPU 占用过高的问题,导致容器运行缓慢,甚至崩溃。这是因为 docker 容器的默认 CPU 配置是限...

    9 个月前
  • webpack 打包后图片路径变成了 [object Module] 的问题?

    在前端开发中,使用 webpack 打包时经常会遇到图片路径变成 [object Module] 的问题,这是因为 webpack 使用相对路径导入图片时,返回的是一个模块对象而非图片路径。

    9 个月前

相关推荐

    暂无文章