ES10 之 Object.fromEntries( ) 详解

在 JavaScript 的语言规范更新中,ES10 (ECMAScript 2019)增加了一些新的实用特性,其中之一就是 Object.fromEntries 方法。这个方法可以将键值对列表转换为对象。本文将深入探讨 Object.fromEntries 的使用,包括其对我们在前端开发中的意义和相关的实例代码。

Object.fromEntries 的作用

Object.fromEntries 方法用于将键值对列表转换为对象。它接受一个数组或者可迭代对象作为参数,并返回一个新的对象。这个方法可以接受一个二维数组,其中每个子数组都由两个元素组成,第一个元素是键,第二个元素是值。这个方法可以帮助我们简化一些任务,比如:

  • 将 Map 转换为对象;
  • 将对象的属性转换为数组并重新组合为对象;
  • 创建一个新的对象,并将其初始化为一个给定的键值映射。

举一个例子,可以通过使用 Object.fromEntries 将一个 Map 对象转换为一个简单对象。它可以将 Map 对象中的所有键值转换为对象的属性和值。

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

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

Object.fromEntries 的实例

下面是一些实例说明,它们说明了在实现不同的任务时,Object.fromEntries 可能会非常有用。

1. 将数组转换为对象

我们可以使用 Object.fromEntries 方法将一个由键值对数组组成的数组转换为一个对象。例如:

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

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

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

2. 删除对象中某些特定属性

我们可以通过将对象的属性之一转换为数组,然后使用 Array.prototype.filter 方法来删除特定属性。最后,我们再将数组转换回对象。例如:

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

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

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

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

在这个实例中,我们将 person 对象的属性转换为数组,并使用 Array.prototype.filter 方法来删除 agecity 属性。最后,我们将数组转换回对象,并将其保存到 obj 中。

3. 从 URL 参数中创建对象

我们可以将 URL 中的查询参数转换为一个包含对象的单一对象(比如解析传递给脚本的 location.search)。

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

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

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

在这个实例中,我们创建了一个新的 URLSearchParams 并传入一个字符串,然后通过 Object.fromEntries 方法创建了一个新的对象(保存到变量 obj 中)。该对象包含了解析自查询字符串的所有参数和值。

总结

Object.fromEntries 方法是一个非常有用的工具,可以帮助我们将一个包含键值对的数组转换为一个对象。这个方法可以使我们的代码更整齐、更可读,并减少代码的长度。我们可以使用它来创建新的对象、过滤掉对象的属性或将 URL 中的参数转换为一个包含对象的对象,等等。在前端开发中,Object.fromEntries 更是有着广泛的使用领域。

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


