ES12 的 Object.fromEntries 方法大大简化对象的创建!

ES12 中新增的 Object.fromEntries 方法,它是一个非常有用的对象创建工具。相比于传统的对象初始化方法,这个方法可以更加简洁、易于理解。本文将详细介绍使用 Object.fromEntries 方法创建对象的方法与意义,并通过示例代码加深理解。

Object.fromEntries 方法的概述

Object.fromEntries 方法是在 ES2019 中新增的一个静态方法,用于从一个由键值对数组构成的一个可迭代对象中创建一个新的对象。该方法有以下语法:

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

其中,iterable 是一个可迭代对象,它的每个元素都是一个键值对的数组。

Object.fromEntries 方法的使用

我们来看看如何使用 Object.fromEntries 方法。比如我们有一个包含键值对的数组:

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

我们可以使用 Object.fromEntries 将其转化为一个对象:

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

输出结果为:

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

这样就可以在使用数据时,以对象的形式更加直观和方便。

Object.fromEntries 方法的实现过程

了解了使用方法后,我们来看看它的实现过程。在语法方面,它比较简单,主要还是考虑针对每一个键值对元素,将其“解构”为一个 key-value 的关系。

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

如上代码所示,我们首先定义了一个空对象 obj,然后遍历 iterable,将每个元素都解构成键值对 key-value,最终以对象形式返回。值得注意的是,在每次循环中,我们都会对数组的长度做一个校验,如果不符合相应的格式,就会向外抛出一个错误,意指迭代器中的数组元素必须包含且仅包含两个元素。

Object.fromEntries 方法的优势与局限

相比于传统创建对象的方法,Object.fromEntries 方法是更加简练、易于理解的。而且, _fromEntries 方法也可结合很多迭代器进行使用,比如 Map 中的 entries() 方法,FormData 中的 entries() 方法,这也是该方法得以推广的重要原因。但是,需要注意的是,fromEntries 方法不能用于迭代器元素的键值校验。当使用不合法的 Key,它不会抛出错误,而是忽略整个元素。这点需要特别关注。

Object.fromEntries 方法的应用

本文中的案例虽然只是新手们熟悉使用 Object.fromEntries 方法从数组转化为对象的方式,实际上该方法还有很多应用场景。例如,使用 Object.entries 方法和 Object.fromEntries 方法可以简化数组操作(注意,下面代码适用于支持 Array.prototype.flatMap 方法的浏览器环境):

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

以上代码将遍历 arr 数组中的所有元素,利用 Object.entries 将每个元素的 key 和 value 直接拆分成一个键值对的数组,之后 flatMap 方法会将多个数组合并为单个一维数组,最终使用 Object.fromEntries 方法将它们合并为一个对象。使用这种方式,你可以直接将数据源是数组的对象快速转换为一个快速的访问方式。这种方法非常简单、易懂,同时还具有很好的代码风格。

结论

在本文中,我们学习了关于 ES12 Object.fromEntries 方法的使用和实现,并学以致用,通过示例代码和案例帮助新手们掌握如何使用这个方法从数组转为对象的方式。同时,我们也讲述了它的优势和局限,最后以一个更通用的例子,阐述了其繁且易于掌握框架等技术的优雅运用。总之,ES12 Object.fromEntries 是一种非常好的创建对象方法,为前端开发提供了非常可靠的解决方案。希望通过本文的学习,大家也能更好地使用这个方法,以提高开发效率和代码风格。

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


