js遍历数组和对象的方法比较

数组遍历选用的顺序：基础for循环 ＞ for of 、map、filter > forEach > for in
对象遍历选用的顺序：for in > 先获得key数组再基础循环
不过获得的方法有两种：Object.keys，Object.getOwnProperty
Object.keys获取所有key、包括父对象的，Object.getOwnProperty只获取自己的key

循环是一个“攻城狮”必备的能力，供我们选择的循环方法有很多，所以大部分的时候就是想到什么方法就用什么方法，今天总结一下js中常用的循环方法，还有这些方法的适用场景，以及他们的效率。
js中遍历的对象无非两种：数组，对象。后面的循环中统一使用一个长度是1×10八次方的数组，和一个长度是1×10八次方的对象分析比较他们的效率。

一、最普通的for循环

这种循环是可以通过return，break，continue中断的，比较灵活，而且效率较高

for(var i = 0;i < arr.length; i++){}

先是遍历了一下数组，数组长度9位数时间是117ms，

 for (var i = 0; i< arr.length; i++) {
      sum += i
 }

对象长度7位数，遍历对象时间498ms

  var objkeys = Object.keys(obj)
  var sum = 0
  for (var i = 0; i< objkeys.length; i++) {
       sum += obj[objkeys[i]]
  }

二、稍微优化一下普通的for循环

这种循环也是可以通过return，break，continue中断的，比较灵活，而且效率较高

循环之前先计算出长度，不用每次都去获取length
var len = arr.length
for (var i = 0; i< len; i++) {}

长度是9位数的数组用时115ms，长度是7位数的对象用时495ms，不过如果长度小的话表现不明显。

三、for in

这种循环特别慢，因为9位数长度的数组循环不出结果我改成8位，用时1s，算下来比普通的for慢了有100倍，数组循环尽量少使用吧。

for (var arri in arr) {
sum += Number(arri)
}

遍历长度为7位数的对象用时174ms，比普通的方法表现优异，我感觉好像是因为普通循环要先获取对象的key值数组导致的时间延迟。所以遍历对象的时候可以用的。

四、for of

听网上说这种方法优化了for in 提高了效率，而且可以在循环中中断看上去也简洁

for (var arri of arr) {
sum += arri
}

遍历9位数长度的数组用时1225ms，虽然比不上普通的for循环，但是比for in确实好了太多了
for of 不能遍历对象，遍历时报错：Uncaught TypeError: obj[Symbol.iterator] is not a function

五、forEach()

arr.forEach((item, index, arr) => { // item为arr的元素，index为下标，arr原数组
sum += item
});

很明显，这是一个方法，这是数组自身的方法，效率还行，数组用时2710ms,但是循环的时候不能通过return，break，continue中断。对象用不了这个方法。

六、 filter()

通过名字能大概知道这个函数是用来做过滤的，筛选出符合要求的数组元素

arr.filter(item => { // item为数组当前的元素
return item > 1; // [2, 3]
})

还是刚才的数组，全部筛选一遍要十几秒，用的时候慎重，同样的数组方法，对象不能用

七、map()

和filter一样会返回一个数组，一般用来深copy

arr.map(item => { // item为数组的元素
console.log(item); // 1, 2, 3
return item * 2; // 返回一个处理过的新数组[2, 4, 6]
})

上面的数组也是要用十几秒，如果是对数组中的每一个元素做处理的话用这个还是很优雅的，比如数组中的每一个元素求平方之类的。对象不能使用。
所以最后总结一下如果不考虑特殊使用的话
数组遍历选用的顺序：基础for循环 ＞ for of 、map、filter > forEach > for in
对象遍历选用的顺序：for in > 先获得key数组再基础循环
不过获得的方法有两种：Object.keys，Object.getOwnProperty
Object.keys获取所有key、包括父对象的，Object.getOwnProperty只获取自己的key