|
准备
先来准备一个测试对象obj。 代码清单1 var notEnum = Symbol("继承不可枚举symbol");var proto = { [Symbol("继承可枚举symbol")]: "继承可枚举symbol", name: "继承可枚举属性"};// 不可枚举属性Object.defineProperty(proto, "age", { value: "继承不可枚举属性"});// 不可枚举symbol属性Object.defineProperty(proto, notEnum, { value: "继承不可枚举symbol"});var obj = { job1: "自有可枚举属性1", job2: "自有可枚举属性2", [Symbol("自有可枚举symbol")]: "自有可枚举symbol"};// 继承Object.setPrototypeOf(obj, proto);// 不可枚举属性Object.defineProperty(obj, "address", { value: "自有不可枚举属性"});// 不可枚举symbol属性var ownNotEnum = Symbol("自有不可枚举symbol");Object.defineProperty(obj, ownNotEnum, { value: "自有不可枚举symbol"});
五种武器
for…in
这个是对象遍历界的老兵了，通过这种方式可以遍历对象自身及继承的所有可枚举属性(不包括Symbol类型)。 代码清单2 for(var attr in obj){ console.log(attr,"==",obj[attr]);}/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2name == 继承可枚举属性*/
Object.keys
获取对象自身所有可枚举属性（不包括Symbol类型）组成的数组 代码清单3 Object.keys(obj).map((attr)=>{ console.log(attr,"==",obj[attr]);});/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2*/
Object.getOwnPropertyNames
获取对象自身所有类型为非Symbol的属性名称（包括不可枚举）组成的数组 代码清单4 Object.getOwnPropertyNames(obj).map((attr)=>{ console.log(attr,"==",obj[attr]);});/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2address == 自有不可枚举属性*/
Object.getOwnPropertySymbols
获取对象自身所有类型为Symbol的属性名称（包括不可枚举）组成的数组 代码清单5 Object.getOwnPropertySymbols(obj).map((attr)=>{ console.log(attr,"==",obj[attr]);});/*Symbol(自有可枚举symbol) == 自有可枚举symbolSymbol(自有不可枚举symbol) == 自有不可枚举symbol*/
Reflect.ownKeys
获取一个对象的自身的所有（包括不可枚举的和Symbol类型）的属性名称组成的数组 代码清单6 Reflect.ownKeys(obj).map((attr)=>{ console.log(attr,"==",obj[attr]);});/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2address == 自有不可枚举属性Symbol(自有可枚举symbol) '==' '自有可枚举symbol'Symbol(自有不可枚举symbol) '==' '自有不可枚举symbol'*/
总结
武器库的说明书，根据需要选择合适的武器吧。 | api | 操作 | 自身属性 | 不可枚举属性 | 继承属性 | Symbol属性 | | for…in | 遍历 | yes | no | yes | no | | Object.keys | 返回属性数组 | yes | no | no | no | | Object.getOwnPropertyNames | 返回非Symbol属性数组 | yes | yes | no | no | | Object.getOwnPropertySymbols | 返回Symbol属性数组 | yes | yes | no | yes | | Reflect.ownKeys | 返回属性数组 | yes | yes | no | yes | 五种武器里最牛的就是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
总结到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
vue如何解决axios请求前端跨域问题
Echats图表大屏自适应的实现方法 |
