ECMAScript 2019 中的 Object.values() 和 Object.entries(),让你的对象操作更加简单!

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

ECMAScript 2019 中的 Object.values() 和 Object.entries(),让你的对象操作更加简单!

在前端开发中,经常需要对对象进行操作,例如获取对象的属性值、遍历对象等。而在 ECMAScript 2019 中,新增了 Object.values() 和 Object.entries() 方法,可以更加简单方便地对对象进行操作。

Object.values() 方法可以返回一个由对象的所有属性值组成的数组,而 Object.entries() 方法则返回一个由对象的键值对组成的数组。下面我们分别介绍它们的用法和示例代码。

Object.values()

Object.values() 方法的语法如下:

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

其中,obj 表示要获取属性值的对象。该方法返回一个由 obj 对象的属性值组成的数组。

下面是一个示例代码:

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

在上述示例中,我们定义了一个对象 obj,并使用 Object.values() 方法获取了该对象的属性值,并将其保存在 values 变量中。最后将 values 数组输出到控制台中。

Object.entries()

Object.entries() 方法的语法如下:

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

其中,obj 表示要获取键值对的对象。该方法返回一个由 obj 对象的键值对组成的数组,每个键值对都是一个长度为 2 的数组,第一个元素为键,第二个元素为值。

下面是一个示例代码:

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

在上述示例中,我们定义了一个对象 obj,并使用 Object.entries() 方法获取了该对象的键值对,并将其保存在 entries 变量中。最后将 entries 数组输出到控制台中。

应用场景

Object.values() 和 Object.entries() 方法可以简化我们对对象的操作。例如,我们可以使用 Object.values() 方法来计算对象属性的总和:

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

在上述示例中,我们先使用 Object.values() 方法获取了对象 obj 的属性值,然后使用 reduce() 方法将属性值累加起来,得到了属性值的总和。

而 Object.entries() 方法则可以方便地遍历对象的键值对:

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

在上述示例中,我们使用 Object.entries() 方法获取了对象 obj 的键值对,然后使用 for...of 循环遍历每个键值对,输出键和值。

总结

Object.values() 和 Object.entries() 方法是 ECMAScript 2019 中新增的两个方法,可以方便地对对象进行操作。Object.values() 方法可以返回对象的属性值数组,而 Object.entries() 方法则可以返回对象的键值对数组。它们的应用场景非常广泛,可以用来计算属性值的总和、遍历对象键值对等。

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


