前端基础之For in遍历与hasOwnProperty()

最新推荐文章于 2025-03-07 10:19:31 发布

像八戒的程序猴

最新推荐文章于 2025-03-07 10:19:31 发布

阅读量994

点赞数 1

分类专栏：前端基础知识文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_42024074/article/details/122097347

版权

前端基础知识专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中的for...in遍历和hasOwnProperty()方法。for...in主要用于遍历对象属性，不适合数组，而hasOwnProperty()用于判断属性是否为对象的自有属性。文章通过示例展示了两者在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 For in 遍历

for … in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用

示例

下面的函数接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
 // console.log("obj." + prop + " = " + obj.prop);  //值都是undefined
  console.log("obj." + prop + " = " + obj[prop]);
  // "obj.a = 1"
  // "obj.b = 2"
  // "obj.c = 3"
}

注意：在其他地方访问属性可以用点.的方式，但是在for in遍历必须用中括号【】，如果不用中括号，会认为prop也是一个属性，所以都是undefined。

二、hasOwnProperty() 方法详解

hasOwnProperty(propertyName)是用来检测属性是否为对象的自有属性，如果是，返回true，否者false; 参数propertyName指要检测的属性名；

示例

let obj = {
    name:'张',
    age:18,
    eat:{
        eatname:'面',
        water:{
            watername:'水'
        }
    }
}
console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('age'))  //true
console.log(obj.hasOwnProperty('eat'))  //true
console.log(obj.hasOwnProperty('eatname'))  //false
console.log(obj.hasOwnProperty('water'))  //false
console.log(obj.hasOwnProperty('watername'))  //false
console.log(obj.eat.hasOwnProperty('eatname'))  //true
console.log(obj.eat.hasOwnProperty('water'))  //true
console.log(obj.eat.hasOwnProperty('watername'))  //false
console.log(obj.eat.water.hasOwnProperty('watername'))  //true

注意：hasOwnProperty() 只会检查对象的自有属性，对象原形上的属性其不会检测；但是对于原型对象本身来说，这些原型上的属性又是原型对象的自有属性，所以原形对象也可以使用hasOwnProperty()检测自己的自有属性；

三、一般for in与hasOwnProperty是配套存在的

示例

			var obj1 = {
				a:1,
				b:2,
				c:3,
				__proto__:{
					lastName:"li"
				}
				
			};
			for (let prop in obj1){
				if (obj1.hasOwnProperty(prop)) {
					console.log(obj1[prop]); //遍历出 1 ，2 ，3 ，但没有继承来的属性__proto__的值lastName:"li"
				}
			}