您的位置: 首页  >  文章  >  javascript遍历对象的方式有哪些

javascript遍历对象的方式有哪些

分类: 文章 • 2022-09-07 11:29:35

本篇内容介绍了“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"
});

    五种武器

    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'
*/

    总结

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

    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)
*/

    “javascript遍历对象的方式有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！

    相关推荐