前端百题斩之—— JS中9种遍历对象的方法

上一篇 / 下一篇  2021-05-19 10:19:07

  1 简介
  对象是在编程中最常见的部分,很多情况下需要遍历该对象上的属性,那么有几种方式可以帮助我们遍历该对象上的属性呢?下面一起来了解九种方法。
  下面测试方法所用的对象如下所示:
  const parentObj = { 
      a: 'aaaaa', 
      b: Symbol('bbbbb'), 
      c: 'ccccc' 
  }; 
   
  const Obj = Object.create(parentObj, { 
      d: { 
          value: 'ddddd', 
          enumerable: true 
      }, 
      e: { 
          value: 'eeeee', 
          enumerable: false 
      }, 
      [Symbol('f')]: { 
          value: 'fffff', 
          enumerable: true 
      } 
  }); 
  Object.keys(obj)
  Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性(不含Symbol属性)。这些属性的顺序与手动遍历该对象属性时的一致。
  console.log('Object.keys()', Object.keys(Obj)); // Object.keys() [ 'd' ]
  Object.values(obj)
  Object.values()返回一个数组,其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
  console.log('Object.values()', Object.values(Obj)); // Object.values() [ 'ddddd' ] 
  Object.entries(obj)
  Object.entries()返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
  console.log('Object.entries()', Object.entries(Obj)); // Object.entries() [ [ 'd', 'ddddd' ] ] 
  Object.getOwnPropertyNames(obj)
  Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。
  console.log('Object.getOwnPropertyNames()', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ 'd', 'e' ] 
  Object.getOwnPropertySymbols(obj)
  Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。
  console.log('Object.getOwnPropertySymbols()', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ] 
  for……in
  遍历所有可枚举的属性(包括原型上的),然后可利用hasOwnProperty判断对象是否包含特定的自身(非继承)属性,其具有以下特点:
  (1)index索引为字符串型数字,不能直接进行几何运算
  (2)遍历顺序有可能不是按照实际数组的内部顺序
  (3)会遍历数组的所有可枚举属性,包括原型
  (4)for...in更适合便利对象,不要使用for...in遍历数组
  for(let key in Obj) { 
      // for in: d 
      // for in: a 
      // for in: b 
      // for in: c 
      console.log('for in:', key); 
  } 
  for……of
  必须部署了Iterator接口后才能使用。使用范围:数组、Set和Map结构、类数组对象(arguments、DOMNodeList对象……)、Generator对象以及字符串
  for(let value of Object.values(Obj)) { 
      // for of: ddddd 
      console.log('for of:', value); 
  } 
  forEach
  使用break不能中断循环使用
  Object.values(Obj).forEach(value => { 
      // forEach: ddddd 
      console.log('forEach:', value); 
  }); 
  Reflect.ownKeys(obj)
  返回一个数组,包含对象自身的所有属性,不管属性名是Symbol还是字符串,也不管是否可枚举。
  console.log('Reflect.ownKeys()', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ 'd', 'e', Symbol(f) ] 
  2 特点总结
  3 遍历顺序
  上述遍历对象的属性时都遵循同样的属性遍历次序规则:
  首先遍历所有属性名为数值的属性,按照数字排序
  其次遍历所有属性名为字符串的属性,按照生成时间排序
  最后遍历所有属性名为Symbol值的属性,按照生成时间排序
  用下面代码来验证上述遍历规则:
  const Obj = { 
      [Symbol(0)]: 'symbol', 
      1 : '1', 
      'c': 'c', 
      '1a1': '11', 
      22223333: '2', 
      'd': 'd' 
  }; 
   
  console.log(Reflect.ownKeys(Obj)); // [ '1', '22223333', 'c', '1a1', 'd', Symbol(0) ] 

TAG: JavaScript

 

评分:0

我来说两句

日历

« 2022-10-01  
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

数据统计

  • 访问量: 74894
  • 日志数: 423
  • 建立时间: 2020-08-11
  • 更新时间: 2022-09-29

RSS订阅

Open Toolbar