js 中遍历获取对象属性 /迭代对象

js中遍历获取对象属性和方法主要有Object.keys()、Object.getOwnPropertyNames()、for...in...三种方式

1、Object.keys()、1、1、Object.getOwnPropertyNames()、for...in...区别

1、1 for in会输出自身以及原型链上可枚举的属性。

          for (variable in object) {...}
           variable  在每次迭代时，将不同的属性名分配给变量。   object    被迭代枚举其属性的对象。

           通常，在迭代过程中最好不要在对象上进行添加、修改或者删除属性的操作，除非是对当前正在被访问的属性。
           for...in不应该用于迭代一个 Array，其中索引顺序很重要。

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

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

//下面的函数说明了hasOwnProperty()的用法：继承的属性不显示。
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)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Output:
// "obj.color = red"

1、2 与for of的区别

          for (variable of iterable) {
           //statements  variable  在每次迭代中，将不同属性的值分配给变量。   iterable  被迭代枚举其属性的对象。
         }

 

2、Object.keys用来获取对象自身可枚举的属性键。

3、Object.getOwnPropertyNames用来获取对象自身的全部属性名

2、可枚举属性和不可枚举属性

 在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。

一、怎么判断属性是否可枚举

  js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，如果你写出这样的代码遍历其中的属性：

1 2 3 4

var num = new Number(); for(var pro in num) {     console.log("num." + pro + " = " + num[pro]); }

它的输出结果会是空。这是因为Number中内置的属性是不可枚举的，所以不能被for…in访问到。

Object对象的propertyIsEnumerable()方法可以判断此对象是否包含某个属性，并且这个属性是否可枚举。

需要注意的是：如果判断的属性存在于Object对象的原型内，不管它是否可枚举都会返回false。