猜你喜欢

  • Cypress 自动化测试提高篇 - 单元测试

    自动化测试是现代软件开发过程中必不可少的一环,通过构建不同类型的测试来保证产品的质量和稳定性。其中,单元测试作为自动化测试中的一个重要部分,常常被用于测试前端代码中的独立单元,如组件或函数。

    9 天前
  • CSS Grid 布局:使用 grid-template-areas 属性

    CSS Grid 布局是一种非常强大的前端布局方式,在实现复杂的网页布局时非常实用。在这篇文章中,我们将介绍 CSS Grid 布局的一项特殊属性:grid-template-areas。

    9 天前
  • 深入理解 SSE 的工作原理和实现方式

    介绍 SSE(Server-Sent Events)是 HTML5 提供的一种用于在浏览器和服务器之间传递实时数据的机制。相比于 WebSocket,SSE 更加简单,易于实现,并且可以充分利用现有的...

    9 天前
  • SPA 应用加载速度优化技巧

    随着互联网的飞速发展,前端技术也变得愈加重要。现在,越来越多的网站和应用采用单页应用程序(SPA)的形式。SPA应用的优点在于其快速响应、无需页面重新加载以及更好的用户体验。

    9 天前
  • Jest 测试 React 组件时遇到的常见问题及解决方法

    在前端开发中,测试是非常重要的一环。而对于 React 组件的测试,Jest 是一个非常好的选择。但是在使用 Jest 测试 React 组件的过程中,我们可能会遇到一些常见的问题,在本文中,我们将会...

    9 天前
  • Node.js 实现自定义 SSL 证书的完整指南

    在现代 web 应用中, SSL 证书是至关重要的,它可以确保用户数据在传输中的安全性。一般来说,我们使用 CA(证书机构)颁发的数字证书,但是有时候我们需要自己生成 SSL 证书,例如本地开发环境或...

    9 天前
  • 无障碍应用程序开发中常见的颜色对比度问题及解决方法

    无障碍应用程序开发中常见的颜色对比度问题及解决方法 随着多样化、无障碍性和可访问性在应用程序开发中的不断提升,对于颜色对比度的要求也越来越严格。不合适的颜色对比度会使得有色觉缺陷的用户无法正确辨认信息...

    9 天前
  • ECMAScript 2016:如何使用新的指数运算符?

    ECMAScript 2016是JavaScript语言的一个标准版本,它带来了很多新的功能,其中一个重要的功能是指数运算符(**)。在这篇文章中,我们将探讨这个新的运算符,并且介绍如何在你的前端开发...

    9 天前
  • 如何解决 Material Design 中的 RecyclerView 选中项不高亮问题

    在开发 Android 应用的过程中,使用 Google 推出的 Material Design 指南可以使得应用更加美观,同时提升用户的交互体验。而其中的 RecyclerView 是一个非常强大的...

    9 天前
  • webpack 打包出现 module parse failed 错误,如何解决?

    引言 前端开发中,Webpack 是一款重要的打包工具,它的出现提高了项目的可维护性和代码的复用性。不过,在使用 Webpack 进行打包的过程中,可能会遇到一些错误,其中比较常见的是 module ...

    9 天前
  • 使用 Express.js 和 Handlebars.js 进行模板引擎开发

    在现代的 Web 开发中,前端工程师需要学习很多的开发技术和工具。其中一个很重要的组成部分就是模板引擎。模板引擎是一种将数据和 HTML 相结合的工具,用于在前端将后端数据可视化的过程中起到重要的作用...

    9 天前
  • 如何使用 Web Components 中的 Shadow DOM

    随着 Web 技术的发展和普及,Web 组件成为了大家越来越重要的一部分。而 Web Components 作为一种标准化的组件开发方式,其得到了广泛的认可和使用。

    9 天前
  • 使用 Hapi 实现 CORS:跨域资源共享

    跨域资源共享(CORS)是一种允许网页客户端从跨域服务器获取或发送任何资源的机制。由于浏览器的同源策略,对于从一个域名访问服务器上的资源时,只有与源页面具有相同协议、端口和 host 的结果才会被正确...

    9 天前
  • 响应式设计中如何解决大量内容的现实问题

    在现代化的响应式设计中,处理大量内容是一个非常重要的问题。这样的问题往往最容易出现在移动设备上,因为屏幕空间比较小,而内容又必须充分呈现给用户。在本文中,我们将从多个角度探讨如何解决这个实际问题,并提...

    9 天前
  • Mocha 测试过程中遇到“TypeError: Cannot read property 'length' of undefined”错误?怎么解决?

    在开发前端应用过程中,Mocha 是一个常用的测试框架。但是,有时在使用 Mocha 进行单元测试时,会遇到“TypeError: Cannot read property 'length' of u...

    9 天前
  • 在 Deno 中如何使用 logger 进行日志记录

    简介 Deno 是一种新兴的 JavaScript 和 TypeScript 运行时环境,目前越来越受到前端界和后端界的青睐。而在应用开发过程中,日志记录是不可或缺的一环。

    9 天前
  • 将 Node.js 集成到你的任何项目中:完整的指南

    将 Node.js 集成到你的任何项目中:完整的指南 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它可以让你用 JavaScript 编写后端代码,更好地处...

    9 天前
  • Headless CMS 的架构原理及其应用场景分析

    前言 Headless CMS成为近年来前端发展中的一个重要资源,特别是在Web应用开发中不断盛行。本文将详细介绍 Headless CMS 的原理、特点和应用场景,以及如何在项目中使用 Headle...

    9 天前
  • 如何使用 Node.js 和 SSE 实现实时消息推送?

    在现代 Web 应用程序中,实时消息推送变得越来越常见。 SSE 技术(Server-Sent Events)是一种强大的工具,可以帮助您实现这种功能。本文将向您介绍如何使用 Node.js 和 SS...

    9 天前
  • AngularJS 在 SPA 应用中的应用最佳实践

    简介 AngularJS 是一个流行的开源 JavaScript 框架,专门为创建单页面应用程序(SPA)而设计。它是构建前端应用程序的最佳框架之一,提供了许多工具和功能来增强开发人员的体验。

    9 天前

相关推荐

    暂无文章