详解 ES8 中新增的 Object.fromEntries() 方法

在 ES8 中,新增了一个非常实用的方法:Object.fromEntries()。这个方法可以将一个二维数组转化为一个对象,这给你极大的便利性,例如将一个 Map 转化为一个对象或 JSON 对象转化为一个对象。

语法

Object.fromEntries(iterable)

其中 iterable 需要必须是一个二维数组。数组中每个元素都是一个 key-value 对象,例如:

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

示例

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

用途

将 Map 转化为对象

在 JavaScript 中,Map 对象(ES6 新增)也是一种 key-value 映射的数据结构,但是和对象不同的是,Map 对象的 key 可以是任意类型,包括对象和函数。如果我们想把 Map 对象转化为对象,一般的方法是遍历 Map,再一个一个的复制到对象中,而现在我们可以通过 Object.fromEntries() 方法很轻松地实现。

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

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

将 JSON 转化为对象

当我们接收到一个 JSON 格式的数据时,我们将它解析为一个对象,一般的方法是使用 JSON.parse() 方法,而这个方法返回的是一个对象。但是如果我们取到的数据是一个数组,我们需要遍历数组,一个一个的解析为对象,或者我们可以用 ES8 标准中的 Object.fromEntries() 方法快速实现。

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

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

兼容性

由于 Object.fromEntries() 是 ES8 中新增的方法,所以在一些旧浏览器中可能不支持。如果你需要兼容旧浏览器,你可以写一个 polyfill 插件使代码兼容旧版本的浏览器。

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

总结

Object.fromEntries() 方法是 ES8 新增的方法,非常实用和方便。可以用于将 Map 转化为对象、JSON 对象转化为对象等,但需要注意兼容性问题。

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


