[JavaScript知识库]前端基础之For in遍历与hasOwnProperty()

一、 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"
				}
			}