了解 ECMAScript 2017 (ES8) 中 Object.values() 和 Object.entries() 方法

在 ECMAScript 2017 (ES8) 中,新增了两个方法 Object.values() 和 Object.entries(),这两个方法能够帮助开发者更方便地操作对象,提高开发效率。

Object.values()

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组,顺序与使用 for...in 循环遍历该对象的属性值的顺序相同(不同的是 for...in 循环还会枚举原型链中的属性)。

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

Object.values() 会忽略那些值为 undefined 或 null 的属性。

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

Object.entries()

Object.entries() 方法返回一个给定对象自身的所有可枚举属性键值对的数组,顺序与使用 for...in 循环遍历该对象的属性键值对的顺序相同(不同的是 for...in 循环还会枚举原型链中的属性)。

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

Object.entries() 会忽略那些值为 undefined 或 null 的属性。

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

指导意义

Object.values() 和 Object.entries() 方法的引入,使得开发者能够更方便地操作对象的属性值和键值对,减少了一些冗余的代码,提高了开发效率。

在实际开发中,我们可以用 Object.values() 和 Object.entries() 方法来遍历对象,计算对象的属性值之和、属性值的平均值等等。同时,我们还可以利用这两个方法来比较两个对象是否相等,只需要将它们的属性值或键值对都转换成数组,再进行比较即可。

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

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

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

总结

Object.values() 和 Object.entries() 方法的引入,使得开发者能够更方便地操作对象,提高了开发效率。我们可以利用这两个方法来遍历对象、计算对象的属性值之和、属性值的平均值等等。同时,我们还可以利用这两个方法来比较两个对象是否相等。

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