猜你喜欢

  • 解决使用 Enzyme 测试 React 组件时出现的 “Cannot find module 'enzyme'” 问题

    在开发 React 应用时,使用 Enzyme 进行测试是一个比较常见的需求。然而,在进行测试时,可能会遇到 “Cannot find module 'enzyme'” 的问题,这会导致测试无法正常运...

    1 年前
  • Socket.io 连接中遇到的错误及其解决方法

    在前端开发中,Socket.io 是一个广泛使用的实现实时双向通信的库。虽然 Socket.io 本身设计得很简单易用,但在使用过程中还是会遇到一些问题。本文将列举一些可能会遇到的 Socket.io...

    1 年前
  • 如何使用 Jest 进行 JavaScript 代码覆盖率检测

    简介 Jest 是一个由 Facebook 开发的 JavaScript 测试框架,它可以用于测试 JavaScript 应用程序、组件和模块。Jest 有很多优点,例如易于设置、速度快、支持异步测试...

    1 年前
  • Web Components 与微服务的组件化设计实践

    Web Components 是一种用于开发可重用的组件化 Web 应用程序的技术。这种技术的引入使得前端开发更加模块化和可维护,这样开发人员可以将界面元素拆分为小的自包含的部件,这些部件可以跨多个项...

    1 年前
  • PM2 安装与部署

    前言 对于前端来说,在应用部署方面是一个比较头痛的问题。特别是在 Node.js 应用部署上,我们往往需要自己进行一些繁琐的配置工作,而这个过程中往往遇到各种问题,比如启动脚本控制问题、守护进程管理等...

    1 年前
  • Hapi.js + Mongoose 实现 mongodb 数据库操作详解

    随着互联网技术的不断发展,前端技术日新月异。为了满足业务需求,前端与后端技术的交流变得越来越紧密。在这种情况下,前端如何有效地操作数据库成为了一个重要的问题。本文将介绍如何使用 Hapi.js 和 M...

    1 年前
  • RESTful API 开发中的安全性:从跨站脚本攻击到 SQL 注入

    RESTful API 是现代 Web 应用程序的重要组件,其通过 HTTP 协议提供了一种简单、可扩展的方式来进行网路通信。与传统的 Web 应用程序相比, RESTful API 更加灵活和易于扩...

    1 年前
  • Express.js 中的防止 SQL 注入攻击技巧

    SQL 注入攻击是一种常见的网络攻击方式,它利用输入的数据注入恶意 SQL 语句,在数据库中执行恶意操作,导致数据泄漏或者破坏数据库。在 Express.js 开发中,我们应该采取一些措施来防止 SQ...

    1 年前
  • 解决 Mocha 测试时出现的 "setTimeout() or setInterval()" 错误

    在进行前端单元测试时,我们通常会选择使用 Mocha,它是一个流行的 JavaScript 测试框架。然而,有时候我们会遇到 "setTimeout() or setInterval()" 错误,这意...

    1 年前
  • 解决 Babel 编译 ES6 代码时出现的 maximum call stack size exceeded 错误

    在使用 Babel 编译 ES6 代码时,有时会遇到一个问题:maximum call stack size exceeded,即函数调用栈溢出。这个错误非常常见,但是很难 debug,也没有一个明确...

    1 年前
  • ECMAScript 2019 的模块化导入导出语法

    在前端开发中,模块化开发一直是一个重要的话题。在日常开发中,使用模块化引入第三方库、组件和自定义模块已经成为标配。但是,在 JavaScript 中实现模块化却一直很困难,需要依赖于一些工具库。

    1 年前
  • 如何使用 Sequelize 实现文件上传和下载

    在现代 Web 开发中,文件上传和下载是非常常见的操作。而 Sequelize 是一个广泛使用的 Node.js ORM 库,它可以与各种关系型数据库(如 MySQL、PostgreSQL 等)配合使...

    1 年前
  • MongoDB 中的慢查询问题解决方案

    介绍 MongoDB 是一种流行的 NoSQL 数据库,在前端开发中经常使用。但是,在使用 MongoDB 时,可能会遇到慢查询问题,导致应用程序的性能降低。本文将介绍 MongoDB 中的慢查询问题...

    1 年前
  • Node.js 中使用 Passport 框架实现用户认证的步骤和技巧

    作为一个 Node.js 开发者,你可能需要为你的 Web 应用添加用户认证的功能。Passport 是一个流行的身份验证框架,提供了简单易用的用户认证解决方案。本文将介绍如何使用 Passport ...

    1 年前
  • ES6 中的 Set 和 Map,你了解了吗?

    在 ES6 中,Set 和 Map 是两个非常实用的数据结构。这两个数据结构在前端开发中被广泛应用,而且它们的使用方式也非常简单。本文将详细介绍 ES6 中的 Set 和 Map 的定义、用法和应用场...

    1 年前
  • TypeScript 中使用 interface 模拟枚举类型的方法

    在 TypeScript 中,虽然支持枚举类型,但有时我们可能需要更灵活的定制化选项来满足我们的需求。这时就可以使用 interface 来模拟枚举类型。本文将介绍如何使用 interface 实现模...

    1 年前
  • Docker 容器内无法使用 ping 命令的解决方法

    在使用 Docker 容器时,有时候会发现容器内无法使用 ping 命令来测试网络连通性。这可能会给我们的工作带来困扰,因为我们需要进行网络调试和测试。本文将介绍如何解决 Docker 容器内 pin...

    1 年前
  • 基于 Fastify+NestJS 实现微服务架构

    近年来,微服务架构已经成为了一种趋势。相较于传统的单体架构,微服务架构可以更容易地实现水平扩展、限制单点故障、提高开发效率等诸多优点。Fastify 和 NestJS 都是很适合用来构建微服务架构的工...

    1 年前
  • ES8 中对正则表达式的改进

    正则表达式是一种用于匹配和处理文本的强大工具。在 JavaScript 中,正则表达式是一个有用的工具,可以用于处理字符串、验证用户输入或提取特定的信息。在 ES8 中,正则表达式得到了重大的改进,使...

    1 年前
  • Socket.io 实现 Web 视频监控系统教程

    在前端领域中,实时性是越来越重要的一种需求。其中,Web 视频监控系统在各种领域中被广泛应用,例如安防、交通工具监控等。本文将介绍如何使用 Socket.io 实现一个 Web 视频监控系统。

    1 年前

相关推荐

    暂无文章