温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

javascript遍历对象的方式有哪些

发布时间:2021-10-25 09:03:16 来源:亿速云 阅读:107 作者:iii 栏目:开发技术

本篇内容介绍了“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遍历yesnoyesno
    Object.keys返回属性数组yesnonono
    Object.getOwnPropertyNames返回非Symbol属性数组yesyesnono
    Object.getOwnPropertySymbols返回Symbol属性数组yesyesnoyes
    Reflect.ownKeys返回属性数组yesyesnoyes

    五种武器里最牛的就是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遍历对象的方式有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI