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

 1 简介

对象是在编程中最常见的部分，很多情况下需要遍历该对象上的属性，那么有几种方式可以帮助我们遍历该对象上的属性呢?下面一起来了解九种方法。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网站空间、营销软件、网站建设、婺城网站维护、网站推广。

下面测试方法所用的对象如下所示：

 
 
 
 
      
  
  
  
  1. const parentObj = { 
    2.   
  
  
  
  2.     a: 'aaaaa', 
    3.   
  
  
  
  3.     b: Symbol('bbbbb'), 
    4.   
  
  
  
  4.     c: 'ccccc' 
    5.   
  
  
  
  5. }; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. const Obj = Object.create(parentObj, { 
    8.   
  
  
  
  8.     d: { 
    9.   
  
  
  
  9.         value: 'ddddd', 
    10.   
  
  
  
  10.         enumerable: true 
    11.   
  
  
  
  11.     }, 
    12.   
  
  
  
  12.     e: { 
    13.   
  
  
  
  13.         value: 'eeeee', 
    14.   
  
  
  
  14.         enumerable: false 
    15.   
  
  
  
  15.     }, 
    16.   
  
  
  
  16.     [Symbol('f')]: { 
    17.   
  
  
  
  17.         value: 'fffff', 
    18.   
  
  
  
  18.         enumerable: true 
    19.   
  
  
  
  19.     } 
    20.   
  
  
  
  20. }); 
    21.

Object.keys(obj)

Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性(不含Symbol属性)。这些属性的顺序与手动遍历该对象属性时的一致。

 
 
 
 
      
  
  
  
  1. console.log('Object.keys()', Object.keys(Obj)); // Object.keys() [ 'd' ] 
    2.

Object.values(obj)

Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

 
 
 
 
      
  
  
  
  1. console.log('Object.values()', Object.values(Obj)); // Object.values() [ 'ddddd' ] 
    2.

Object.entries(obj)

Object.entries()返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

 
 
 
 
      
  
  
  
  1. console.log('Object.entries()', Object.entries(Obj)); // Object.entries() [ [ 'd', 'ddddd' ] ] 
    2.

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

 
 
 
 
      
  
  
  
  1. console.log('Object.getOwnPropertyNames()', Object.getOwnPropertyNames(Obj)); // Object.getOwnPropertyNames() [ 'd', 'e' ] 
    2.

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。

 
 
 
 
      
  
  
  
  1. console.log('Object.getOwnPropertySymbols()', Object.getOwnPropertySymbols(Obj)); // Object.getOwnPropertySymbols() [ Symbol(f) ] 
    2.

for……in

遍历所有可枚举的属性(包括原型上的)，然后可利用hasOwnProperty判断对象是否包含特定的自身(非继承)属性，其具有以下特点：

(1)index索引为字符串型数字，不能直接进行几何运算

(2)遍历顺序有可能不是按照实际数组的内部顺序

(3)会遍历数组的所有可枚举属性，包括原型

(4)for...in更适合便利对象，不要使用for...in遍历数组

 
 
 
 
      
  
  
  
  1. for(let key in Obj) { 
    2.   
  
  
  
  2.     // for in: d 
    3.   
  
  
  
  3.     // for in: a 
    4.   
  
  
  
  4.     // for in: b 
    5.   
  
  
  
  5.     // for in: c 
    6.   
  
  
  
  6.     console.log('for in:', key); 
    7.   
  
  
  
  7. } 
    8.

for……of

必须部署了Iterator接口后才能使用。使用范围：数组、Set和Map结构、类数组对象(arguments、DOMNodeList对象……)、Generator对象以及字符串

 
 
 
 
      
  
  
  
  1. for(let value of Object.values(Obj)) { 
    2.   
  
  
  
  2.     // for of: ddddd 
    3.   
  
  
  
  3.     console.log('for of:', value); 
    4.   
  
  
  
  4. } 
    5.

forEach

使用break不能中断循环使用

 
 
 
 
      
  
  
  
  1. Object.values(Obj).forEach(value => { 
    2.   
  
  
  
  2.     // forEach: ddddd 
    3.   
  
  
  
  3.     console.log('forEach:', value); 
    4.   
  
  
  
  4. }); 
    5.

Reflect.ownKeys(obj)

返回一个数组，包含对象自身的所有属性，不管属性名是Symbol还是字符串，也不管是否可枚举。

 
 
 
 
      
  
  
  
  1. console.log('Reflect.ownKeys()', Reflect.ownKeys(Obj)); // Reflect.ownKeys() [ 'd', 'e', Symbol(f) ] 
    2.

2 特点总结

类型特点
Object.keys(obj)返回对象本身可直接枚举的属性(不含Symbol属性）
Object.values(obj)返回对象本身可直接枚举的属性值(不含Symbol属性）
Object.entries(obj)返回对象本身可枚举属性键值对相对应的数组(不含Symbol属性）
Object.getOwnPropertyNames(obj)返回对象所有自身属性的属性名（不包括Symbol值作为名称的属性）
Object.getOwnPropertySymbols(obj)返回一个给定对象自身的所有 Symbol 属性的数组
for……in所有可枚举的属性（包括原型上的）
for……of必须部署了Iterator接口后才能使用，例如数组、Set和Map结构、类数组对象、Generator对象以及字符串
forEachbreak不能中断循环
Reflect.ownKeys(obj)对象自身所有属性

3 遍历顺序

上述遍历对象的属性时都遵循同样的属性遍历次序规则：

  • 首先遍历所有属性名为数值的属性，按照数字排序
  • 其次遍历所有属性名为字符串的属性，按照生成时间排序
  • 最后遍历所有属性名为Symbol值的属性，按照生成时间排序

用下面代码来验证上述遍历规则

 
 
 
 
      
  
  
  
  1. const Obj = { 
    2.   
  
  
  
  2.     [Symbol(0)]: 'symbol', 
    3.   
  
  
  
  3.     1 : '1', 
    4.   
  
  
  
  4.     'c': 'c', 
    5.   
  
  
  
  5.     '1a1': '11', 
    6.   
  
  
  
  6.     22223333: '2', 
    7.   
  
  
  
  7.     'd': 'd' 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. console.log(Reflect.ownKeys(Obj)); // [ '1', '22223333', 'c', '1a1', 'd', Symbol(0) ] 
    11.

本文转载自微信公众号「执鸢者」，可以通过以下二维码关注。转载本文请联系执鸢者公众号。

网站标题：前端百题斩之—— JS中9种遍历对象的方法
当前URL：http://www.shufengxianlan.com/qtweb/news11/211561.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

分类信息网

乐山网站建设　　 　成都水电改造　　 　ssl证书申请　　 　户外广告设计　　 　绵竹网站建设　　 　网站制作公司　　 　成都未宇聚　　 　香港云主机　　 　成都广告招牌　　 　免费收录网站　　 　成都免费网站建设公司　　 　成都网站建设　　 　乐山企业网站设计　　 　成都网站设计　　 　犀浦门窗定制　　 　成都网站设计　　 　成都翻译公司　　 　重庆网站建设　　 　内江广告　　 　LED显示屏