猜你喜欢

  • ES9 中的静态属性

    在 ES9 中,我们可以通过静态属性来定义一个类的属性。静态属性是指在类上定义的属性,而不是实例上的属性。它们可以在类的任何方法中使用,也可以在类的外部使用。 定义静态属性 在 ES9 中,我们可以通...

    7 个月前
  • ES8 的日志组合

    在前端开发中,日志是非常重要的一部分。通过记录日志,我们可以更好地理解代码的执行过程,快速定位问题,并进行调试和优化。ES8 引入了一种新的日志组合方式,可以更方便地记录日志,并且支持异步操作和错误处...

    7 个月前
  • 在 Chai-Http 中使用 DELETE 请求进行 API 测试的示例

    随着前端开发的不断发展,API 测试成为了一个必不可少的环节。而 Chai-Http 是一个非常实用的 Node.js 模块,可以帮助我们进行 API 测试。本文将详细介绍在 Chai-Http 中如...

    7 个月前
  • Redis 持久化方式比较:RDB 和 AOF

    Redis 是一种高性能的 NoSQL 数据库,它以内存为存储介质,可以提供非常快速的读写性能。不过,由于内存有限,Redis 需要将数据写入磁盘进行持久化。Redis 提供了两种持久化方式:RDB ...

    7 个月前
  • Sequelize 如何在 Model 中定义静态方法?

    Sequelize 是一个流行的 Node.js ORM 库,它允许我们使用 JavaScript 语言操作关系型数据库。Sequelize 提供了一种简单的方式来定义数据库模型,使我们可以很容易地操...

    7 个月前
  • Vue.js 中如何使用 mixin 写公共代码?

    Vue.js 是一款流行的前端框架,它提供了许多强大的功能来帮助我们快速构建交互式的用户界面。其中一个非常有用的功能是 mixin,它允许我们将一些公共代码抽象出来,然后在多个组件中共享。

    7 个月前
  • React hooks 中的状态共享实现方法

    React hooks 是 React 16.8 版本中引入的新特性,它提供了一种新的方式来编写 React 组件。React hooks 的一个重要特性就是可以在函数组件中使用状态和其他 React...

    7 个月前
  • MySQL 性能优化:查询优化的最佳实践

    MySQL 是一种常用的关系型数据库,但是在实际使用中,由于数据量的增加和复杂查询的需求,往往会遇到查询效率低下的问题。本文将介绍 MySQL 查询优化的最佳实践,包括索引的使用、查询语句的优化等方面...

    7 个月前
  • ES7 中的 Atomics.wait 方法应用与性能优化实践

    在前端开发中,性能优化一直是一个不可忽视的问题。ES7 中的 Atomics.wait 方法是一个可以用于性能优化的工具,本文将详细介绍 Atomics.wait 方法的使用,以及如何通过 Atomi...

    7 个月前
  • 如何解决 ESLint 提示 'no-unused-vars' 的问题

    当你在开发前端项目时,使用 ESLint 进行代码检查时,可能会遇到 'no-unused-vars' 的提示,意味着存在未使用的变量。这个提示在一定程度上有助于提高代码质量,但有时也会因为一些特殊情...

    7 个月前
  • 必读:Mongoose 中 Schema 定义的常见错误及其解决方案

    在使用 Mongoose 进行 MongoDB 数据库操作时,Schema 定义是一个非常重要的部分。Schema 定义可以帮助我们规范数据的类型、格式和存储方式,避免数据不一致和错误的存储方式。

    7 个月前
  • 如何更好地使用 Tailwind MediaQuery 媒体查询类

    在前端开发中,响应式设计已经成为了一个必不可少的部分。而在实现响应式设计时,媒体查询是一个非常重要的工具。Tailwind CSS 是一个非常流行的 CSS 框架,它提供了一系列的媒体查询类,使得我们...

    7 个月前
  • Angular 中的依赖注入(DI)完全指南

    什么是依赖注入(DI)? 依赖注入(DI)是一种设计模式,旨在实现松耦合的代码。它是通过将对象的依赖项传递给它们,而不是在对象内部创建它们来实现的。 在 Angular 中,依赖注入是一种非常重要的概...

    7 个月前
  • 基于 Koa2 和 TypeScript 搭建 Node.js 服务端应用

    前言 在 Web 开发中,Node.js 作为一种非常流行的后端开发语言,广泛应用于 Web 服务端开发领域。而在 Node.js 开发中,使用 Koa2 框架和 TypeScript 语言可以让我们...

    7 个月前
  • CSS Reset 使用技巧攻略

    在进行网页开发时,我们经常会遇到不同浏览器对 CSS 样式的解析差异,导致页面显示不一致的问题。为了解决这个问题,我们可以使用 CSS Reset 进行样式重置。本文将介绍 CSS Reset 的使用...

    7 个月前
  • 利用 socket.io 搭建实时消息推送系统

    前言 在现代 Web 应用程序中,实时消息推送已经成为了必备的功能。这种功能可以让用户获得实时的反馈,提高用户体验,并且可以用于很多场景,如聊天室、通知系统等。在本文中,我们将介绍如何利用 socke...

    7 个月前
  • PWA 技术开发难点解析:如何在 iOS 设备上启用 PWA 的 Service Worker?

    前言 PWA(Progressive Web App)是一种新型的 Web 应用程序,它能够像原生应用一样提供离线访问、推送通知和更快的加载速度等功能。PWA 技术被广泛应用于前端开发中,但在 iOS...

    7 个月前
  • Material Design 中 TabLayout 与 ViewPager 联动的使用详解

    在 Android 开发中,TabLayout 与 ViewPager 联动是一种常见的设计模式。而在 Material Design 中,TabLayout 与 ViewPager 联动更是被广泛应...

    7 个月前
  • Babel 7 新功能:终于可以省略 package.json 中的 "main" 了?

    随着前端技术的不断发展,JavaScript 语言也在不断地更新和升级。为了让更多的开发者能够使用最新的 JavaScript 语法,Babel 7 推出了一项重要的新功能:省略 package.js...

    7 个月前
  • Hapi 框架中的回调函数详解

    Hapi 是一个基于 Node.js 平台的 Web 应用开发框架,它的设计目标是提供一种可靠、可扩展、易于编写和维护的 Web 应用程序开发方式。在 Hapi 框架中,回调函数是非常重要的一部分,它...

    7 个月前

相关推荐

    暂无文章