javascript遍历对象的五种方式怎么实现

本篇内容介绍了“javascript遍历对象的五种方式怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联公司是专业的日照网站建设公司,日照接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行日照网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

    准备

    先来准备一个测试对象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遍历对象的五种方式怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


    文章名称:javascript遍历对象的五种方式怎么实现
    浏览地址:http://scyanting.com/article/poogss.html