ES10 中的 Object.fromEntries() 函数

在 ES10 中,新增了一个非常实用的函数 Object.fromEntries(),它可以将一个由键值对组成的数组转换成一个对象。这个函数可以方便地将一些数据结构转换成对象,例如将 Map 转换成对象或将 URLSearchParams 转换成对象等等。

使用方法

Object.fromEntries() 函数接受一个由键值对组成的数组作为参数。数组中每个元素都是一个长度为 2 的数组,第一个元素是键,第二个元素是值。函数返回一个由这些键值对组成的对象。

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

实用示例

Map 转换成对象

Object.fromEntries() 函数可以将 Map 转换成对象。Map 是一种键值对的集合,它的键可以是任意类型的值,而对象的键只能是字符串或 Symbol 类型的值。

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

URLSearchParams 转换成对象

URLSearchParams 是一个 URL 查询参数的集合,它可以方便地解析和构建 URL 查询参数。Object.fromEntries() 函数可以将 URLSearchParams 转换成对象。

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

对象转换成 Map

Object.entries() 函数可以将一个对象转换成一个由键值对组成的数组。结合 Object.fromEntries() 函数,可以将对象转换成 Map。

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

注意事项

Object.fromEntries() 函数是 ES10 新增的函数,如果需要在旧版本的 JavaScript 中使用,可以使用 polyfill 或者手动实现这个函数。同时,由于这个函数的参数是一个由键值对组成的数组,如果数组中有重复的键名,后面的键值会覆盖前面的键值,因此需要注意数组中每个元素的键名是否唯一。

总结

Object.fromEntries() 函数是一个非常实用的函数,可以方便地将由键值对组成的数组转换成对象。它可以用于将 Map 转换成对象、将 URLSearchParams 转换成对象,以及将对象转换成 Map 等等。在实际开发中,可以根据具体的需求灵活使用这个函数,提高开发效率。

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


