ES10 中 Object.fromEntries 方法的应用场景

在 JavaScript 中,我们操作对象时常常需要将键值对转化为数组或者将数组转化为键值对。ES10 中新增了 Object.fromEntries() 方法,可以很方便地将具有键值对的可迭代对象转化为对象。

用法

Object.fromEntries() 方法接收一个可迭代对象,该对象的每个元素都应该是一个形如 [key, value] 的元素。Object.fromEntries() 方法会返回一个由这些键值对组成的新对象。

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

应用场景

1. 对象和 Map 之间的转换

由于 Object.fromEntries() 可以接收任何可迭代对象,所以我们可以使用它来将 Map 转换为对象。

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

反之,如果我们需要将对象转化为 Map,也可以利用 Object.entries() 方法将对象转化为键值对数组,再利用 Map() 方法转换为 Map。

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

2. 对象属性拷贝

当我们需要把一个对象的属性复制到另一个对象上时,可以先通过 Object.entries() 将原对象转化为键值对数组,再利用 Object.fromEntries() 将其转化为对象。

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

3. 计算 Map 中的数据

Object.fromEntries() 可以用来从 Map 中计算出一些值,比如计算出 Map 中某些键值对的总和。

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

总结

Object.fromEntries() 方法可以方便地将具有键值对的可迭代对象转换为对象,同时也可以用来进行对象和 Map 之间的转换、对象属性拷贝和计算 Map 中的数据等操作。掌握了 Object.fromEntries() 的应用场景,我们可以在编写代码时更加灵活地处理对象和键值对相关的操作。

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


