本篇内容介绍了“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"
});
这个是对象遍历界的老兵了,通过这种方式可以遍历对象自身及继承的所有可枚举属性(不包括Symbol类型)。
代码清单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遍历对象的五种方式怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.zhuxianfei.com/jishu/js/55327.html