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 == 自有可枚举属性1job2 == 自有可枚举属性2name == 继承可枚举属性*/

Object.keys

获取对象自身所有可枚举属性（不包括Symbol类型）组成的数组

代码清单3

Object.keys(obj).map((attr)=>{    console.log(attr,"==",obj[attr]);});/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2*/

Object.getOwnPropertyNames

获取对象自身所有类型为非Symbol的属性名称（包括不可枚举）组成的数组

代码清单4

Object.getOwnPropertyNames(obj).map((attr)=>{    console.log(attr,"==",obj[attr]);});/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2address == 自有不可枚举属性*/

Object.getOwnPropertySymbols

获取对象自身所有类型为Symbol的属性名称（包括不可枚举）组成的数组

代码清单5

Object.getOwnPropertySymbols(obj).map((attr)=>{    console.log(attr,"==",obj[attr]);});/*Symbol(自有可枚举symbol) == 自有可枚举symbolSymbol(自有不可枚举symbol) == 自有不可枚举symbol*/

Reflect.ownKeys

获取一个对象的自身的所有（包括不可枚举的和Symbol类型）的属性名称组成的数组

代码清单6

Reflect.ownKeys(obj).map((attr)=>{    console.log(attr,"==",obj[attr]);});/*job1 == 自有可枚举属性1job2 == 自有可枚举属性2address == 自有不可枚举属性Symbol(自有可枚举symbol) '==' '自有可枚举symbol'Symbol(自有不可枚举symbol) '==' '自有不可枚举symbol'*/

总结

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

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