用 ES8 的 Object.entries() 和 Object.fromEntries() 方法管理对象

引言

在 JavaScript 的开发中,经常需要对对象进行操作和管理。ES8 中引入了两个新方法,Object.entries() 和 Object.fromEntries(),这两个方法可以极大地提高代码的可读性和编程效率,特别是在处理对象时。本文将详细介绍这两个方法的使用和优势,并通过示例代码来阐述。

Object.entries() 方法

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,即一个由键值对组成的二维数组。每个键值对的第一项表示属性的键名,第二项表示该属性的值。这个方法可以让我们更方便地对对象进行遍历和操作。

示例

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

优势

使用 Object.entries() 方法可以让我们更方便地对对象进行遍历,可以用 for...of 循环、Array.prototype.forEach() 等多种方式来遍历二维数组中的键值对,然后就可以针对每个属性进行操作,不必再使用 for...in 循环和 hasOwnProperty() 方法来判断是否是自身属性。

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

Object.fromEntries() 方法

Object.fromEntries() 方法是 Object.entries() 方法的反向操作。它接受一个二维数组,将其转换为一个新的对象。可以说,Object.fromEntries() 方法把 Object.entries() 返回的数组转换为了一个对象,使得我们可以更加方便地创建一个新的对象。

示例

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

优势

使用 Object.fromEntries() 可以更方便地创建一个新的对象,而不必再使用 Object.create() 方法或者用字面量的形式进行赋值。另外,如果我们需要将一个 Map 类型的数据结构转换成对象,Object.fromEntries() 方法也是非常好用的,如下所示:

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

总结

本文主要介绍了 ES8 中的 Object.entries() 和 Object.fromEntries() 方法的使用和优势。可以看出,这两个方法对于对象的操作非常的方便,极大地提高了代码的可读性和编程效率。我们可以在遍历对象的时候使用 Object.entries() 方法来获取对象的键值对数组,进而对每个属性进行操作;而在需要创建新的对象时,使用 Object.fromEntries() 方法来创建一个新的对象。

参考

  1. MDN web docs
  2. ES6新特性——Object.entries()和Object.fromEntries()

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