猜你喜欢

  • angular 4.x ng-content 指令用法详解

    引言 Angular 4.x 是目前前端开发中最流行的框架之一。其中,ng-content 指令是 Angular 中一个非常有用的指令,它可以用于在父组件模板中插入子组件模板。

    9 个月前
  • ES10 中如何实现对象的扁平化

    ES10 中如何实现对象的扁平化 随着现代Web应用程序越来越复杂,JavaScript也变得越来越强大。在JavaScript中,对象是一种复杂的数据类型,可以包含多个属性,每个属性可能还是一个对象...

    9 个月前
  • JS 中的装饰器 Decorator

    装饰器是一种很有用的编程模式,它可以在不修改原代码的前提下,为其添加新功能或修改其行为。装饰器在 Java 语言中已经被广泛使用,而在最近的几个 ECMAScript 标准中,也引入了装饰器这个概念。

    9 个月前
  • 利用 Babel 转译 ES6 语法中的 Set 对象

    前言 随着 JavaScript 语言的不断发展,ES6(ECMAScript 6)已成为了当前前端开发的主要趋势,其中引入了 Set 对象。Set 对象可以让程序员更加高效地处理数据集合,但该对象并...

    9 个月前
  • Kubernetes 中容器无法调度的问题解决方案

    在 Kubernetes 中,容器无法调度的问题经常会出现。这种情况会导致应用程序在 Kubernetes 集群中无法运行。通常来说,这是因为 Kubernetes 控制器无法将容器调度到符合要求的节...

    9 个月前
  • 从 Flux 到 Redux:一个严谨的状态管理方案演进之路

    从 Flux 到 Redux:一个严谨的状态管理方案演进之路 在前端开发中,状态管理是一个至关重要的概念。状态管理可以让前端应用更容易维护和扩展。在过去的几年间,Flux 和 Redux 凭借着其强大...

    9 个月前
  • vscode 报错:Error: parsing error: Unexpected token newPost 用 ESlint 修正

    VSCode 是我们前端开发必不可少的一款工具。然而在 VSCode 中,有时我们会遇到类似上述的报错信息,这是由于代码中存在错误,导致解析出现了问题。如果不进行修正,这将会影响我们的工作效率和代码质...

    9 个月前
  • RESTful API 如何实现 URL 重写?

    什么是RESTful API? RESTful API是一种基于REST(Representational State Transfer)架构风格的API设计规范,常常用于Web应用程序中。

    9 个月前
  • Fastify 如何使用 Fastify-cors 插件管理跨域策略

    在 Web 开发中,跨域请求是一种常见的需求。但是由于浏览器的同源策略,跨域请求往往会受到限制。为了解决这个问题,我们可以使用 Fastify-Cors 插件来管理跨域策略。

    9 个月前
  • GraphQL VS gRPC:你应该选择哪一个

    在现代应用程序的开发中,API 是一个不可或缺的部分。 为了提供更好的可扩展性和可用性,出现了许多新的 API 技术。 GraphQL 和 gRPC 就是其中两个非常流行的选择。

    9 个月前
  • 如何使用 Chai 测试 Express 中间件

    在前端开发中,一些常见的框架和工具可以帮助我们快速构建和测试应用程序。其中,Chai 是一个非常有用的测试框架,它提供了多种测试样式和断言库,可帮助我们编写更好的测试用例。

    9 个月前
  • ES8 最有用的新特性:async 函数深度剖析

    ES8 最有用的新特性:async 函数深度剖析 随着 JavaScript 代码的不断发展,Web 应用程序也变得越来越复杂,JavaScript 代码也变得越来越难以维护。

    9 个月前
  • JavaScript 中如何同时使用 Optional Chaining 和 nullish coalescing

    JavaScript 中有时我们需要在处理数据时使用 Optional Chaining 或 nullish coalescing,而通过同时使用这两种语法可以更好地处理一些复杂的数据场景。

    9 个月前
  • CSS Grid:如何处理 Grid 中的子元素溢出问题

    #CSS Grid:如何处理 Grid 中的子元素溢出问题 CSS Grid 是一种灵活且强大的布局方式,可用于创建各种复杂的网格布局。但是,当在 Grid 中使用子元素时,可能会遇到子元素溢出问题。

    9 个月前
  • ES9 中的异步遍历器和生成器

    在 ES9 中,异步遍历器 (Async Iterator) 和生成器 (Generator) 被引入。这两个新特性提供了更为灵活和方便的异步编程方式,可以帮助我们更好地管理和控制异步操作,提高代码可...

    9 个月前
  • Sequelize 查询结果为 undefined 的解决方法

    在使用 Sequelize 进行数据库操作时,存在一个常见的问题:查询结果返回为 undefined。这个问题可能由各种原因导致,本文主要探讨其中的一些常见原因和解决方法。

    9 个月前
  • JavaScript 中如何使用 ES10 的 Promise.allSettled() 方法

    JavaScript 中如何使用 ES10 的 Promise.allSettled() 方法 ES10(也称作 ECMAScript 2019)是 JavaScript 的最新标准,在其中新引入了一...

    9 个月前
  • 如何使用 ES6 的 Array.reduce 方法进行数组数据处理

    在前端开发中,数组数据处理是非常常见的任务之一。ES6 中提供了一种高效的方法来处理数组数据:Array.reduce 方法。本文将介绍如何使用这个方法,并提供一些常见的使用场景和示例代码。

    9 个月前
  • Babel 编写可维护性高的 React 应用

    概述 React 是一种流行的 JavaScript 库,已成为现代 Web 开发的首选框架之一。但是,React 应用程序的复杂度往往会随着时间的推移而增加,这会使得代码难以维护和理解。

    9 个月前
  • PM2+MongoDB 实现数据持久化

    概述 在开发 web 应用时,我们往往需要将一些数据存储到数据库中,以便后续的访问和查询。MongoDB 是当今最流行的数据库之一,它的特点是能够存储海量的非结构化数据,并且支持分布式的扩展。

    9 个月前

相关推荐

    暂无文章