如何用 ECMAScript 2019 中的 Object.fromEntries 创建对象

在 ECMAScript 2019 中,新增了一个静态方法 Object.fromEntries,它可以将一个键值对数组转换为一个对象,这个方法对于创建对象的过程有一定的便利性和效率。但是在实际应用中,我们往往对这个方法的使用比较模糊,本文将详细介绍如何合理运用 Object.fromEntries 创建对象。

Object.fromEntries 的用法

Object.fromEntries 方法是一个静态方法,它接受一个数组作为参数。这个数组应该至少包含一组键值对的数组,例如:

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

然后,我们可以使用 Object.fromEntries 方法将这个数组转换为一个对象:

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

基于这种方式,我们可以不必花费太多时间编写代码,轻松创建一个对象。

实际应用

在实际应用中,我们往往遇到一个问题:从一个对象中选择一些特定的属性并组成新的对象。以纯 JavaScript 为例,这个过程可能如下所示:

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

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

这个过程有点费时间和精力,但是使用 Object.fromEntries 就可以很方便的实现:

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

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

我们可以将上面的过程简化为两行代码,这对于代码的复杂性和可读性都有个较大提升。

总结

Object.fromEntries 可以帮助我们快速创建对象,无需编写冗长的代码。通过前文的介绍,我们了解了 Object.fromEntries 包括它的用法和实际应用。在日常工作中,合理运用这个方法将为我们的代码编写带来更高效率和更好的可维护性。

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


猜你喜欢

  • 如何在 TailwindCSS 中使用网格柱?

    TailwindCSS 是一个非常流行的 CSS 框架,它被广泛应用于现代 Web 应用程序中。其中一个最强大的功能是其网格系统。在本文中,我们将讨论如何在 Tailwind 中使用网格柱,一种常用于...

    1 年前
  • ES7 新特性之 Object.values() 和 Object.entries() 方法

    ES7 (也被称为 ECMAScript 2016)是 ECMAScript 标准的最新版本之一,提供了一些新的语言特性和增强功能。其中 Object.values() 和 Object.entrie...

    1 年前
  • 使用 Webpack 打包任务提升工程效率

    在前端开发中,我们常常需要使用一些前端工具来提升我们的工作效率。其中,Webpack 是一款常用的前端打包工具,可以将多个 JavaScript 文件以及 CSS、图像等静态资源合并打包成一个或多个文...

    1 年前
  • Material Design 风格应用中实现 Fab 和 Snackbar 结合的方法

    前言 Material Design 是 Google 推出的一种全新的设计语言,该设计语言利用现代化的设计技巧和技术,为我们提供了一种使应用程序看起来美观的方式。

    1 年前
  • 统一团队的代码风格:ESLint 与 CI 工具的完美结合

    在前端开发中,一个团队内不同成员的代码风格可能会存在较大差异,这不仅会导致代码难以维护,还可能会带来潜在的 bug。为了解决这个问题,我们可以使用 ESlint 和持续集成(CI)工具的结合来实现团队...

    1 年前
  • Express.js web 应用开发实例

    前言 Express.js 是一个基于 Node.js 平台的 web 框架,它可以快速构建高度可扩展的 web 应用程序。Express.js 通过简直的 API 设计,强大的中间件架构和灵活的路由...

    1 年前
  • 如何使用 ES10 中引入的 bigint 类型

    ES10 中引入了 bigint 类型,这个新型的数据类型可以存储大整数(多于 JavaScript 中 Number 类型所能表达的范围)。 在前端开发中,在处理大型数字方面,bigint 类型是一...

    1 年前
  • 使用 Docker Compose 管理开发环境并解决端口冲突问题

    在进行前端开发时,我们通常需要安装多个工具、框架和库,并且需要配置不同的环境变量。这些都会增加我们在开发过程中的时间和难度。此外,开发过程中的端口冲突问题也是一个非常常见的问题。

    1 年前
  • SASS 开发中的避免冲突思想

    在前端开发中,SASS 是一个常用的 CSS 预处理器,它可以让我们更加高效地编写样式,但也容易引起变量、函数、混合等之间的冲突问题。本文将通过一些示例来介绍 SASS 开发中如何避免这些冲突。

    1 年前
  • Hapi.js 插件之好用的 vision 插件详解

    Hapi.js 是一款优秀的 Node.js Web 开发框架,它的高度可扩展性和灵活性深受前端开发者的欢迎。其中,Vision 插件是 Hapi.js 框架中的一个核心插件,它能够帮助我们更好地管理...

    1 年前
  • Promise 如何处理异步操作中的状态管理?

    在前端开发中,异步操作是一种很常见的技术,比如通过 Ajax 异步请求后台数据或者使用 Promise 处理异步操作。而 Promise 是一种管理异步操作状态的技术,本文将会详细介绍 Promise...

    1 年前
  • 理解 Mongoose 中的虚拟属性

    在使用 Mongoose 进行 MongoDB 操作时,有时需要在文档数据中加入一些计算得出的属性,这些属性不需要实体化保存在 MongoDB 中,但是需要在前端使用时加以计算。

    1 年前
  • RESTful API 遇到跨站脚本攻击问题的解决方案

    背景 随着互联网的发展,前后端分离的模式越来越流行,RESTful API 作为前后端分离的重要手段,也被越来越广泛地使用。但是,RESTful API 也面临着安全性问题,其中跨站脚本攻击是最常见的...

    1 年前
  • Angular 6 中的 @HostBinding 和 @HostListener

    Angular 6 中的 @HostBinding 和 @HostListener 在 Angular 6 中,@HostBinding 和 @HostListener 是两个非常有用的指令。

    1 年前
  • 在 GraphQL 中如何处理循环引用的问题?

    GraphQL 是一种用于API的查询语言,它允许客户端精确指定他们需要的数据,以减少不必要的网络请求并提高效率。然而,当在GraphQL中处理循环引用时,它可能会导致无限循环的查询,从而使服务器崩溃...

    1 年前
  • ES9的新特性- Rest/Spread 属性

    在ES9中,引入了Rest/Spread属性的新特性,这是一个十分重要的更新,它可以帮助我们更好地编写JavaScript应用程序。 Rest/Spread属性提供了一种简单直接的方式来处理数组和对象...

    1 年前
  • Redis 服务器重启后无法连接怎么办?

    概述 Redis 是一款高性能的 key-value 数据库,广泛应用于数据缓存、分布式锁、消息队列等场景。在使用 Redis 过程中,有时候可能遇到 Redis 服务器重启后无法连接的问题,本文将对...

    1 年前
  • Deno 中跨域请求的处理

    跨域请求是指在不同源的情况下进行的 HTTP 请求,跨域请求是一种常见的 Web 开发场景,有多种解决方式,本文介绍将如何在 Deno 中实现跨域请求的处理。 了解跨域请求 同源策略是浏览器中的一项安...

    1 年前
  • 对 ECMAScript 2021(ES12)开发者的提示

    ECMAScript 2021(ES12)是 JavaScript 编程语言的最新标准,它为我们带来了许多有用的新特性和语言功能,让前端开发变得更加容易和有趣。在本文中,我们将对 ES12 中的一些重...

    1 年前
  • 如何在 Django 中使用 Server-sent Events

    Server-sent Events 是一种基于HTTP的推送技术,用来向客户端发送实时更新信息。在前端开发中,使用 Server-sent Events 可以实现实时通信和数据可视化。

    1 年前

相关推荐

    暂无文章