枚举对象中的属性

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qiuqiula_/article/details/100107529

枚举对象中的属性：for ... in  

循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。

语法：for （var  变量  in  对象）{

...

}

对象中有几个属性(包括继承自其构造函数的原型的可枚举的属性)，循环体就会有执行几次。

var obj = {
    name:"Tom",
    age:18,
    gender:male
};

for (var n in obj){
    console.log("hello");
    console.log(n);
    console.log(obj);
    console.log(obj[n]);
    console.log(obj.n);

}

//输出：hello
//     name
//     Object { name: "Tom", age: 18, gender: "male" }
//     "Tom"
//     undefined

//     hello
//     age
//     Object { name: "Tom", age: 18, gender: "male" }
//     18
//     undefined

//     hello
//     gender
//     Object { name: "Tom", age: 18, gender: "male" }
//     male
//     undefined
//因为obj对象中有三个属性，所以for...in里面的语句执行三次，每次迭代时会将对象中的属性名赋值给变量n,因为n是一个变量，所以访问属性要采用[]的方式访问，而obj.n中的n是属性名，而obj没有定义该属性，结果为undefined

MDN文档中 for...in 的例子：让构造函数的原型指向 triangle 对象，该对象有三个属性：a , b , c。

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

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {  //hasOwnProperty(prop)检查该属性是否是obj自身属性
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// 输出:
// "obj.color = red"

console.log(obj.__proto__);

//输出：
//Object { a: 1, b: 2, c: 3 }

for (var prop in obj) {
    console.log(`obj.${prop} = ${obj[prop]}`);
}

// 输出:
// "obj.color = red"
//"obj.a = 1"
//"obj.b = 2"
//"obj.c = 3"