ES10 中的 Object.fromEntries 语法详解

在 ES10 中，新增了一个 Object.fromEntries 方法，它可以将一个二维数组转换成一个对象。这个方法的出现可以帮助我们更加方便地操作对象。本文将详细介绍 Object.fromEntries 的语法和用法，并提供实际示例代码。

语法

Object.fromEntries 方法的语法如下：

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

其中，iterable 参数可以是一个二维数组，也可以是一个实现了 Symbol.iterator 接口的对象。

用法

我们可以通过 Object.fromEntries 方法将一个二维数组转换成一个对象：

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

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

我们也可以将一个 Map 对象转换成一个对象：

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

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

实际上，Object.fromEntries 方法是 Object.entries 方法的反向操作。我们可以通过 Object.entries 方法将一个对象转换成一个二维数组，再通过 Object.fromEntries 方法将这个二维数组转换成一个对象：

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

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

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

示例代码

我们可以通过 Object.fromEntries 方法实现一些实际的功能，下面是一些示例代码：

1. 将 URL 参数转换成一个对象

我们可以通过 Object.fromEntries 方法将 URL 参数转换成一个对象：

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

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

2. 将一个对象的属性名和属性值互换

我们可以通过 Object.fromEntries 方法将一个对象的属性名和属性值互换：

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

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

3. 将一个对象的属性名转换成小驼峰命名

我们可以通过 Object.fromEntries 方法将一个对象的属性名转换成小驼峰命名：

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

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

总结

Object.fromEntries 是 ES10 中的一个新方法，它可以将一个二维数组转换成一个对象。我们可以通过 Object.fromEntries 方法实现一些实际的功能，如将 URL 参数转换成一个对象、将一个对象的属性名和属性值互换、将一个对象的属性名转换成小驼峰命名等。Object.fromEntries 方法的出现可以帮助我们更加方便地操作对象。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6567e0eed2f5e1655d0b179b

阅读全文

