javascript遍历对象的五种方式实例代码

 更新时间:2021年10月24日 11:30:08   作者:照物华  
在我们日常工作过程中,我们对于javaScript遍历对象、数组的操作是十分的频繁的,这篇文章主要给大家介绍了关于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)
*/

参考

MDN Object

总结

到此这篇关于javascript遍历对象的五种方式的文章就介绍到这了,更多相关javascript遍历对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript生成带参数的二维码示例

    Javascript生成带参数的二维码示例

    这篇文章主要给大家介绍了Javascript生成带有参树二维码的方法,实现的方法还是很简单的,有需要的朋友们可以参考借鉴。下面来一起看看吧。
    2016-10-10
  • Javascript实时柱状图实现代码

    Javascript实时柱状图实现代码

    js实现的实时柱状图,非常有创意的想法。
    2008-10-10
  • layui页面级弹出框的实现

    layui页面级弹出框的实现

    本文主要介绍了layui页面级弹出框的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 无间断滚动marquee的详细用法解析

    无间断滚动marquee的详细用法解析

    无间断滚动marquee的详细用法解析...
    2006-08-08
  • 微信小程序 搜索框组件代码实例

    微信小程序 搜索框组件代码实例

    这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 让mocha支持ES6模块的方法实现

    让mocha支持ES6模块的方法实现

    这篇文章主要介绍了让mocha支持ES6模块的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js动态改变select选择变更option的index值示例

    js动态改变select选择变更option的index值示例

    今天删除多个select值的时候出现了问题,搞了半天原来是索引引起的(即删除的时候要从索引大的开始删,然后再 删除索引小的
    2014-07-07
  • 原生JS实现特效留言框

    原生JS实现特效留言框

    这篇文章主要为大家详细介绍了原生JS实现特效留言框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 面试常见的js算法题

    面试常见的js算法题

    本文主要介绍了面试常见的js算法题。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • IE下使用cloneNode注意事项分享

    IE下使用cloneNode注意事项分享

    在开发百度“地裂特效”时,发现了一些匪夷所思的 bug,第一反应是特效本身的代码与页面上原有的脚本发生了冲突,经过调试发现,问题出现在 cloneNode 的应用上
    2012-11-11

最新评论