ES8 之新特性 Object.entries() 和 Object.values() 快速变量两全其美

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

在前端开发中,我们经常需要对对象进行遍历或者获取对象中的某些属性值。ES8 中新增了两个方法 Object.entries() 和 Object.values(),它们可以快速地帮助我们实现这些操作。

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。这个数组中的每个元素都是一个形如 [key, value] 的数组,其中 key 是对象的属性名,value 是属性值。

示例代码:

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

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

Object.entries() 方法可以很方便地将对象转换成数组,我们可以使用数组的一些方法,如 forEach()、map()、reduce() 等对其进行操作。

示例代码:

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

Object.values()

Object.values() 方法返回一个给定对象自身可枚举属性的所有属性值的数组。

示例代码:

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

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

Object.values() 方法可以很方便地获取对象中的所有属性值,我们可以使用数组的一些方法,如 forEach()、map()、reduce() 等对其进行操作。

示例代码:

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

总结

Object.entries() 和 Object.values() 是 ES8 中新增的两个方法,它们可以快速地帮助我们实现对象的遍历和属性值获取。使用它们可以让我们的代码更加简洁和易读,同时也可以提高代码的效率。

在实际开发中,我们可以结合这两个方法进行一些高级操作,比如将对象转换成 Map 对象,或者使用 Object.fromEntries() 方法将数组转换成对象。

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

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

在使用 Object.entries() 和 Object.values() 方法时,我们需要注意它们不支持非可枚举属性的遍历,同时也不支持原型链上的属性遍历。

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