猜你喜欢

  • Material Design 实现日历控件的设计与实现

    日历控件是前端开发中常见的组件之一，它可以方便用户选择日期，是许多网站和应用中必不可少的一部分。本文将介绍如何使用 Material Design 的设计思想和技术实现一个简单的日历控件。

    1 年前
  • LESS Mixins 路径问题，一招解决

    LESS 是一种 CSS 预处理器，它可以简化 CSS 的编写，提高代码的复用性和可维护性。其中 LESS Mixins 是一种非常常用的功能，它可以将一组 CSS 样式封装成一个函数，方便在多个地方...

    1 年前
  • 如何使用 Mocha 测试 Axios 库提供的 HTTP 请求

    Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。它可以在浏览器和 Node.js 环境下使用，并提供了许多强大的功能，例如请求和响应拦截器、自动转换 JSON 数据、取消...

    1 年前
  • ES10 中的 Dynamic Import 及其应用

    在 ES10 中，Dynamic Import 是一个非常强大的新特性，它能够让我们在运行时动态地导入模块。这个特性的优势在于，它可以减少应用的初始加载时间，提升应用的性能。

    1 年前
  • 在 Angular 中使用 PWA 提升应用性能

    随着移动互联网的普及，越来越多的用户使用移动设备来访问网站。而在移动设备上，网页的加载速度和体验往往受到限制。为了提升用户体验，我们可以使用 PWA 技术来优化网页性能。

    1 年前
  • Chai 对 Boolean 类型的支持

    在前端开发中，测试是非常重要的一环。测试不仅可以保证代码的质量和稳定性，还可以提高开发效率和协同开发的能力。而 Chai 是一个非常流行的 JavaScript 测试库，它提供了丰富的断言库和链式调用...

    1 年前
  • Deno 中的 CORS 解决方案

    CORS（跨域资源共享）是 Web 开发中常见的一个问题，它限制了浏览器从一个源加载资源时的跨域访问。Deno 是一个新兴的 JavaScript 运行时环境，它提供了一种简单的方式来解决 CORS ...

    1 年前
  • Server-Sent Events 基础教程

    Server-Sent Events（SSE）是一种基于 HTTP 的服务器向客户端推送事件的技术。它允许服务器实时地向客户端发送数据，而无需客户端定期轮询服务器。

    1 年前
  • Redis 中哈希表数据结构详解

    Redis 是一款高性能的键值对数据库，其内部实现了多种数据结构，其中哈希表是其中之一。本文将对 Redis 中的哈希表进行详细的介绍，包括哈希表的基本概念、用法、特性以及如何在前端应用中使用哈希表。

    1 年前
  • 如何在 Next.js 中处理图片上传？

    在现代 Web 应用程序中，图片上传是一个常见的需求。在 Next.js 中，我们可以使用一些库来实现图片上传功能。本文将介绍如何在 Next.js 中使用 multer 和 cloudinary 库...

    1 年前
  • 使用 enzyme 测试 react 组件时，prop 改变不触发相应的事件问题解决方法

    在前端开发中，我们经常会使用 React 框架来构建应用程序。而为了保证程序的质量和稳定性，我们需要使用测试工具对代码进行测试。其中，Enzyme 是 React 组件测试的常用工具之一。

    1 年前
  • PM2 进程崩溃时如何自动发送邮件预警

    在前端开发中，我们通常使用 PM2 来管理 Node.js 进程。但是，当进程崩溃时，我们需要及时地发现并解决问题，以免影响用户体验。这时候，自动发送邮件预警就是一个非常好的解决方案。

    1 年前
  • 在 Hapi 上使用 Dojo Toolkit 的正确配置方式

    近年来，前端技术的发展非常迅速，各种框架和库层出不穷，其中 Dojo Toolkit 是一款非常优秀的 JavaScript 库。在 Hapi 上使用 Dojo Toolkit，可以帮助我们更加高效地...

    1 年前
  • ES6 的 Set 和 Map 数据结构了解一下

    在 ES6 中，新增了两种数据结构 Set 和 Map，这两种数据结构分别可以用来存储唯一值和键值对，相比于传统的数组和对象，它们拥有更加高效的查找和操作方式，同时也提供了更加优雅的语法和 API。

    1 年前
  • Serverless 框架中如何进行自动化部署？

    什么是 Serverless？ Serverless 是一种架构风格，它可以让你构建和运行应用程序和服务，而无需管理基础设施。这意味着你可以专注于编写代码而不必担心服务器的配置和维护。

    1 年前
  • 使用 Redux 中间件实现 debounce 和 throttle

    在前端开发中，我们经常需要处理用户的输入事件，例如输入框的输入事件、鼠标滚动事件等。然而，由于用户的操作速度很快，这些事件可能会被频繁触发，导致性能问题和用户体验问题。

    1 年前
  • 如何在 CI / CD 流水线中使用 ESLint 进行静态代码分析？

    在前端开发中，静态代码分析工具是非常重要的。它可以帮助我们发现代码中的潜在错误、提高代码质量、统一代码风格、减少代码维护成本等等。而在 CI / CD 流水线中使用 ESLint 进行静态代码分析，可...

    1 年前
  • 使用 webpack + vue-cli + vue-router 搭建 SPA 应用

    随着互联网技术的不断发展，单页面应用（SPA）已成为前端开发的主流之一。SPA 的核心思想是将整个页面的内容动态地加载到一个单一的 HTML 文件中，通过 JavaScript 控制页面的路由和渲染，...

    1 年前
  • 通过 Polyfill 来提高 Custom Elements 的兼容性

    什么是 Custom Elements？ Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，可以像普通的 HTML 元素一样使用...

    1 年前
  • 如何在 Webpack 中使用 SASS 加载器

    SASS 是一种 CSS 预处理器，它能够让开发者更加高效地编写 CSS 代码。在现代的前端开发中，使用 Webpack 已经成为了标配，那么如何在 Webpack 中使用 SASS 加载器呢？本文将...

    1 年前

相关推荐

    暂无文章