ECMAScript 2018(ES9)中的 Object.entries 和 Object.values 的使用方法

ECMAScript 2018(ES9)中的 Object.entries 和 Object.values 的使用方法

ECMAScript 2018(ES9)是 JavaScript 的最新标准,它包含了很多新特性和改进。其中,Object.entries 和 Object.values 是两个非常实用的扩展。在本文中,我们将详细探讨它们的使用方法,并提供示例代码。

  1. Object.entries

Object.entries 是一个静态方法,它返回一个包含对象所有可枚举属性 [key, value] 键值对的数组。该方法的语法如下:

Object.entries(obj)

其中,obj 参数是要转化为数组的对象。

示例代码:

const obj = { x: 1, y: 2, z: 3 }; const entries = Object.entries(obj); console.log(entries); //[["x", 1], ["y", 2], ["z", 3]]

上述代码中,我们定义了一个对象 obj,然后使用 Object.entries 将其转化为一个包含三个元素的二维数组 entries。调用 console.log 输出 entries,结果为 [ ["x", 1], ["y", 2], ["z", 3] ]。

该方法可以用于遍历对象的属性和值,如下:

const obj = { x: 1, y: 2, z: 3 }; for(const [key, value] of Object.entries(obj)){ console.log(${key}:${value}); } //x:1 //y:2 //z:3

上述代码中,我们将 entries 数组解构为 key 和 value 两个变量,然后使用 for 循环遍历它们,依次输出 key 和 value。

  1. Object.values

Object.values 是一个静态方法,它返回一个数组,包含对象所有的可枚举属性值。该方法的语法如下:

Object.values(obj)

其中,obj 参数是要转化为数组的对象。

示例代码:

const obj = { x: 1, y: 2, z: 3 }; const values = Object.values(obj); console.log(values); // [1, 2, 3]

上述代码中,我们定义了一个对象 obj,然后使用 Object.values 将其转化为一个包含三个元素的数组 values。调用 console.log 输出 values,结果为 [1, 2, 3]。

该方法可以用于查找对象属性的值,如下:

const obj = { x: 1, y: 2, z: 3 }; if(Object.values(obj).includes(2)){ console.log('2 is included in object values.'); } //2 is included in object values.

上述代码中,我们使用 includes 方法查找 obj 对象中是否包含值为 2 的属性值。结果返回 true,并输出 "2 is included in object values."。

  1. 总结

Object.entries 和 Object.values 是 ECMAScript 2018(ES9)引入的两个扩展特性。它们可以使得 JavaScript 编程更加方便和简单,尤其是在处理对象属性的场景下。通过本文的讲解和示例代码,相信读者已经掌握它们的使用方法和指导意义。

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


