js 各种循环遍历

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

• js 各种循环遍历（表格比较）

• for...in 遍历数组的缺点：

1. 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
2. for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
3. 某些情况下，for…in循环会以任意顺序遍历键名。

• 遍历是否保证顺序

• es6 新推出的 for...of 循环方式，性能和 for 循环差不多，推荐使用 for...of 遍历数组和对象
  
  for...of 遍历对象：

let obj = {name: 'jeff', age: 20, sex: 'male'}
// 对于普通的对象，for...in循环可以遍历键名，for...of循环会报错(因为没有部署 Iterator 接口)。
// 一种解决方法是，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。
for (let key of Object.keys(obj)) {
console.log(key + ' : ' + obj[key])
}


for...of 遍历数组：

let arr = [1, 2, 3]
for (let item of arr) {
console.log(item)
}


• for...in 遍历（当前对象及其原型上的）每一个属性名称,而 for...of 遍历（当前对象上的）每一个属性值

• js有如下两种数据需要经常遍历
  
  数组(Array)
  
  对象(Object)

• 同时又提供了如下8种方法方便我们遍历元素
  
  for
  
  while(或do~while)
  
  forEach
  
  for in
  
  $.each
  
  $(selecter).each
  
  map
  
  every

• for循环只能遍历数组, 不能遍历对象. 写for循环时有两点需要注意:

1. 其一, 为了避免遍历时执行多遍计算数组长度的操作, 影响效率, 建议在循环开始以变量的形式缓存下数组长度, 若在循环内部有可能改变数组长度, 请务必慎重处理, 避免数组越界.
2. JavaScript中并没有类似java的块级作用域, for循环内部定义的变量会直接暴露在外(如 i,循环退出后,i变量将等于数组长度, 后续代码将能访问到 i 变量的值), 因此建议将for循环置于闭包内. 特别要注意的是: 如果在循环内部, 前一个元素的遍历有可能影响到后一个元素的遍历, 那么for循环内部方法也需要置于闭包之内.

• do/while的语法简化了循环的实现, 只保留对循环条件的判断, 所以我们要在循环内部构造出循环退出的条件, 否则有可能造成死循环.
  
  特别要注意的是: 使用 continue 跳出本次遍历时, 要保证循环能够自动进入到下一次遍历, 因此保证循环走到下一次遍历的语句需要放到 continue 前面执行, 建议置于循环头部.(如上, i++ 语句最好放置循环头部)
  
  do/while 循环与for循环大体差不多,只支持数组遍历, 多用于对循环退出条件不是很明确的场景. 一般来说不建议使用这种方式遍历数组.

• forEach回调function默认有三个参数: item, index, array.
  
  使用forEach循环有几点需要特别注意:
  
  forEach无法遍历对象
  
  forEach无法在IE中使用，只是在firefox和chrome中实现了该方法
  
  forEach无法使用break，continue跳出循环，使用return时，效果和在for循环中使用continue一致

• for in 可用于遍历数组和对象, 但它输出的只是数组的索引和对象的key, 我们可以通过索引和key取到对应的值.
  
  会循环遍历对象自身的和继承的可枚举属性。
  
  Object.keys：可以规避掉遍历原型上的可枚举属性，但依旧不能保证遍历的顺序

for (var index in myArray) {
console.log(myArray[index]);
}


这样不好，因为：

1. 上面代码中的 index 变量将会是 "0"、"1"、"3" 等这样的字符串，而并不是数值类型。如果你使用字符串的 index 去参与某些运算（"2" + 1 == "21"），运算结果可能会不符合预期。
2. 不仅数组本身的元素将被遍历到，那些由用户添加的附加（expando）元素也将被遍历到，例如某数组有这样一个属性 myArray.name，那么在某次循环中将会出现 index="name" 的情况。而且，甚至连数组原型链上的属性也可能被遍历到。
3. 最不可思议的是，在某些情况下，上面代码将会以任意顺序去遍历数组元素。
   
   简单来说，for-in 设计的目的是用于遍历包含键值对的对象，对数组并不是那么友好。

• map
  
  即 Array.prototype.map,该方法只支持数组
  
  语法: array.map(callback[,thisArg]) map方法使用其提供函数的每次返回结果生成一个新的数组.
  
  目前map方法被大部分浏览器支持, 除了IE 6,7,8.

• every
  
  即 Array.prototype.every, 该方法同上述map方法也只支持数组
  
  语法: arr.every(callback[, thisArg]) every 方法用于检验数组中的每一项是否符合某个条件, 若符合则放回true, 反之则返回false.

• 遍历数组和对象的8种方法, 小结如下:
  
  for in , $.each , $().each 既支持对象也支持数组遍历;
  
  for , do/while , forEach 只支持数组;
  
  Array.prototype.map, Array.prototype.every 只支持数组和形似数组的对象;
  
  forEach不能退出循环,只能通过return来进入到下一个元素的遍历中(相当于for循环的continue), 且在IE没有实现该方法;
  
  $.each和$().each循环只能通过return false 来退出循环, 使用return 或 return true 将跳过一个元素, 继续执行后面的循环.

• 各方法运行需要的时间大致排序如下:
  
  for ~= do while < forEach ~= map ~= every < $.each < $(e).each < for in

• 根据统计数据, 可得这8个方法的运行速度大致排序为:
  
  for 与 do while
  
  forEach map every (这3个不相上下,可认为运行速度差不多)
  
  $.each
  
  $(e).each
  
  for in
  
  我们翻看jquery代码就会知道, $.each方法内部通过调用for循环来实现, 而$().each是先用jquery包裹数组对象, 然后再调用for循环, 因此后者效率略低于前者.
  
  综上, 最佳遍历选手是 for/do while循环, 推荐大家优先考虑使用它. ( Firefox浏览器由于对forEach循环做了底层优化, 效率接近native,不在我们考虑范围内 ).

• 参考链接：http://louiszhai.github.io/2015/12/18/traverse/
  
  http://bubkoo.com/2015/06/15/es6-in-depth-iterators-and-the-for-of-loop/