JavaScript对象遍历

引言

遍历对象是日常工做中很常见的一个操做，几乎是平常操做，可是遍历对象真的是一件很容易的事情么，显然不是的。

经常使用的方式

for...in

for (variable in object) {...}

这个是一个很常见的用法，相信每一个人顺手均可以写出来。可是这里须要主要的是一段这个遍历的定义

for...in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每一个不一样的属性，语句都会被执行。

一个一个词抠吧。

对象自有的

若是一个key是对象自有的那么必定能够用obj.hasOwnProperty(prop)的返回值来判断

继承的

这个也很好理解，好比下面的例子

var parent = {a: 1};

function child() {
  this.b = 'b';
}

child.prototype = parent;

var obj = new child();

此时因为obj的原型链继承了parent，因此其实obj是有a属性的。换句话说for in会遍历对象原型链上的属性

可枚举的

什么是可枚举的详细的能够看一下这个连接
首先对象的属性分为两种，数据属性如a['b']=1，这个就是数据属性，另外一种就是访问器属性，也就是咱们用的getter。
这两种属性都有一个特性的[[Enumerable]]，这个布尔值表明了这个属性是否能够被枚举。若是一个对象的属性被设定为不可枚举，那么for in并不能够遍历到。可枚举性能够用propertyIsEnumerable来判断。

非Symbol

Symbol是什么这里不展开说了不熟悉的建议看一下es6 symbol
symbol能够被用做给某个对象作私有属性，而若是属性值是symbol类型的那么for in也是没法遍历的。

小结

综上能够明确的知道到底对象的哪些属性能够用for in去遍历出来了，坑点在基础和可枚举。数组遍历咱们会天然的去用for in，可是你们是否考虑过，数组也是一个对象，为何咱们再用for in的时候不会把数组的长度，length做为一个属性遍历到呢，缘由也就是length属性实际上是一个不可枚举属性

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。

注意点这里和for in有一个很大的区别，就是这个返回的是对象自身可枚举属性组成的数组，不包含继承

var parent = {a: 1};

function child() {
  this.b = 'b';
}

child.prototype = parent;

var obj = new child();
Object.keys(obj);  //['b']

Object.getOwnPropertyNames(obj)与Object.getOwnPropertySymbols(obj)

getOwnPropertyNames方法返回一个由指定对象的全部自身属性的属性名（包括不可枚举属性但不包括Symbol值做为名称的属性）组成的数组。
getOwnPropertySymbols方法返回一个给定对象自身的全部 Symbol 属性的数组。
关键词，全部的，自身的。这两个方法不受是否可枚举属性的限制，并且是只返回自身的，因此Object.getOwnPropertyNames的返回值必定是包含了Object.keys的返回值

Reflect.ownKeys(obj)

Reflect.ownKeys 方法返回一个由目标对象自身的属性键组成的数组。它的返回值等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。

for...of

接下来讲说另外一种遍历的方案。for of 与for in 不一样的就是for of是在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上建立一个迭代循环，调用自定义迭代钩子，并为每一个不一样属性的值执行语句。下面仍是进入抠关键词的阶段

可迭代对象

什么是可迭代对象？遵循有可迭代协议的对象成为可迭代对象，用人话说就是一个对象若是有[Symbol.iterator]，那么他就是可迭代对象。Symbol.iterator是es6提供了 1个内置的 Symbol 值。
iterator简单说就是一个有一个next函数，这个函数执行的返回值必定是一个对象，对象有两个属性done标记迭代是否结束，value标记此次迭代的结果值。

如何用for...of遍历对象

综上所述也就是说给你的要遍历的对象增长一个Symbol.iterator就能够了

拓展运算符

除了上面说的还想再补充一种遍历的场景,对象的拓展运算符，那么对象的拓展运算符到底是有哪些属性能够被赋值。
自身的，可枚举的。能够看两个例子

var obj = {}
Object.defineProperty(obj, 'key', {
    enumerable: false,
      configurable: true,
      writable: true,
  value: "a"
});
b = {...obj};
console.log(b); //{}

能够看到不可枚举属性在解构赋值中是不可被赋值的。

var parent = {a: 1};

function child() {
  this.b = 'b';
}

child.prototype = parent;

var obj = new child();
var b = {...obj};  
console.log(b);//{b: 'b'}

能够看到继承的属性在解构赋值中是不可被赋值的。

总结

对象的遍历方法不少，可是要根据具体对象属性的特征和应用场景，还有兼容性来选择最适合的遍历方案。