JavaScript数组与对象遍历全解析：for in、forEach、$.each及DOM遍历技巧

JavaScript遍历方式概述

为了便于后续示例讲解，首先定义如下数组和JSON对象：


var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
  aaa: 'Javascript',
  bbb: 'Gulp',
  ccc: 'CSS3',
  ddd: 'Grunt',
  eee: 'jQuery',
  fff: 'angular'
};

for in 循环详解

for in

语法为 for(var item in arr|obj){}，该结构既可用于遍历数组，也可用于遍历对象。

在遍历数组时，item代表索引值，而 arr[item] 表示当前索引对应的元素；在遍历对象时，item代表键名（key）， arr[item] 则表示该键对应的值（value）。


(function() {
  for(var i in demoArr) {
    if (i == 2) {
      return; // 函数执行被终止
      // break; // 循环被终止
      // continue; // 循环被跳过
    };
    console.log('demoArr['+ i +']:' + demoArr[i]);
  }
  console.log('-------------');
})();

使用 for in 循环时，需注意以下几点：

在 for 循环与 for in 循环结束后，变量 i 的值会保留在作用域中，因此建议通过函数自执行等方式避免污染。此外，return、break 和 continue 的行为与常规 for 循环一致，但需注意：在函数体内使用 return 会终止整个函数的执行，包括循环外的代码；而 break 仅终止当前循环，后续代码仍会执行。


function res() {
  var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];

  for(var item in demoArr) {
    if (item == 2) {
      return;
    };
    console.log(item, demoArr[item]);
  }
  console.log('desc', 'function res'); //不会执行
}
forEach

demoArr.forEach(function(arg) {})

forEach 方法使用注意

参数 arg 代表数组中的每一项元素，具体实现如下：


demoArr.forEach(function(e) {
  if (e == 'CSS3') {
    return; // 循环被跳过
    // break;  // 报错
    // continue;// 报错
  };
  console.log(e);
})

使用 forEach 时需注意以下事项：

forEach 方法不支持遍历对象。
该方法在 Internet Explorer 中不可用，Firefox 和 Chrome 等现代浏览器已实现此方法。
forEach 无法使用 break 或 continue 跳出循环；若使用 return，其效果等同于在 for 循环中使用 continue，即跳过当前迭代。

do/while 遍历风险

do/while

具体实现方式如下，但需特别注意：当使用 continue 时，若将 i++ 放在循环体末尾，i 的值将保持不变，导致死循环。因此使用 do/while 遍历数组时需格外谨慎。

一般不建议使用 do/while 方式来遍历数组。


// 直接使用while
(function() {
  var i = 0,
    len = demoArr.length;
  while(i < len) {
    if (i == 2) {
      // return; // 函数执行被终止
      // break; // 循环被终止
      // continue; // 循环将被跳过，因为后边的代码无法执行，i的值没有改变，因此循环会一直卡在这里，慎用！！
    };
    console.log('demoArr['+ i +']:' + demoArr[i]);
    i ++;
  }
  console.log('------------------------');
})();

// do while
(function() {
  var i = 0,
    len = demo3Arr.length;
  do {
    if (i == 2) {
      break; // 循环被终止
    };
    console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
    i++;
  } while(i<len);
})();

$.each


$.each(demoArr|demoObj, function(e, ele))

$.each 与 DOMList 遍历

该方法可用于遍历数组和对象，其中 e 表示索引值或键名，ele 表示对应的值。


$.each(demoArr, function(e, ele) {
  console.log(e, ele);
})

输出结果如下：


0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"

这里有许多需要注意的细节：

使用 return 或 return true 会跳过当前循环迭代，继续执行后续循环。
使用 return false 会终止循环的执行，但不会终止整个函数的执行。
无法使用 break 与 continue 来跳过循环。

循环中的 this 值输出示例如下：


console.log(this);
//String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}

console.log(this == ele);
// true

针对上述 this 值，进行遍历测试：


$.each(this, function(e, ele) {
  console.log(e, ele);
})

// 0 c
// 1 s
// 2 s
// 4 3

为什么 length 和 [[PrimitiveValue]] 未被遍历出来？查阅《JavaScript高级编程》得知，JavaScript 内部属性中，对象数据属性的 Enumerable 被设置为 false，因此不被枚举。


// 查看length的内部属性
console.log(Object.getOwnPropertyDescriptor(this, 'length'));
// Object {value: 4, writable: false, enumerable: false, configurable: false}
$.each 中的 $(this) 与this有所不同，不过遍历结果却是一样，你可以在测试代码中打印出来看看

$(selecter).each

该方法专门用于遍历 DOMList。


$('.list li').each(function(i, ele) {
  console.log(i, ele);
  // console.log(this == ele); // true
  $(this).html(i);
  if ($(this).attr('data-item') == 'do') {
    $(this).html('data-item: do');
  };
})

i 表示序列值，ele 表示当前被遍历的 DOM 元素；this 指向当前被遍历的 DOM 元素，不能直接调用 jQuery 方法；而 $(this) 等同于 $(ele)，即当前遍历元素的 jQuery 对象，可调用 jQuery 方法进行 DOM 操作。若使用 for in 遍历 DOMList：

由于 domList 并非数组，而是一个类数组对象，其键值为 0、1、2…，因此看似与数组类似，但直接遍历的结果如下：


var domList = document.getElementsByClassName('its');
for(var item in domList) {
  console.log(item, ':' + domList[item]);
}
// 0: <li></li>
// 1: <li></li>
//  ...
// length: 5
// item: function item() {}
// namedItem: function namedItem() {}

因此，在使用 for in 遍历 domList 时，需将其转换为数组。


var res = [].slice.call(domList);
for(var item in res) {}

类似这样的对象还有函数的属性 arguments 对象。当然字符串也可以遍历，但由于字符串其他属性的 enumerable 被设置为 false，遍历结果与数组一致，无需担心此问题。小补充：

函数自执行方式补充

如果你发现有人这样写函数，无需惊慌，也不必觉得其高大上或难以理解。


+function(ROOT, Struct, undefined) {
  ... 
}(window, function() {
  function Person() {}
})

()(), !function() {}() 和 +function() {}() 是三种常见的函数自执行方式。

JavaScript中利用各种循环进行遍历的方式总结