猜你喜欢

  • 如何在 Flask 中使用 Server-Sent Events 实现实时数据推送

    Server-Sent Events(SSE)是一种基于 HTTP 的服务器推送技术,与 WebSocket 相似,但具有更简单的 API 和 WebSockets 不需要的一些功能,例如心跳和重新连...

    1 年前
  • Promise.all 的实现细节详解

    前言 在现代 Web 应用程序中,异步编程变得越来越重要。Promise.all 是解决异步编程问题经常使用的一个工具。它可以接受一个 Promise 对象数组,并返回一个新的 Promise,该 P...

    1 年前
  • PWA 初体验

    什么是 PWA? PWA 全称为 Progreesive Web App,翻译过来就是渐进式 Web 应用。PWA 可以被看做是将 Web 应用打造为体验与 Native 应用相当的 Web 应用。

    1 年前
  • Vue.js 中的 computed 和 watch 区别详解

    Vue.js 是一款流行的 JavaScript 框架,它使用声明式的模板语法来构建用户界面。在 Vue.js 中,我们可以使用 computed 和 watch 来侦听数据的变化,并根据变化来更新视...

    1 年前
  • 在 Angular 中使用 RxJS 进行网络请求的封装

    RxJS 是 JavaScript 中的一个用于 reactive programming 的库,它提供了一些高级的工具和接口,帮助开发者更好地处理异步操作。在 Angular 应用中,我们可以使用 ...

    1 年前
  • Webpack 和 LESS 集成,提高打包效率

    前言 在前端开发中,Webpack 和 LESS 都是非常常用的工具。Webpack 是一个模块打包工具,可以将代码和资源打包成静态资源,而 LESS 则是 CSS 预处理器,可以让我们以更便捷的方式...

    1 年前
  • GraphQL 架构风格:Schema First 还是 Resolvers First

    GraphQL 是一种新兴的 API 架构风格,它提供了一种更加灵活和高效的方法来构建和查询 API。在 GraphQL 中,客户端可以精确地指定它需要的数据,而不是像传统的 RESTful API ...

    1 年前
  • 利用 CSS Grid 实现盒子布局的快速指南

    在前端开发中,盒子布局是最基本的布局方式之一。通过 CSS Grid 技术,我们可以更加简单、灵活、高效地实现盒子布局。本文将介绍如何使用 CSS Grid 技术来实现盒子布局,并提供一些示例代码,以...

    1 年前
  • 如何正确的使用 RxJS

    RxJS 是一个非常流行且强大的 JavaScript 函数式编程库,它允许在应用程序中使用响应式编程风格。 在 RxJS 中,你可以使用 Observable 对象来描述一个异步事件序列,并对它进行...

    1 年前
  • 如何解决 Lambda 内存过低导致的错误

    最近在使用 AWS Lambda 进行函数计算时,发现有时候会出现内存过低导致函数执行失败的问题。这种问题对于需要高可用性的应用来说,是非常严重的。那么该怎么解决这个问题呢?接下来我们将详细探讨如何解...

    1 年前
  • 使用 Express.js 实现同时支持 HTTP 和 HTTPS

    在 Web 开发中,为了保证网站传输的安全性,经常会使用 HTTPS 协议来传输数据。但是,在实际开发过程中,我们通常也需要同时支持 HTTP 和 HTTPS 这两种协议,以满足不同用户的需求。

    1 年前
  • WAI-ARIA | 如何使用 WAI-ARIA 实现无障碍访问

    在现代化的 Web 应用程序中,为了满足人类的多样化需求,Web 功能必须适应各种不同的使用情形,包括支持视力、听力和身体上的各种障碍。随着互联网技术的不断发展,这些需求已经变得越来越普遍,并且越来越...

    1 年前
  • CSS Reset 调试技巧分享:快速解决页面样式问题

    当我们在编写前端页面时,经常会遇到一些奇怪的页面样式问题,比如元素的 margin 和 padding 显示不正确、字体大小不一致,这些问题往往是由于浏览器自带的样式设置、不同浏览器的样式兼容性以及 ...

    1 年前
  • SQL Server 性能优化(二)-- 索引优化

    在 SQL Server 中,索引是提高查询性能的重要手段之一。经过适当的索引优化,可以在大数据量的情况下提高数据库的查询效率,从而提升系统性能。 索引优化原理 索引就是在表中按照某些关键字建立的一种...

    1 年前
  • 如何在 Fastify 框架下实现基于 SASS 的 CSS 编译

    在 Web 开发中,CSS 是必不可少的一部分,而 SASS 则是一种基于 CSS 的、功能更强大的样式表语言。使用 SASS 可以大大减少样式表的代码量,增加代码的可重用性和可维护性。

    1 年前
  • Flexbox 入门之布局

    什么是 Flexbox? Flexbox 是 CSS3 新增的一种布局方式,它使得我们可以更加有效地排列和布局元素。Flexbox 可以让我们快速地实现和调整布局,而不需要使用传统的布局方式,例如浮动...

    1 年前
  • 在 Deno 中使用 Sequelize 进行 ORM 开发

    简介 Sequelize 是一个 Node.js 中十分流行的 ORM(Object-Relational Mapping)框架,可以方便地操作数据库。而 Deno 是一种全新的 JavaScript...

    1 年前
  • 用 Koa2 搭建一个完整的 RESTful API

    RESTful API 是目前非常流行的一种后端 API 架构风格,它具有简洁、高效、灵活等优点。在前端开发中,前端也需要调用后端提供的 RESTful API 接口来实现各种业务功能。

    1 年前
  • ES10 中 Promise.all 和 Promise.race 方法的详解和使用

    在前端开发中,异步编程是一个不可避免的话题。Promise 是一种异步编程的解决方案,它是 ES6 中引入的新特性,可以有效的解决一些异步编程问题。在 ES10 中,Promise 类的两个静态方法 ...

    1 年前
  • React Native 应用中 Redux 的最佳实践

    前言 在现代的前端开发中,Redux 已经成为了不可或缺的一部分。在 React Native 应用中,Redux 的应用越来越广泛,它为应用提供了强大的状态管理功能。

    1 年前

相关推荐

    暂无文章