JS 对象遍历知多少?

开发 前端
本文主要是对 JS 对象(不含数组、Map、Set 结构)的 7个遍历方法进行总结归纳,本文会以艾弗森的基本资料为模板生成一个 JS 对象并对其进行遍历 。

[[412480]]

最前面

本文主要是对 JS 对象(不含数组、Map、Set 结构)的 7个遍历方法进行总结归纳,写该文章的这天恰好是我最喜爱的球星艾弗森的 45 周岁生日,因此本文会以艾弗森的基本资料为模板生成一个 JS 对象并对其进行遍历 。

定义对象

首先让我们定义如以下代码所示的对象 player:

  1. const player = { 
  2.     name'Allen  Iverson'
  3.     [Symbol('birthday')]: '1975/06/07'
  4. }; 
  5. Object.defineProperties(player, { 
  6.     isHallofFame: { 
  7.         enumerable: false
  8.         value: true
  9.     }, 
  10.     [Symbol('ScoreKingTime')]: { 
  11.         enumerable:false
  12.         value: 4, 
  13.     }, 
  14. }); 
  15. Object.defineProperties(player.__proto__, { 
  16.     university: { 
  17.         enumerable: true
  18.         value: 'Georgetown'
  19.     }, 
  20.     team: { 
  21.         enumerable: false
  22.         value: '76ers'
  23.     }, 
  24.     [Symbol('country')]: { 
  25.         enumerable: true
  26.         value: 'USA'
  27.     }, 
  28.     [Symbol('hometown')]: { 
  29.         enumerable: false
  30.         value: 'Virginia'
  31.     }, 
  32. }); 

如上述代码所示,定义了一个 player 的对象,其共有以下 8 个属性:

通过控制台的输出观察也更直观:

其中浅颜色的属性都是不可枚举的属性,__proto__下的属性则为其原型上(即 Object.prototype)的属性,Symbol 类型的值自然为 Symbol 属性

for...in

MDN:The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.

  1. for(const name in player) { 
  2.     console.log('name:'name); 
  3. // namename 
  4. // name: university 

for...in 循环是我们较为常用的遍历对象方法了,结合 MDN 里所言以及输出结果不难得出其遍历的属性,包含自身以及原型上所有可枚举的属性,不包含 Symbol 属性。因为其可遍历到原型上可枚举的属性,因此我们的代码中通常会多出一句这样的判断(如果我们不需要原型上的属性):

  1. for(const name in player) { 
  2.     if (Object.prototype.hasOwnProperty.call(player, name)) { 
  3.         console.log('name:'name); 
  4.     } 
  5.      
  6. // namename 

Object.keys

MDN:The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

  1. const keys = Object.keys(player); 
  2. console.log('keys:', keys); 
  3. // keys: ["name"

Object.keys 大概是我们最常用的遍历方法了,如在 Vue 源码对 data 进行遍历响应式处理也是用这个方法。通过输出结果也表明:其返回的是所有自身可枚举的属性(不含 Symbol 属性),不包含原型上的任何属性。

Object.getOwnPropertyNames

MDN:The Object.getOwnPropertyNames() method returns an array of all properties (including non-enumerable properties except for those which use Symbol) found directly in a given object.

  1. const ownPropertyNames = Object.getOwnPropertyNames(player); 
  2. console.log('ownPropertyNames:', ownPropertyNames); 
  3. // ownPropertyNames: ["name""isHallofFame"

Object.getOwnPropertyNames 返回的是所有自身的属性(包含不可枚举属性但不包含 Symbol 属性),不包含原型上的任何属性。

Object.getOwnPropertySymbols

MDN:The Object.getOwnPropertySymbols() method returns an array of all symbol properties found directly upon a given object.

  1. onst ownPropertySymbols  = Object.getOwnPropertySymbols(player); 
  2. console.log('ownPropertySymbols:', ownPropertySymbols); 
  3. // ownPropertySymbols: [Symbol(birthday), Symbol(ScoreKingTime)] 

通过输出不难得出 Object.getOwnPropertySymbols 返回的是自身的所有 Symbol 属性(包含不可枚举的),但是不含原型上的任何属性。

Reflect.ownKeys

MDN:The static Reflect.ownKeys() method returns an array of the target object's own property keys.

  1. const ownKeys = Reflect.ownKeys(player); 
  2. console.log('ownKeys:', ownKeys) 
  3. // ownKeys: ["name""isHallofFame", Symbol(birthday), Symbol(ScoreKingTime)] 

Reflect.ownKeys 返回的是自身的所有属性(包含不可枚举的以及所有 Symbol 属性),不包含原型 上的任何属性。

Object.values

MDN:The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. (The only difference is that a for...in loop enumerates properties in the prototype chain as well.)

  1. const values = Object.values(player); 
  2. console.log('values:'values); 
  3. // values: ["Allen  Iverson"

Object.values 同 Object.keys 一样,其遍历的是所有自身可枚举的属性(不含 Symbol 属性),不包含原型上的任何属性。但与 Object.keys 不同的是:其返回的不再是 key 值而是 value 值集合。

Object.entries

MDN: The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. (The only important difference is that a for...in loop enumerates properties in the prototype chain as well).

  1. const entries =Object.entries(player); 
  2. console.log('entries:', entries); 
  3. // entries: [["name""Allen  Iverson"]] 

其也同 Object.keys 一样,遍历的是所有自身可枚举的属性(不含 Symbol 属性),不包含原型上的任何属性。不同的是,其返回值是 [key, value]的集合。Object.entries 在我们平时的开发中可能很少用到,但是其可配合Object.fromEntries一起使用:有以下代码:

  1. // 对象转换 
  2. const object1 = { a: 1, b: 2, c: 3 }; 
  3. const object2 = Object.fromEntries( 
  4.   Object.entries(object1) 
  5.   .map(([ key, val ]) => [ key, val * 2 ]) 
  6. ); 
  7. console.log(object2); 
  8. // { a: 2, b: 4, c: 6 } 

总结

结合文章中的代码输出结果可得到以下表格:

简而言之:

  • 只有 for...in 可以遍历到原型上的属性
  • Object.getOwnPropertyNames 和 Reflect.ownKeys 可获取到不可枚举的属性
  • Object.getOwnPropertySymbols 和 Reflect.ownKeys 可获取到 Symbol 属性

 

责任编辑:姜华 来源: 微医大前端技术
相关推荐

2012-02-13 22:50:59

集群高可用

2021-12-04 11:17:32

Javascript继承编程

2010-08-16 09:15:57

2013-12-23 14:00:31

Windows 8.2Windows 8.1

2017-07-14 10:51:37

性能优化SQL性能分析

2010-06-17 19:07:12

UML对象

2020-09-08 10:56:55

Java多线程存储器

2009-05-13 17:31:06

DBAOracleIT

2012-09-10 16:38:40

Windows Ser

2018-08-31 10:53:25

MySQL存储引擎

2021-12-09 06:41:56

Python协程多并发

2010-09-29 09:28:04

DHCP工作原理

2009-03-06 19:19:55

2022-01-06 16:20:04

Java排序算法排序

2013-08-02 09:42:37

BYODBYOC云存储

2018-12-12 15:01:22

开源存储 软件

2022-05-08 18:02:11

tunnel隧道云原生

2021-12-10 07:47:30

Javascript异步编程

2013-07-15 15:35:06

2009-04-17 09:20:14

微软Windwos 7操作系统
点赞
收藏

51CTO技术栈公众号