脚本宝典收集整理的这篇文章主要介绍了javascript遍历对象的五种方式实例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
先来准备一个测试对象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" });
这个是对象遍历界的老兵了，通过这种方式可以遍历对象自身及继承的所有可枚举属性(不包括@R_126_506@)。
代码清单2
for(var attr in obj){
console.LOG(attr,"==",obj[attr]);
}
/*
job1 == 自有可枚举属性1
job2 == 自有可枚举属性2
name == 继承可枚举属性
*/
获取对象自身所有可枚举属性（不包括Symbol类型）组成的数组
代码清单3
Object.keys(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚举属性1
job2 == 自有可枚举属性2
*/
获取对象自身所有类型为非Symbol的属性名称（包括不可枚举）组成的数组
代码清单4
Object.getOwnPropertyNames(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚举属性1
job2 == 自有可枚举属性2
address == 自有不可枚举属性
*/
获取对象自身所有类型为Symbol的属性名称（包括不可枚举）组成的数组
代码清单5
Object.getOwnPropertySymbols(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
Symbol(自有可枚举symbol) == 自有可枚举symbol
Symbol(自有不可枚举symbol) == 自有不可枚举symbol
*/
获取一个对象的自身的所有（包括不可枚举的和Symbol类型）的属性名称组成的数组
代码清单6
Reflect.ownKeys(obj).map((attr)=>{
console.log(attr,"==",obj[attr]);
});
/*
job1 == 自有可枚举属性1
job2 == 自有可枚举属性2
address == 自有不可枚举属性
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合体的效果。
获取对象自身所有可枚举属性（不包括Symbol类型）的值组成的数组
代码清单7
Object.values(obj).map((val)=>{
console.log(val);
});
/*
自有可枚举属性1
自有可枚举属性2
*/
获取对象自身所有可枚举属性（不包括Symbol类型）的键值对数组
代码清单7
Object.entries(obj).map((val)=>{
console.log(val);
});
/*
[ 'job1', '自有可枚举属性1' ]
[ 'job2', '自有可枚举属性2' ]
*/
检测一个对象自身属性中是否含有指定的属性，返回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
*/
检测一个属性在指定的对象中是否可枚举，返回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)
*/
参考
到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的javascript遍历对象的五种方式实例代码全部内容，希望文章能够帮你解决javascript遍历对象的五种方式实例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。