猜你喜欢

  • GraphQL 101:错误处理和安全性

    GraphQL 是一种新型的 API 查询语言和运行时,它允许客户端精确地声明它们需要的数据,并使服务端能够提供更高效、强大的 API。然而,错误处理和安全性是任何网络通信协议应背负的责任。

    9 个月前
  • 在 Deno 中如何使用异步迭代和 Generators?

    在 Deno 中如何使用异步迭代和 Generators? Deno 是一个安全的 TypeScript 运行时环境,它拥有很多强大的功能和特性,其中包括异步迭代和 Generators。

    9 个月前
  • 使用 Jest 和 Puppeteer 对前端页面进行 End-to-End 测试

    随着前端开发的日益普及,对稳定性和可靠性的需求也变得越来越迫切。而 End-to-End 测试正是一种检测整个系统是否符合预期功能的方法。在本文中,我们将重点介绍如何使用 Jest 和 Puppete...

    9 个月前
  • 使用 TypeScript 开发 React 项目,这些坑你要知道

    在前端开发中,React作为一种很流行的前端框架,它的高效、可复用的组件化开发、灵活的数据绑定以及强大的性能使得它得到了广泛的应用。而TypeScript作为一个强类型的JavaScript超集,给开...

    9 个月前
  • MongoDB MapReduce 技术实现详解

    前言 在现代技术中,随着数据量的迅速增长,数据处理变得越来越重要。而 MongoDB MapReduce 技术,是一种分布式,高效的数据处理方式。它可以处理 MongoDB 中的大量数据,对数据进行聚...

    9 个月前
  • TailwindCSS 教程:将自定义 CSS 转换为 TailwindCSS

    TailwindCSS 是一个流行的 CSS 框架,提供了一种快速、灵活和易于使用的方式来编写样式。它具有简洁明了的类名称,具有表达力和可读性,同时还便于在开发过程中进行修改和维护。

    9 个月前
  • HTML5 中如何实现无障碍操作

    随着互联网的发展,越来越多的人开始依赖互联网来获取信息、交流和娱乐。但是,对于视障人士来说,网站使用起来往往存在困难,甚至无法使用。为了能够更好地服务于广大的用户,我们需要学习如何在 HTML5 中实...

    9 个月前
  • 使用 Server-sent Events(SSE) 实现邮件实时提醒和推送

    使用 Server-sent Events(SSE) 实现邮件实时提醒和推送 现今,邮件作为人与人之间进行信息沟通的重要形式,已经得到广泛的应用。然而,在传统的邮件使用中,我们往往需要手动刷新页面来获...

    9 个月前
  • webpack 通过 package.json 文件配置默认的入口文件及出口文件?

    前端开发中,经常需要使用构建工具,如webpack来将代码打包成可供网页访问的静态资源。而在使用webpack时,我们通常需要配置入口和出口文件,即指定webpack应该从哪些文件开始打包,将打包后的...

    9 个月前
  • 推荐使用 [preset-es2015],让 Babel 编译更加快速

    在前端开发领域,ES6 及更高版本的 JavaScript 已经成为了日常开发的标配。但是这些新特性并不是所有浏览器都支持,这就需要我们使用 Babel 这个 JavaScript 编译器来将 ES6...

    9 个月前
  • Serverless 架构中使用 DynamoDB 时的错误及解决方法

    前言 Serverless 架构正在成为互联网业界的一种主流解决方案,它能更好地解决互联网应用场景下的低并发、低负载、动态使用等问题。而 DynamoDB 作为 AWS 的 NoSQL 数据库服务,也...

    9 个月前
  • 在 Koa2 中实现 URL 重定向

    在 Web 开发中,URL 重定向是常见的一种技术手段,可以将浏览器的请求转发到另一个 URL 上,常用于网页跳转、处理错误链接、防止搜索引擎爬取无效链接等场景。在 Koa2 中,实现 URL 重定向...

    9 个月前
  • 从 Chrome Dev Summit 看前沿 PWA 技术与未来发展趋势

    近日,Chrome Dev Summit 2021在线举行,Chrome浏览器发布了一系列关于PWA(Progressive Web App)技术的更新和未来发展趋势的展望。

    9 个月前
  • Vue-Cli 3.0 构建 SPA 应用教程及调优实践

    前言 Vue-Cli 是一个基于 Vue.js 的脚手架工具,它可以快速创建一个 Vue.js 项目的基础结构,并附带一些实用的功能,例如热重载、ESLint 检查、单元测试和打包等。

    9 个月前
  • Socket.io 报错:client.request is not a function 解决方案

    最近在使用 Socket.io 进行前端开发的过程中,遇到了一个错误提示:client.request is not a function。这个错误很容易出现,但是却很难解决。

    9 个月前
  • Fastify 与 Docker 集成:构建可移植的 Web 应用程序

    随着现代化 Web 应用程序的崛起,容器化和微服务体系结构已经成为前端工程师中必备的技能之一。使用 Docker 可以方便地部署、测试和交付应用程序,而 Fastify 则是一个高效的 Node.js...

    9 个月前
  • 使用 Hapi 和 Passport.js 实现多种认证策略

    随着 Web 技术的发展,用户认证已成为前端领域中非常重要的一环。在前端开发中,常常需要实现多种认证策略,比如本地认证、第三方认证(GitHub、Facebook等)、单点登录等等。

    9 个月前
  • ES6 中 import 语法的使用注意事项

    随着 JavaScript 的发展,我们已经不再满足于仅仅使用传统的 script 标签来加载 JS 文件。ES6 为我们带来了方便、快捷、模块化的 import 语法。

    9 个月前
  • Kubernetes 应用的高可用性设计技巧

    前言 Kubernetes 是目前最流行的容器编排系统之一,它的出现极大地简化了容器化应用的部署、管理和扩展,同时也为应用的高可用性提供了便利。 在 Kubernetes 中,高可用性指的是应用在发生...

    9 个月前
  • 解决 Material Design 中的 TextInputLayout 与 EditText 使用过程中出现的兼容性问题

    Material Design 是 Google 推出的一种覆盖整个 Android 平台的设计语言,它提供了一种简洁、清新、富有层次感的设计风格,促进了用户体验的提升。

    9 个月前

相关推荐

    暂无文章