for..in vs Object.keys():在 ECMAScript 2019 中的区别与使用

面试官:小伙子,你的数组去重方式惊艳到我了

在 ECMAScript 2019 中,使用 for..inObject.keys() 都可以用来遍历对象的属性。但是,它们之间有一些区别和适用场景。在本文中,我们将深入探讨 for..inObject.keys() 的用法和区别,并提供实际的示例以方便理解。

for..in 的用法和特点

for..in 是一个用于迭代对象属性的语法结构。它的基本语法如下:

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

其中,obj 是要遍历的对象,prop 则是 obj 的属性名。

for..in 的特点包括:

  • 遍历对象可枚举的属性,包括自己和继承来的属性。
  • 遍历的顺序并不是固定的,取决于 JavaScript 引擎的具体实现。
  • 在遍历过程中,可以修改对象的属性。

Object.keys() 的用法和特点

Object.keys() 是 ECMAScript 5 中引入的一个方法,用于获取对象本身的可枚举属性的属性名,它的基本语法如下:

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

其中,obj 是要获取属性名的对象,keys 则是属性名的数组。

Object.keys() 的特点包括:

  • 获取对象自身的可枚举属性的属性名,不包括继承来的属性。
  • 获取的属性名的顺序与 for..in 语句中的顺序相同。
  • 不会修改对象本身的属性。

for..inObject.keys() 的比较

根据上面的介绍,我们可以得出 for..inObject.keys() 的一些比较,如下表所示。

for..in Object.keys()
遍历对象属性 包括继承来的属性 不包括继承来的属性
遍历顺序 不固定 for..in 相同
修改属性 可以修改对象本身的属性 不会修改对象本身的属性

示例代码

下面是一些示例代码,演示了 for..inObject.keys() 之间的区别。

示例 1

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

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

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

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

在这个例子中,我们添加了一个 c 属性到 obj 的原型上。当使用 for..in 语句遍历 obj 时,它会包括 c 属性;而使用 Object.keys() 方法获取属性名时,它不包括 c 属性。

示例 2

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

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

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

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

在这个例子中,我们使用 for..in 语句遍历 obj 并删除了 a 属性。由于 for..in 语句可以修改对象的属性,所以 obj 对象变为 { b: 2 }。而使用 Object.keys() 方法则不会修改对象的属性,所以属性名数组中仍保留了 b 属性。

结论

在 ECMAScript 2019 中,for..in 语句和 Object.keys() 方法都可以用于遍历对象属性,但是它们之间有些许的区别和适用场景。如果要遍历对象的所有属性,包括继承来的属性,或者需要修改对象的属性时,可以使用 for..in 语句。如果只需要遍历对象本身的属性,并且不需要修改对象的属性时,则应该使用 Object.keys() 方法。最终,请根据实际需求来选择使用哪种方法。

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