猜你喜欢

  • 响应式设计中常见的 Bug 及解决方法

    随着移动设备的普及,响应式设计已经成为了前端开发的必备技能之一。然而,在实际开发中,响应式设计中常常会出现一些 Bug,影响网站的用户体验。本文将介绍响应式设计中常见的 Bug 及解决方法,帮助前端开...

    7 个月前
  • Docker 容器中使用 GitLab 的完整教程

    在前端开发中,我们经常需要使用 GitLab 进行代码管理和版本控制。而在开发过程中,如果能够将 GitLab 集成到 Docker 容器中,就可以实现更加高效的开发流程。

    7 个月前
  • 利用 TypeScript 优化 AngularJS 应用的开发过程

    前言 AngularJS 是一款非常流行的前端框架,它提供了丰富的功能和便捷的开发方式,但同时也存在一些问题,比如类型不安全、代码可读性差、调试困难等。为了解决这些问题,我们可以使用 TypeScri...

    7 个月前
  • 如何在 Headless CMS 中处理 404 页面?

    Headless CMS 同传统 CMS 相比,最大的不同在于它只提供数据 API,而不负责展示层的渲染。这种架构使得前端可以更加灵活地处理展示层的逻辑,但同时也带来了新的挑战,比如如何处理 404 ...

    7 个月前
  • 理解 FlexBox 弹性盒子布局

    什么是弹性盒子布局? FlexBox 是一种用于排列和分布元素的 CSS 布局模型。它允许我们使用弹性盒子来设计灵活的布局,适应不同的屏幕尺寸和设备。弹性盒子布局可以轻松实现水平和垂直居中、自适应和响...

    7 个月前
  • 如何在 Express.js 应用程序中使用 Pug 模板引擎

    在前端开发中,模板引擎是一个非常重要的技术。它可以帮助我们快速构建出符合需求的页面,同时也提高了代码的可维护性和复用性。在 Node.js 的世界中,Express.js 是最流行的 Web 框架之一...

    7 个月前
  • ES7 async 和 await:从 Promise 的回调函数中解放出来

    在 JavaScript 中,Promise 是一种处理异步操作的方式,它可以使代码更加简洁和易于维护。然而,当我们需要进行多个异步操作时,使用 Promise 的回调函数会变得非常复杂和难以阅读。

    7 个月前
  • Hapi 框架如何在建立 WebSocket 连接时向客户端推送数据

    什么是 Hapi 框架? Hapi 是一个 Node.js Web 应用程序框架,它被广泛用于构建 Web 应用程序和 API。Hapi 框架具有可扩展性、插件化、高度可配置和测试友好等特点。

    7 个月前
  • 如何使用 ECMAScript 2019 的 Array.includes 方法判断数组是否包含某个元素

    在前端开发中,经常会涉及到数组的操作。判断一个数组是否包含某个元素是一项基本的操作。在 ECMAScript 2019 中,新增了 Array.includes 方法,可以方便地判断一个数组是否包含某...

    7 个月前
  • 探究 ES11 在 export-from 规范上所做的调整

    探究 ES11 在 export-from 规范上所做的调整 在前端开发过程中,我们经常会使用模块化的方式来组织我们的代码,以达到更好的可维护性和可扩展性。而在模块化中,export 和 import...

    7 个月前
  • Kubernetes 中如何实现水平扩展

    前言 Kubernetes 是一个广泛使用的容器编排系统,它可以帮助我们管理和部署容器化应用。在实际应用中,我们可能需要对应用进行水平扩展,以应对高并发的请求。本文将介绍 Kubernetes 中如何...

    7 个月前
  • PM2 进程管理器介绍及其与 Nginx 的结合使用

    前言 随着互联网的飞速发展,Web 应用程序也变得越来越复杂。在开发和部署过程中,进程管理是一个至关重要的环节。而 PM2 进程管理器就是一个非常实用的工具,可以帮助我们更轻松地管理进程。

    7 个月前
  • Socket.io 在 Android Studio 中的应用教程

    简介 Socket.io 是一个基于 Node.js 的实时网络库,它可以实现客户端与服务器之间的双向通信。在前端开发中,Socket.io 的应用非常广泛,可以用于实时聊天、数据推送、游戏等场景。

    7 个月前
  • ES9 标准之使用 Generator 函数解决 JavaScript 异步问题

    异步编程的挑战 在前端开发中,异步编程是无法避免的问题。由于 JavaScript 是单线程执行的语言,一旦遇到异步操作,就会出现回调地狱、代码复杂度高等问题。ES6 中引入的 Promise 对象、...

    7 个月前
  • 在 React Native 中解决头像无法加载的问题

    React Native 是一款用 JavaScript 编写原生移动应用的框架,它通过封装原生组件和 API,让开发者可以使用统一的代码库编写跨平台的应用。在开发 React Native 应用时,...

    8 个月前
  • 使用 RESTful API 实现异步消息传递的方法与技巧

    随着 Web 应用程序的发展,我们需要在前端应用程序中实现异步消息传递。这是因为传统的同步通信方式会使得用户界面变得不流畅。在本文中,我们将介绍如何使用 RESTful API 实现异步消息传递的方法...

    8 个月前
  • 浏览器兼容性问题如何解决 CSS Reset 带来的影响

    在前端开发中,我们经常会遇到浏览器兼容性问题。其中一个常见的问题是 CSS Reset 带来的影响。CSS Reset 的作用是将浏览器默认的样式全部重置,以便更好地控制页面样式。

    8 个月前
  • 响应式设计中的无限加载问题及解决方案

    在现代 Web 开发中,响应式设计已经成为了一种趋势,它让我们的网站可以在各种设备上都能够展现出良好的用户体验。然而,随着数据量的增加,无限加载(Infinite Scroll)已经成为了许多网站的标...

    8 个月前
  • 贴近实战:如何在 Angular 中使用 RxJS 来处理异步请求

    Angular 是一个流行的前端框架,它提供了强大的工具和技术来开发复杂的 Web 应用程序。其中,RxJS 是一个非常有用的工具,它可以帮助我们更好地处理异步请求和数据流。

    8 个月前
  • 如何在 Mongoose 中正确地处理唯一约束?

    如何在 Mongoose 中正确地处理唯一约束? 在开发 Web 应用程序时,我们通常需要在数据库中存储数据。Mongoose 是一个 Node.js 应用程序中最流行的 MongoDB 数据库 OD...

    8 个月前

相关推荐

    暂无文章