一、对象遍历方法

1.for…in

for...in主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。语法如下：

for (let i in obj){执行的代码块
}

其中两个参数：

i：必须。指定的变量可以是数组元素，也可以是对象的属性
obj：必须。指定的迭代的对象

let obj={a:1,b:2,c:3}for (let i in obj){console.log('键名：',i)console.log('键值：',obj[i])
}

⚠️：

for...in 方法不仅会遍历当前对象的可枚举属性，还会遍历其原型链上的属性

2.Object.keys()、Object.values()、Object.entries()

这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性(不含继承的和Symbol属性)组成的数组，数组元素的排列顺序和正常循环遍历该对象时返回的顺序一致，三个元素返回的值分别如下：

Object.keys()：返回包含对象键名的数组
Object.values()：返回包含对象键值的数组
Object.entries()：返回包含对象键名和键值的数组

let obj={id:1,name:'hello',age:18
}console.log(Object.keys(obj)) //['id','name','age']console.log(Object.values()) //[1,'hello',18]console.log(Object.entries()) //[['id',1],['name','hello'],['age',18]]

⚠️：

Object.keys()方法返回的数组中的值都是字符串，也就是说不是字符串的key值会转化为字符串
结果数组中的属性值都是对象本身可枚举的属性，不包括继承来的属性

3.Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法与Object.keys()类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它不能返回不可枚举的属性。

let a=['hello','word']Object.keys(a) //['0','1']
Object.getOwnPropertyNames(a) //['0','1','length']

这两个方法都可以计算对象中属性的个数：

let a={0:'a',1:'b',2:'c'}Object.getOwnPropertyNames(a) //['0','1','2']Object.keys(a).length //3Object.getOwnPropertyNames(a).length //3

4.Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols()方法返回对象自身的Symbol属性组成的数组，不包括字符串属性：

let obj={a:1}//给对象添加一个不可枚举的Symbol属性
Object.getOwnPropertySymbols(obj,{[Symbol('zhu')]:{value: 'Symbol zhu',enumerable: false}
})//给对象添加一个可枚举的Symbol属性
obj[Symbol('yu')]='Symbol yu'Object.getOwnPropertySymbols(obj).forEach(key=>{console.log(obj[key]) //Symbol zhu  Symbol yu
})

5.Reflect.ownKeys()

Reflect.ownKeys()返回一个数组，包含对象自身的属性。它和Object.keys()类似，Object.keys()返回属性key，但是不包括不可枚举的属性，而Reflect.ownKeys()会返回所有属性key：

let obj={a:1,b:2
}Object.defineProperty(obj,'method',{value:function(){alert('non enumerable property')},enumerable:false
})console.log(Object.keys(obj)) //['a','b']console.log(Reflect.ownKeys(obj))  //['a','b','method']

⚠️：

Object.keys()：相当于返回对象属性数组
Reflect.ownKeys()：相当于Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj))

总结如下：

对象方法	遍历基本属性	遍历原型链	遍历不可枚举属性	遍历Symbol
for…in	是	是	否	否
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	否	是	否
Object.getOwnPropertySymbols()	否	否	否	是
Reflect.ownKeys()	是	否	是	是

JS——遍历对象方法总结相关推荐

js 遍历对象方法大全
目录前言键值对遍历(推荐) 键遍历值遍历尾言前言记录一下js遍历对象的方法,做个分类比较好记. 键值对遍历(推荐) 同时得到键(key)和值(value) for (let [key, v ...
js遍历对象方法总结
遍历对象复制代码 let obj = {a:1,b:true,c:"hello" } 复制代码方法一:通过Object.keys(obj)遍历返回一个数组,包括对象自身的(不含 ...
遍历对象属性_细说JS遍历对象属性的N种方法
本人详细介绍了JS遍历对象N种方法,欢迎关注收藏. 遍历对象属性有五种方法,下图为一个场景对比图. 可以注意到两点: 只有for ... in 才可以遍历原型链属性,且只能遍历可枚举属性. Objec ...
js遍历对象的几种方法
js遍历对象的几种方法第一种: for......in const obj = {id:1,name:'zhangsan',age:18 }for(let key in obj){console.l ...
js遍历对象(js遍历对象的所有属性)
js 遍历对象的3种方法第一种: for......in const obj = { id:1, name:'zhangsan', age:18 } for(let key i ...
分支结构||分支循环结构||使用原生js遍历对象
分支循环结构分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...
js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1.给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...
JS遍历对象的七种方法
我根据阮老师的<ES6标准入门>学习并总结了七种遍历对象的方法,我会将分别介绍这七种方法并进行详细的区分,并将从属性可枚举性问题与遍历方法两个大方面讲述全文,其中可枚举性是掌握遍历对象之前 ...
js 遍历对象的方式
1. for in 循环 for in 循环诞生于es5,主要用于遍历对象的可枚举属性(自有属性.继承自原型的属性).可枚举,可理解为可遍历,是由属性的enumerable值决定的,在js中基本包 ...

JS——遍历对象方法总结

遍历对象方法