ES8 中引入的 Object.values() 和 Object.entries() 的使用教程

在 ES8 中,JavaScript 引入了两个非常实用的方法,分别是 Object.values()Object.entries()。它们可以让我们更方便地获取对象的属性值和键值对。本文将详细介绍它们的具体用法及注意事项。

Object.values()

Object.values() 方法返回一个数组,数组中包含了对象自身的所有属性的值,其值的顺序与使用 for...in 循环遍历对象时返回的属性值的顺序相同。如果对象属性有 Symbol 类型的值,Object.values() 会忽略这些值。

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

可以看出,Object.values() 方法非常方便,我们可以不用遍历整个对象来获取所有属性的值。

Object.entries()

Object.entries() 方法也返回一个数组,其中包含了对象自身的所有属性的键值对。数组中的每个元素都是一个长度为 2 的数组,第一个元素表示属性名称,第二个元素表示属性值。

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

可以看出,Object.entries() 方法非常方便,我们可以不用遍历整个对象来获取所有属性的键值对。

注意事项

虽然 Object.values()Object.entries() 非常实用,但在使用时需要注意以下几点:

  • 仅支持现代浏览器:Object.values()Object.entries() 仅在现代浏览器上得到支持,如果你需要兼容旧版浏览器,可能需要使用第三方库或手写相应的代码。
  • 遍历顺序与 for...in 相同:使用 Object.values()Object.entries() 方法返回的结果与使用 for...in 循环遍历对象时返回的结果的顺序相同,因此在需要保证顺序的情况下可以使用这些方法。
  • 忽略 Symbol 类型的属性值:这两个方法会忽略对象属性值为 Symbol 类型的属性。

示例代码

下面是一个简单的示例代码,展示如何使用 Object.values()Object.entries() 方法:

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

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

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

总结:ES8 中的 Object.values() 和 Object.entries() 方法可以大大简化获取对象属性值及属性的键值对的操作,这两个方法非常实用,但在使用时要注意一些细节问题。

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


