javascript笔记之遍历对象的五种武器

向右看齐 2022-08-28 04:57 140阅读 0赞

## 准备 ##

先来准备一个测试对象obj。

代码清单1

## 五种武器 ##

### for…in ###

这个是对象遍历界的老兵了，通过这种方式可以遍历对象自身及继承的所有可枚举属性(不包括Symbol类型)。

代码清单2

for(var attr in obj){ 
        console.log(attr,"==",obj[attr]);
    }
    /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 name == 继承可枚举属性 */

### Object.keys ###

获取对象自身所有可枚举属性（不包括Symbol类型）组成的数组

代码清单3

Object.keys(obj).map((attr)=>{ 
        console.log(attr,"==",obj[attr]);
    });
    /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 */

### Object.getOwnPropertyNames ###

获取对象自身所有类型为非Symbol的属性名称（包括不可枚举）组成的数组

代码清单4

Object.getOwnPropertyNames(obj).map((attr)=>{ 
        console.log(attr,"==",obj[attr]);
    });
    /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 address == 自有不可枚举属性 */

### Object.getOwnPropertySymbols ###

获取对象自身所有类型为Symbol的属性名称（包括不可枚举）组成的数组

代码清单5

Object.getOwnPropertySymbols(obj).map((attr)=>{ 
        console.log(attr,"==",obj[attr]);
    });
    /* Symbol(自有可枚举symbol) == 自有可枚举symbol Symbol(自有不可枚举symbol) == 自有不可枚举symbol */

### Reflect.ownKeys ###

获取一个对象的自身的所有（包括不可枚举的和Symbol类型）的属性名称组成的数组

代码清单6

Reflect.ownKeys(obj).map((attr)=>{ 
        console.log(attr,"==",obj[attr]);
    });
    /* job1 == 自有可枚举属性1 job2 == 自有可枚举属性2 address == 自有不可枚举属性 Symbol(自有可枚举symbol) '==' '自有可枚举symbol' Symbol(自有不可枚举symbol) '==' '自有不可枚举symbol' */

## 总结 ##

武器库的说明书，根据需要选择合适的武器吧。

<table> 
 <thead> 
  <tr> 
   <th align="left">api</th> 
   <th align="left">操作</th> 
   <th align="left">自身属性</th> 
   <th align="left">不可枚举属性</th> 
   <th align="left">继承属性</th> 
   <th align="left">Symbol属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">for…in</td> 
   <td align="left">遍历</td> 
   <td align="left">yes</td> 
   <td align="left">no</td> 
   <td align="left">yes</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">Object.keys</td> 
   <td align="left">返回属性数组</td> 
   <td align="left">yes</td> 
   <td align="left">no</td> 
   <td align="left">no</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">Object.getOwnPropertyNames</td> 
   <td align="left">返回非Symbol属性数组</td> 
   <td align="left">yes</td> 
   <td align="left">yes</td> 
   <td align="left">no</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">Object.getOwnPropertySymbols</td> 
   <td align="left">返回Symbol属性数组</td> 
   <td align="left">yes</td> 
   <td align="left">yes</td> 
   <td align="left">no</td> 
   <td align="left">yes</td> 
  </tr> 
  <tr> 
   <td align="left">Reflect.ownKeys</td> 
   <td align="left">返回属性数组</td> 
   <td align="left">yes</td> 
   <td align="left">yes</td> 
   <td align="left">no</td> 
   <td align="left">yes</td> 
  </tr> 
 </tbody> 
</table>

五种武器里最牛的就是`Reflect.ownKeys`了，无论Symbol还是不可枚举通吃， 简直就是`Object.getOwnPropertyNames`和`Object.getOwnPropertySymbols`合体的效果。

## 扩展 ##

### Object.values ###

获取对象自身所有可枚举属性（不包括Symbol类型）的值组成的数组

代码清单7

Object.values(obj).map((val)=>{ 
        console.log(val);
    });
    /* 自有可枚举属性1 自有可枚举属性2 */

### Object.entries ###

获取对象自身所有可枚举属性（不包括Symbol类型）的键值对数组

代码清单7

Object.entries(obj).map((val)=>{ 
        console.log(val);
    });
    /* [ 'job1', '自有可枚举属性1' ] [ 'job2', '自有可枚举属性2' ] */

### hasOwnProperty ###

检测一个对象自身属性中是否含有指定的属性，返回boolean

> 引用自MDN: JavaScript 并没有保护 hasOwnProperty 属性名，因此某个对象是有可能存在使用这个属性名的属性，所以直接使用原型链上的 hasOwnProperty 方法

代码清单8

for(var attr in obj){ 
        if(Object.prototype.hasOwnProperty.call(obj,attr)){ 
            console.log("自有属性：：",attr);
        }else{ 
            console.log("继承属性：：",attr);
        }
    }
    /* 自有属性：： job1 自有属性：： job2 继承属性：： name */

### propertyIsEnumerable ###

检测一个属性在指定的对象中是否可枚举，返回boolean

代码清单9

Reflect.ownKeys(obj).map((attr) => { 
        if (Object.prototype.propertyIsEnumerable.call(obj, attr)) { 
            console.log("可枚举属性：：", attr);
        } else { 
            console.log("不可枚举属性：：", attr);
        }
    });
    /* 可枚举属性：： job1 可枚举属性：： job2 不可枚举属性：： address 可枚举属性：： Symbol(自有可枚举symbol) 不可枚举属性：： Symbol(自有不可枚举symbol) */

## 参考 ##

[MDN Object][]

[MDN Object]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object