猜你喜欢

  • Sequelize 框架中 SQL 注入漏洞及解决方法

    什么是 Sequelize 框架? Sequelize 是一个基于 Node.js 的 ORM(对象关系映射)框架,可以让开发者方便地使用 JavaScript 语言来操作关系型数据库。

    7 个月前
  • Next.js+Firebase 构建一个博客网站

    简介 在当今互联网时代,博客已经成为了人们分享自己生活、经验和知识的重要方式之一。而在博客网站的建设过程中,如何选择一个稳定、高效、易用的技术栈,是每个开发者都需要面对的问题。

    7 个月前
  • 详解 Angular 组件之间的通信方式

    在 Angular 应用程序中,组件间的通信非常重要。组件之间的通信可以通过多种方式实现。在本文中,将介绍 Angular 中常用的组件通信方式,并提供示例代码。 父组件向子组件传递数据 父组件可以通...

    7 个月前
  • 在 LESS 中使用 @extend 实现类的继承和复用

    LESS 是一种 CSS 预处理器,它提供了许多方便的语法和功能,使得编写 CSS 更加高效和灵活。其中一个非常有用的功能就是 @extend,它可以让我们实现类的继承和复用,避免重复编写样式代码,提...

    7 个月前
  • 解决 eslint-config-airbnb-base No console 报错

    在前端开发中,使用 eslint 来规范代码是一种非常好的习惯。然而,在使用 eslint-config-airbnb-base 这个配置时,会经常遇到一个报错:No console。

    7 个月前
  • TypeScript 中如何正确使用接口 (Interface) 继承

    在 TypeScript 中,接口是定义对象类型的一种方式。通过接口,我们可以定义一个对象的属性和方法,以及它们的类型。而接口继承则是在已有的接口基础上,继续定义更多的属性和方法,从而实现代码的复用和...

    7 个月前
  • 如何在 Java 中使用 Socket.io 实现实时通信

    简介 Socket.io 是一个基于 Node.js 的实时通讯库,它能够在浏览器和服务器之间建立实时双向通讯的连接。在前端开发中,Socket.io 是非常常用的一种技术,可以用来实现实时聊天、实时...

    7 个月前
  • Material Design 下拉刷新控件 SwipeRefreshLayout 详解

    SwipeRefreshLayout 是 Android Support Library v4 中的一个控件,用于实现 Material Design 风格的下拉刷新功能,可以在用户下拉列表时触发刷新...

    7 个月前
  • RESTful API 接口中 JSON 和 XML 两种数据格式有何异同?

    RESTful API 是现代 Web 开发中最常用的 API 设计风格之一,它使用标准的 HTTP 协议,结合 URL、HTTP 动词、HTTP 头部和请求体等元素,来描述和操作资源。

    7 个月前
  • Mongoose 中的 lean 操作详解及其使用场景

    在使用 Mongoose 进行 MongoDB 数据库操作时,我们经常会遇到需要查询大量数据的情况。这时候,如果不加以优化,可能会导致性能问题。而 Mongoose 中的 lean 操作就是一种优化查...

    7 个月前
  • Hapi 框架实现验证码功能

    在前端开发中,验证码是一种常见的验证方式,用于防止恶意攻击和机器人程序的恶意行为。Hapi 框架是一种流行的 Node.js 框架,它提供了一种简单的方式来实现验证码功能。

    7 个月前
  • 提升 Fastify 性能技巧:request header 字典映射

    Fastify 是一个快速的 Web 框架,其性能和可扩展性都非常优秀。然而,在实际应用中,我们还可以通过一些技巧来进一步提升 Fastify 的性能。本文将介绍一种利用 request header...

    7 个月前
  • webpack 如何快速开发并实时刷新页面的技巧

    在前端开发中,webpack 是一个非常强大的工具。它可以帮助我们进行模块化管理、代码压缩、文件打包等一系列操作。而在开发过程中,我们通常需要频繁修改代码并实时预览页面效果。

    7 个月前
  • 使用 Mocha 和 PhantomJS 进行 JavaScript 浏览器测试

    JavaScript 是一种在 Web 开发中广泛使用的编程语言,但是在开发过程中,我们经常需要对 JavaScript 代码进行测试,以确保代码的正确性和可靠性。

    7 个月前
  • Promise 中遇到错误后应该如何优雅的处理

    前言 Promise 是一种用于异步编程的解决方案,它可以避免回调地狱,让异步代码更加清晰易读。但是在使用 Promise 的过程中,我们也会遇到一些错误,如何优雅的处理这些错误是我们需要考虑的问题。

    7 个月前
  • 浅谈 Flexbox 在网站页面中的使用场景

    Flexbox 是一种弹性盒子布局模型,它可以帮助我们更轻松地实现复杂的布局效果,特别是在响应式设计中,它的优势更加明显。本文将介绍 Flexbox 的基本概念和用法,并探讨它在网站页面中的使用场景,...

    7 个月前
  • MongoDB 技巧:如何创建索引以及索引的选择

    在使用 MongoDB 进行开发时,创建索引是提高查询效率的重要手段。本文将介绍 MongoDB 索引的创建以及如何选择合适的索引类型。 索引的作用 MongoDB 索引的作用是提高查询效率,类似于关...

    7 个月前
  • 使用 Cypress 进行 UI 自动化测试时如何实现灰度测试

    前言 随着前端技术的不断发展,UI 自动化测试已经成为现代前端开发中不可或缺的一部分。而在 UI 自动化测试中,灰度测试是一种非常重要的测试方式,它可以帮助我们在正式上线之前对新功能进行小范围的验证,...

    7 个月前
  • Node.js 模块路径问题总结

    在 Node.js 中,模块是一种可重用的代码单元。在编写 Node.js 应用程序时,我们经常需要引入其他模块。然而,在引入模块时,我们有时会遇到一些问题,比如模块找不到、require 命令路径解...

    7 个月前
  • 利用 Flexbox 实现响应式布局的利器

    在前端开发中,响应式布局是一项非常重要的技术。它可以让网站在不同设备上呈现出最佳的用户体验。而 Flexbox(弹性盒子布局)则是实现响应式布局的一种非常有效的方式。

    7 个月前

相关推荐

    暂无文章