2

JavaScript中遍历获取对象属性和方法主要有三种:

Object.keys()、Object.getOwnPropertyNames()、for...in...


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

  1. for...in ...会输出自身以及原型链上可枚举的属性
  2. Object.keys可以用来获取对象自身可枚举的属性键
  3. Object.getOwnPropertyNames可以用来获取对象自身的全部属性名

二、Object.keys()、Object.getOwnPropertyNames()、for...in...实际应用

1、for...in...(通过属性个数来确定循环圈数,想要遍历谁就in谁)

  • hasOwnPrototype():判断属性是否是自身的属性,返回值是Boolean类型的true和false,对于继承的属性返回的是false(过滤)
  • propertyIsEnumerable():是hasOwnProperty()的增强版,只有检测到是只有属性且这个属性的可枚举为true时它才返回true
  • in:只能判断对象是否能访问到该元素,继承过来的属性也能够访问
  • instanceof:可以用来判断某个构造函数的prototype属性是否存在于另外一个要检测对象的原型链上

    如:A instanceof B
          A对象是不是B构造函数构造出来的,看A对象的原型链上有没有B的原型

2、Object.keys() 方法(返回一个所有元素字符串类型的数组)
会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

附:如果你想获取一个对象的所有属性,甚至包括不可枚举的,即可见下面一种方法

3、Object.getOwnPropertyNames()方法
返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

附:Object.keys或用for...in循环使用时可通过hasOwnProperty()方法过滤掉获取到原型链上的可枚举属性,实现和Object.getOwnPropertyNames()方法同样的效果

三、区别数组和对象的方法

constructor、instanceof、call.tostring


Vinci
5 声望2 粉丝