猜你喜欢

  • ESLint 在 Node.js 项目中的使用及配置

    简介 ESLint 是一款静态代码分析工具,能够帮助开发者在编写代码时发现潜在的问题,从而提高代码质量和开发效率。本文将介绍如何在 Node.js 项目中使用 ESLint,并给出详细的配置说明。

    1 年前
  • Cannot find module 'webpack' 的解决方法

    在使用 webpack 进行前端开发时,你可能会遇到 “Cannot find module 'webpack'” 的错误。这个错误通常在安装 webpack 命令行工具时出现,会导致 webpack...

    1 年前
  • 使用 TypeScript 实现数据分页功能的最佳实践

    在前端开发中,数据分页是一项常见的需求,尤其在处理大量数据时更为常见。常规的实现方法为前端发送请求获取后端的数据、进行数据处理、渲染到页面上,但这种方式存在性能瓶颈,例如:数据多时,渲染很缓慢,可能会...

    1 年前
  • RxJS 中 retry 的使用场景及应用案例分享

    RxJS 中 retry 的使用场景及应用案例分享 RxJS 是一款针对 JavaScript 的响应式编程库,它提供了一系列强大的操作符,用于处理异步数据流。其中,retry 操作符就是一个非常实用...

    1 年前
  • 使用 Custom Elements API 为 Web 开发增加灵活性

    Custom Elements API 是 Web Components 核心规范之一,旨在让开发者可以更方便地创建自定义的 HTML 元素。使用 Custom Elements API 可以将重复的...

    1 年前
  • ES10 中的 BigInt 的运算优先级详解

    在 JavaScript 中,数字有一个最大值,即 Number.MAX_SAFE_INTEGER,约等于 2^53 - 1,当数字超过这个值时,会出现精度丢失的问题。

    1 年前
  • Promise 在 Node.js 中的应用实例讲解

    前言 Promise 是 JavaScript 的内置 API,可以让我们更优雅的处理异步回调,它主要是用于简化 JavaScript 异步编程的一种手段。Node.js 是一个基于 Chrome V...

    1 年前
  • ES12 中的新特性:增加了 DOM addEventListener 的捕获默认模式

    在前端开发中,DOM addEventListener 是一个非常常用的方法,它可以用来监听一个元素上的事件并执行对应的处理函数。在事件流中,事件的传递顺序分为冒泡和捕获两种模式。

    1 年前
  • 使用 Mongoose 优化 Express 应用中的数据库操作

    在开发 Express 应用的过程中,我们通常需要和数据库打交道。而在数据库操作中,使用 Mongoose 可以使得操作更加便捷和高效。 Mongoose 简介 Mongoose 是基于 MongoD...

    1 年前
  • Mysql 容器环境变量设置及 mysql 初始化

    MySQL 是一种关系型数据库,广泛用于 Web 应用程序的数据存储和管理。在开发和部署 Web 应用程序时,经常会使用容器化技术,如 Docker,来创建和管理 MySQL 实例。

    1 年前
  • Kubernetes 存储卷及 volume mode 详解

    前言 Kubernetes 是一个开放源码的容器编排系统,它可以自动管理容器化应用程序的部署、升级、伸缩和故障排查等任务。Kubernetes 提供了强大的存储卷(Volume)概念,使得容器能够更加...

    1 年前
  • Express.js 中的异常处理

    异常处理是 Web 应用开发中非常重要的一环。在 Express.js 中,处理异常可以有效地提升应用的稳定性和可靠性。本文将介绍在 Express.js 中如何使用 Express-async-er...

    1 年前
  • 闪亮的 ECMAScript 2018 (ES9) 新特性

    JavaScript 的标准制定组织 ECMAScript 在 2017 年底发布了 ECMAScript 2018(简称 ES9)的最终版本,在新的版本中引入了一些非常有趣且实用的新特性。

    1 年前
  • 解决 LESS 中背景图片无法显示的问题

    LESS 是一种基于 CSS 的预处理器,它提供了诸如变量、嵌套、Mixin 等功能,让我们能够更方便灵活地编写样式代码。然而,有时候我们使用 LESS 写的样式中,包含的背景图片却无法正确显示,这是...

    1 年前
  • 如何解决 Jest 测试报告中的 “Test exit with non-zero code: 1” 错误?

    Jest 是前端开发中常用的一款测试框架,它可以帮助我们快速写出高效、稳定的测试用例。但是在使用 Jest 进行测试时,有时会出现 “Test exit with non-zero code: 1” ...

    1 年前
  • Deno 中遇到 Module not found 错误该如何解决?

    什么是 Deno? Deno 是一个用于开发 Web 应用、服务端应用、脚本和工具的 JavaScript 和 TypeScript 运行时环境,它由 Node.js 的创建者 Ryan Dahl 开...

    1 年前
  • 怎么解决 Node.js 进程崩溃的问题

    Node.js 是一种非常流行的服务端开发语言,但是在开发中,我们时常会遇到进程意外崩溃的情况。如果不及时处理这些问题,就会导致严重的线上事故。那么,怎么有效的解决 Node.js 进程崩溃问题呢? ...

    1 年前
  • MongoDB 集群部署的优化和管理技巧

    前言 MongoDB 是当前广泛使用的 NoSQL 数据库之一,它具有高性能、高可用、高可扩展性等优点。但是,MongoDB 集群的部署和管理却是一个比较复杂且需要注意的问题。

    1 年前
  • ES7 async/await:解决你的异步编程困局

    随着 JavaScript 的发展,越来越多的应用需要处理异步操作,例如处理网络请求、操作数据库、定时器等,对于传统的同步编程方式,其效率和性能都无法满足现代应用的需求。

    1 年前
  • 外部库从 CDN 获取,减小 Webpack 打包体积

    随着 web 应用的不断发展,前端应用的体积也不断增大,这也对用户的访问速度和用户体验产生了很大的影响。为了解决这个问题,我们可以通过从 CDN 获取外部库的方式,达到减小 webpack 打包体积的...

    1 年前

相关推荐

    暂无文章