猜你喜欢

  • 如何在 Fastify 框架中使用 HTTPS

    在 Web 开发中,HTTPS 是非常重要的协议。它用于保护用户的敏感数据,防止数据在传输过程中被窃听、篡改或伪造。Fastify 是一款快速、低开销的 Node.js Web 框架,它支持使用 HT...

    1 年前
  • PM2 崩溃时的故障排除指南

    PM2 是一个流行的 Node.js 进程管理器,它允许您轻松启动、停止和重启应用程序,并监控它们的运行状态。但是,如果 PM2 崩溃了,您可能会感到困惑和无助。在这篇文章中,我们将讨论 PM2 崩溃...

    1 年前
  • 通过 Descriptor 监视对象属性

    在前端开发中,为了实现数据的动态更新与响应式变化,我们经常需要监听对象属性的变化。ES6 的 Proxy 可以很好地完成这项任务,但在一些特殊场景下,我们可能需要使用更加底层的方式来监听属性变化。

    1 年前
  • Tailwind 中的 Spacing 技巧:使用量化值实现更细致的间距管理

    在前端开发中,间距管理是很重要的一项工作。Tailwind 是一款流行的 CSS 框架,它通过提供预设的 CSS 类,使得开发者能够更高效地进行样式设计。在 Tailwind 中,Spacing 技巧...

    1 年前
  • 使用 Next.js 从 Fetch 到 Axios 转换遇到的问题

    前端开发离不开数据交互,而在数据交互中最常用的两种方式是 Fetch 和 Axios。Fetch 是原生提供的一种方式,而 Axios 则是一个第三方库。在使用 Next.js 进行开发时,我们可能需...

    1 年前
  • Mongoose Schema 的优化技巧

    在使用 Mongoose 进行 MongoDB 数据库的操作时,Schema 是一个非常重要的概念,它定义了文档的结构和属性,影响着整个应用的性能表现。因此,正确优化 Schema 在提高应用性能方面...

    1 年前
  • ECMAScript 2018 中关于 Promise.prototype.finally() 的一些重要事项

    介绍 Promise.prototype.finally() 是 ECMAScript 2018 中新增的方法,它可以在 Promise 的状态发生变化之后,无论是 resolve 还是 reject...

    1 年前
  • 在 Docker 容器中如何安装和使用 Memcached?

    Memcached 是一个高性能的内存对象缓存系统。在前端开发中,我们常常需要使用 Memcached 来缓存一些数据,以提高应用程序的相应速度和运行效率。本文将介绍如何在 Docker 容器中安装和...

    1 年前
  • 如何在 ES6 中使用 async/await 处理异步请求

    随着前端应用逐渐变得复杂,异步请求已成为我们不可避免的操作之一。传统的回调函数或 Promise 都是一种处理异步请求的方式,但这些方式在处理多个异步请求时容易导致回调地狱或者过多的 promise ...

    1 年前
  • 如何调试 Jest 测试用例?

    Jest 是一个非常强大的 JavaScript 测试框架,它提供了许多强大的功能,例如断言库、模拟、快照测试等。在前端开发中,我们经常使用 Jest 来对我们的代码进行单元测试和集成测试。

    1 年前
  • 如何使用 Node.js 实现实时的 WebSocket 连接

    引言 WebSocket 是 HTML5 中一个非常重要的新特性,由于其实时性、低延迟和双向通信等特性,广泛应用于实时数据交互场景,比如在线聊天、游戏、视频直播等等。

    1 年前
  • ES7 之新三连:Object.values/Object.entries/Array.prototype.includes 方法详解

    在 ES7 中,引入了三个新的方法:Object.values、Object.entries以及Array.prototype.includes,这三个方法都能对我们的前端开发带来很大的便利,本文就来...

    1 年前
  • React+Antd 实现表格的拖拽排序功能

    前言 在前端开发中,表格的拖拽排序功能是一项非常常见的需求。如果你使用了 React 框架和 Antd 组件库,那么实现这一功能就非常简单。 本文将详细介绍如何使用 React 和 Antd 实现表格...

    1 年前
  • MongoDB 高并发写入问题优化实践

    前言 MongoDB 是一款非常流行的 NoSQL 数据库,其具有高可靠性、高可用性、高性能等特性,广泛应用于 Web 应用程序的开发中。然而,在面对高并发写入场景时,MongoDB 也会遇到一些问题...

    1 年前
  • TCP 性能优化实践

    TCP是一种常见的传输控制协议,它是一个可靠的、面向连接的协议,在网络通信中具有广泛的应用。然而,在实际使用中,经常会遇到TCP性能出现问题的情况,如连接延迟、数据传输速度慢等。

    1 年前
  • SASS 中使用 @extend 的最佳实践

    SASS 中使用 @extend 的最佳实践 在前端开发中,样式表的编写是一个不可避免的环节。SASS 是一种非常常用的 CSS 预处理器,它提供了许多强大的功能来简化样式表的编写。

    1 年前
  • TypeScript 中使用 async/await 的指南

    TypeScript 中使用 async/await 的指南 随着 JavaScript 语言越来越流行,异步编程也成为了大家编写 JavaScript 代码时必须面对的问题。

    1 年前
  • ESLint 中 parser、plugins 和 rules 的详解

    ESLint 是一个广泛使用的 JavaScript 代码检查工具,用来发现代码中的问题并提供自动化修复。它使用了一系列解释器(parser)、插件(plugins)和规则(rules),这些组成部分...

    1 年前
  • Chai expect 超时问题及解决方案

    背景 在编写前端自动化测试时,我们通常使用断言库来判断预期结果和实际结果是否一致。其中,Chai 是前端自动化测试中比较流行的一个断言库,它提供了多种断言风格和插件,使用起来非常方便。

    1 年前
  • 用 React.js 创建 PWA 的完整教程

    作为前端开发者,您可能已经听说了渐进式 Web 应用(Progressive Web App,PWA)。PWA 可以帮助应用程序在移动设备上获得原生应用的功能,例如离线可访问,推送通知和添加到主屏幕等...

    1 年前

相关推荐

    暂无文章