JavaScript中对象的枚举/遍历(enumeration)

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

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


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

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

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

一、for...in...(经过属性个数来肯定循环圈数,想要遍历谁就in谁)数组

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

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

二、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']

附:若是你想获取一个对象的全部属性,甚至包括不可枚举的,便可见下面一种方法this

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

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()方法一样的效果code

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

constructor、instanceof、call.tostring对象

相关文章
相关标签/搜索