js 遍历对象

最新推荐文章于 2025-10-24 20:12:53 发布

原创最新推荐文章于 2025-10-24 20:12:53 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了JavaScript中遍历对象的五种方式：for...in...、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()和Reflect.ownKeys()。详细讲解了它们的区别和应用场景，如for...in...包含原型链的可枚举属性，Object.keys()获取可枚举属性，getOwnpropertyNames()获取所有属性名（包括不可枚举），getOwnPropertySymbols()获取Symbol属性，而Reflect.ownKeys()则获取所有属性（包括不可枚举和Symbol）。此外，还讨论了属性的可枚举性和如何判断属性是否可枚举。

----------------------------------------------------------------------------------------------------------------------------

以下为2022年5月16日更新

遍历对象的方式

1.for..in..

2.Object.keys

3.Object.getOwnPropertyNames()

4.Object.getOwnPropertySymbols()

5.Reflect.ownKeys()

对象的属性划分：

1.原型属性

2.对象自身可枚举属性

3.对象自身不可枚举属性

4.symbol属性

想了解什么是自身可枚举属性和不可枚举属性，查看下方连接

对象自身可枚举属性和不可枚举属性https://blog.youkuaiyun.com/xiaoyugan000/article/details/124793989?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165267903416782388051998%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165267903416782388051998&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-124793989-null-null.142^v9^control,157^v4^control&utm_term=%E4%BB%80%E4%B9%88%E6%98%AF%E5%AF%B9%E8%B1%A1%E8%87%AA%E8%BA%AB%E5%8F%AF%E6%9E%9A%E4%B8%BE%E5%B1%9E%E6%80%A7%E5%92%8C%E4%B8%8D%E5%8F%AF%E6%9E%9A%E4%B8%BE%E5%B1%9E%E6%80%A7&spm=1018.2226.3001.4187es6新添class 类关键字，类的内部定义的方法都是不可枚举的

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"

一、for...in..

获取对象自身的可枚举属性+原型链上的可枚举属性但不包含symbol属性

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		


		for(var key in obj){
			console.log(key,obj[key])
		}

bar原型属性和foo 对像自身可枚举属性被输出

如果不希望原型链上的属性被输出，可配合hasOwnProperty使用

hasOwnProperty（）：这个方法会查找一个对象有没有某个属性，但不会在原型链上找

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		for(var key in obj){
			if(obj.hasOwnProperty(key)){
				console.log(key,obj[key])
			}
			
		}

可以看到原型属性被过滤掉了。

关于for...in...的属性输出顺序

1.大于等于0的整数会按照小到大顺序输出，负数和小数会按照字符串处理

2.字符串类型会按照定义的顺序进行输出

3.Symbol属性不进行输出

二、Object.keys()

es5版本新增

获取对象自身的可枚举属性，不包含原型链上的可枚举属性和Symbol属性

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		Object.keys(obj).forEach(key=>{
			console.log(key,obj[key])
		})

只输出了自身的可枚举属性foo

Object.keys()的属性输出顺序同for...in...相同

三、getOwnpropertyNames()

es5版本新增

获取对象自身的所有属性名，包含不可枚举属性，但不包括原型链上的属性和Symbol属性。

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		Object.getOwnPropertyNames(obj).forEach(key=>{
			console.log(key,obj[key])
		})

如何判断对象属性是否为可枚举属性

1.Object.getOwnPropertyDescriptor(对象，’属性‘)

Object.getOwnPropertyDescriptor(对象，’属性‘)方法会返回一个描述对象，描述对象中的enumerable属性若为ture则说名是可枚举属性。

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		console.log(Object.getOwnPropertyDescriptor(obj,'foo'))
		console.log(Object.getOwnPropertyDescriptor(obj,'name'))

2.Object.prototype.propertyIsEnumerable()

obj.propertyIsEnumerable(要判断的属性) 会返回布尔值，true为可枚举属性。

        //原型属性
		const obj = Object.create({
			bar:'bar'
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		console.log(obj.propertyIsEnumerable('foo'))
		console.log(obj.propertyIsEnumerable('name'))

四、Object.getOwnPropertySymbols()

es6版本新增

获取对象自身的所有Symbol属性，不包含原型链上的Symbol属性

      //原型属性
		const obj = Object.create({
			bar:'bar',
			[Symbol('sex')]:"sex"
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		Object.getOwnPropertySymbols(obj).forEach(key=>{
			console.log(key,obj[key])
		})

原型上的Symbol属性并没有输出

五、reflect.ownKeys（）

es6新增

获取对象自身的所有属性名，包括不可枚举属性和Symbol属性，不包括原型链

        //原型属性
		const obj = Object.create({
			bar:'bar',
			[Symbol('sex')]:"sex"
		})
		//对象自身可枚举属性
		obj.foo = "foo"
		//对象自身不可枚举属性
		Object.defineProperty(obj,'name',{
			enumerable:false,
			value:'zs'
		})
		//symbol属性
		obj[Symbol('age')]="age"
		
		Reflect.ownKeys(obj).forEach(key=>{
			console.log(key,obj[key])
		})