猜你喜欢

  • 如何在 iOS 端让无障碍用户更好地使用应用?

    无障碍性是一种关注社会多样化和包容性的理念,它是指让所有用户,无论能力、年龄和技能水平如何,都能够访问和使用应用程序。为了创建一个更加友好和无障碍的应用,我们需要掌握一些关于iOS平台的无障碍性的技术...

    21 天前
  • 使用 ES9 中的 default 值简化代码

    使用 ES9 中的 default 值简化代码 随着 JavaScript 的不断发展, ES6 被越来越多的浏览器所支持。而在 ES6 之后,ES9 也在 2018 年 6 月发布了。

    21 天前
  • TypeScript 和 Socket.io 的结合使用

    随着前端技术的不断发展和变化,现代前端技术框架已经成为了门槛越来越高的玄学,而 TypeScript 和 Socket.io 的结合则为开发者带来了更为便利的开发方式。

    21 天前
  • 在Express.js 中实现RESTful API时常见的错误及其解决方法

    在前端开发中,实现RESTful API是不可避免的任务。RESTful API充分利用了HTTP协议,使得请求和响应之间的交互更为清晰和有规律,较好地符合了前后端分离的理念。

    21 天前
  • MongoDB 教程:如何使用地理空间索引

    MongoDB 是一种流行的 NoSQL 数据库,它可以存储和检索大量非结构化数据。其中一个强大的功能是地理空间索引,它可以用来处理大规模的地理信息,如餐厅位置、人口普查、车辆追踪等。

    21 天前
  • 如何在 Deno 中集成 MongoDB?

    Deno 是一个新兴的 Node.js 替代品,它采用现代化的 JavaScript 和 TypeScript ,并且更加安全和可靠。MongoDB 是一个流行的 NoSQL 数据库,可以轻松地对 J...

    21 天前
  • Cypress 中如何模拟登录

    介绍 Cypress 是一个流行的前端测试框架,它帮助开发者简化了前端自动化测试的过程。他提供了许多易于使用的 API 以及强大的 UI 测试工具,可以帮助我们快速而准确地模拟用户行为。

    21 天前
  • ES2021:如何在您的项目中使用 Async/await

    ES2021:如何在您的项目中使用 Async/await JavaScript 中的异步编程已成为前端程序员的一个重要主题。在过去的几年中,为了解决异步代码问题,ES6引入了 Promise,并在 ...

    21 天前
  • Fastify 框架中路由配置的最佳实践

    在 Fastify 中,路由是应用程序中的重要组成部分。正确配置路由可以让应用程序更加高效、可扩展和易于维护。本文将讨论 Fastify 框架中路由配置的最佳实践,并提供一些示例代码和指导意义。

    21 天前
  • LESS 中遇到的常见语法错误及解决方法

    LESS 是一种 CSS 预处理器,它在 CSS 基础上增加了变量、混合器和函数等功能,让样式表更加灵活和易于维护。然而,在使用 LESS 进行开发过程中,我们可能会遇到一些常见的语法错误。

    21 天前
  • RESTful API 如何实现数据仿真?

    什么是 RESTful API? RESTful API,即符合 REST 架构原则的 API。REST(Representational State Transfer,表现层状态转换)是一种软件架构...

    21 天前
  • 超详细:Headless CMS 开发指南

    什么是 Headless CMS Headless CMS 是一个新颖的内容管理系统,它的工作方式和传统 CMS 有所不同。Headless CMS 的“Headless”指的是无头的,也就是没有渲染...

    21 天前
  • Redis 发布订阅模式的使用方法和原理

    Redis是一款高性能的内存数据库,其特有的发布订阅模式可以帮助我们更好地处理异步消息。 什么是发布订阅模式? 发布订阅模式是一种消息传递模式,其中发送者(发布者)发送要传递的消息,并不关心谁会接收。

    21 天前
  • 如何在 Mocha 测试中处理超时问题

    介绍 在前端开发中,测试是一个非常重要的环节,能够有效保证代码的质量。Mocha 是一种流行的 JavaScript 测试框架,它通过提供丰富的 API,使得测试变得更加容易。

    21 天前
  • MongoDB 安全:如何实现更好的安全性

    MongoDB 是一种非关系型数据库,越来越多的开发者开始使用它来构建 Web 应用程序。然而,随着应用程序规模的不断扩大,如何保护数据库的安全性变得尤为重要。在本文中,我们将介绍一些 MongoDB...

    21 天前
  • Kubernetes 中使用 Sidecar 容器如何通信?

    在 Kubernetes 中,有时需要一些辅助容器来协助主要容器完成它们的工作。这就是 Sidecar 容器的概念。Sidecar 容器可以跟主容器一同部署在同一个 pod 中,它们可以共享 pod ...

    21 天前
  • Promise 中使用 async/await 的最佳实践

    在前端开发中,使用异步编程模式是必不可少的。ES6 的 Promise 成为了处理异步流程的主流解决方案之一,它可以解决回调函数嵌套带来的代码可读性、代码维护性等问题。

    21 天前
  • ESLint 遇到错误提示:'no-console' is defined 但用掉的代码是注释或是调试有助于发现问题,怎么处理?

    ESLint 遇到错误提示:'no-console' is defined 但用掉的代码是注释或是调试有助于发现问题,怎么处理? 在前端开发中,我们经常会使用 console.log() 进行调试和输...

    21 天前
  • 使用 TypeScript 时如何处理异步操作?

    在前端开发中,异步操作是很常见的。比如从后台获取数据、发送网络请求、处理 DOM 事件等等。这些操作不仅对用户体验很关键,而且对应用程序的性能和稳定性也很关键。当我们使用 TypeScript 开发前...

    21 天前
  • 在 Deno 中调用外部 API 时遇到错误?这里有一些解决方法

    在 Deno 中调用外部 API 时,我们有时会遇到各种错误。这些错误可能是网络连接问题、API 版本问题、请求参数问题等等。在这篇文章中,我将向你介绍一些解决这些问题的方法,帮助你更流畅地开发 De...

    21 天前

相关推荐

    暂无文章