猜你喜欢

  • Cypress 自动化测试实战:无头浏览器测试篇

    本文将介绍使用 Cypress 对前端应用进行无头浏览器测试的基本流程和技术要点,并提供实例代码和指导建议。希望能帮助读者快速上手和应用 Cypress 进行自动化测试。

    1 年前
  • CSS Flexbox 实现自适应的表格布局的方法

    在前端开发中,经常需要实现表格布局,传统的表格布局需要通过 table 标签来实现,但是 table 标签在响应式布局中的弹性不够,难以兼容移动端设备。而 CSS Flexbox 布局则能很好地解决这...

    1 年前
  • PWA 实现中如何处理图片的加载和缓存?

    Progressive Web App (PWA) 是一种有效提升 Web 应用体验的技术方案,其中,图片是 Web 应用中不可或缺的资源之一。PWA 实现中,对于图片的加载和缓存需要做出特殊的处理。

    1 年前
  • Next.js API 路由的使用方式

    随着互联网技术的不断发展,前端领域也不断壮大。Next.js 是一个 React 应用框架,可帮助前端开发人员更快地构建企业级 React 应用程序。而其中的 API 路由可以使我们更方便地构建自己的...

    1 年前
  • Headless CMS 与微信小程序集成

    在当今互联网时代,快速、高效地构建一个交互式、具有良好用户体验的网站或应用程序是一个至关重要的任务。Headless CMS (无头 CMS) 是目前流行的一种现代内容管理方式,它提供了灵活的 API...

    1 年前
  • Jest + Puppeteer 测试 Vue SSR 项目

    随着前端技术的不断发展,Vue SSR(服务器端渲染)已经被广泛应用于实现更快的首次加载和更友好的 SEO,但同时也带来了新的测试问题。在 SSR 环境下,前端和后端的界限变得模糊,如何进行有效的测试...

    1 年前
  • 无障碍设计在国际化贸易中的影响与优化

    随着全球贸易的逐渐发展,越来越多的企业涉足到跨国业务和国际化市场中。在这个背景下,无障碍设计成为了一个越来越重要的话题。本文,我们将会从无障碍设计的基础入手,探讨无障碍设计在国际化贸易中的影响与优化,...

    1 年前
  • 如何使用 Hapi.js 和 Redis 实现会话管理

    随着 Web 应用程序的增长和用户交互的增加,许多应用程序需要管理会话以在多个请求之间跟踪用户状态。要做到这一点,Hapi.js 作为流行的 Node.js Web 框架提供了内置的会话管理功能。

    1 年前
  • 如何使用 Babel 进行代码分析和调试

    本文将介绍如何使用 Babel 进行前端代码分析和调试,包括代码转换和语法检查等功能。 什么是 Babel Babel 是一个 JavaScript 编译器,可以将 ES6+ 代码编译成 ES5 或更...

    1 年前
  • ES7 中关于 Rest 参数的新特性及应用

    在 ES6 中,我们已经认识到了“剩余参数”的概念,即使用 Rest 参数将多个函数参数转换成一个数组。而在 ES7 中,Rest 参数又有了新的应用和特性。 Rest 参数的基础用法 首先,我们来回...

    1 年前
  • 了解 ES11 中的 globalThis 全局变量,解决 JavaScript 中不同环境代码兼容性问题

    在编写 JavaScript 代码时,我们经常会面对不同环境导致的兼容性问题。例如,在浏览器中使用 window 对象来访问全局变量,但在 Node.js 环境中,却应该使用 global 对象。

    1 年前
  • 如何使用 Tailwind CSS 实现圆角、阴影等效果

    简介 Tailwind 是一个基于原子类的 CSS 框架,使用非常简便,只需要在 HTML 标记中加入 Tailwind 提供的 CSS 类名即可实现各种布局和样式效果。

    1 年前
  • React Native 中使用 ImagePicker 实现图片选择

    作为一款跨平台移动应用程序框架,React Native 在移动应用的开发中具有广泛的应用。其中,对于图片选择的功能,在移动应用的开发中也是非常常见的需求。 React Native 提供了 Imag...

    1 年前
  • Koa2 实现 WebSocket 详解

    简介 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,使得客户端和服务器可以进行实时通信。Koa2 是一个优秀的 Node.js web 开发框架,可以方便地使用中间件实现 We...

    1 年前
  • ES10 中的 Object.fromEntries 方法实现简单的二维数组转对象

    在前端开发中,我们经常要对不同类型的数据进行转换操作。其中,将二维数组转换成对象是常见的操作之一。在 ECMAScript 2019 标准(ES10)中,新加入的 Object.fromEntries...

    1 年前
  • 关于简单的 sequelize 表单的应用 =================================

    关于简单的 Sequelize 表单的应用 Sequelize 是一款基于 Node.js 的 ORM 框架,用于操作关系型数据库。它具有易用、强大、智能化的特点,是现今前端开发中十分流行的一个技术。

    1 年前
  • RxJS 中的 Of,Timer,fromEvent 等使用方法详解

    RxJS 是一个强大的库,它提供了丰富的操作符和工具,使得我们能够更加容易地处理数据流。在 RxJS 中,Of,Timer 和 fromEvent 是一些常用的操作符,它们在处理数据流时十分有用。

    1 年前
  • Mongoose 中的文档嵌套查询方法

    Mongoose 是一个流行的 Node.js ORM 框架,它允许您在 Node.js 应用程序中使用 MongoDB 数据库。 Mongoose 提供了许多方法来处理数据和查询。

    1 年前
  • 使用 Angular 和 Express 构建 RESTful API

    前言 REST(Representational State Transfer)是一种用于构建应用程序的架构风格。RESTful API 使用 HTTP 协议进行通信,使用轻量级、可维护和灵活的方式实...

    1 年前
  • 小清新 Promise 打造异步流程控制方案

    Javascript 是一门非常重要的语言,在网页开发中占据着无法替代的地位。然而,Javascript 语言中有很多异步操作,而这些异步操作往往需要处理复杂的流程控制。

    1 年前

相关推荐

    暂无文章