JavaScript 各种遍历方式详解

为了方便例子讲解，现有数组和json对象如下

1. var demoArr = [

'Javascript', 
'Gulp', 
'CSS3', 
'Grunt', 
'jQuery', 
'angular']; 

1. var demoObj = { 
2.     aaa: 

'Javascript', 

1.     bbb: 

'Gulp', 

1.     ccc: 

'CSS3', 

1.     ddd: 

'Grunt', 

1.     eee: 

'jQuery', 

1.     fff: 

'angular' 

1. }; 
2.  

for 

可以直接看示例，用得太多了，很简单

1. (function() { 
2.     

for(var i=
0, len=demoArr.length; i<len; i++) { 

1.         

if (i == 
2) { 

1.             

// return;   // 函数执行被终止 

1.             

// break;    // 循环被终止 

1.             

continue; 
// 循环被跳过 

1.         }; 
2.         console.log(

'demo1Arr['+ i +
']:' + demo1Arr[i]); 

1.     } 
2. })(); 

关于for循环，有一下几点需要注意

• for循环中的i在循环结束之后任然存在与作用域中，为了避免影响作用域中的其他变量，使用函数自执行的方式将其隔离起来()();

• 避免使用for(var i=0; i<demo1Arr.length; i++){} 的方式，这样的数组长度每次都被计算，效率低于上面的方式。也可以将变量声明放在for的前面来执行，提高阅读性

1. var i = 

0, len = demo1Arr.length; 
1.
for(; i<len; i++) {}; 

• 跳出循环的方式有如下几种

• return 函数执行被终止

  • break 循环被终止

  • continue 循环被跳过

完整实例

for in

for(var item in arr|obj){} 可以用于遍历数组和对象

• 遍历数组时，item表示索引值， arr表示当前索引值对应的元素 arr[item]

• 遍历对象时，item表示key值，arr表示key值对应的value值 obj[item]

1. (function() { 
2.     

for(var i in demoArr) { 

1.         

if (i == 
2) { 

1.             

return; 
// 函数执行被终止 

1.             

// break;  // 循环被终止 

1.             

// continue;  // 循环被跳过 

1.         }; 
2.         console.log(

'demoArr['+ i +
']:' + demoArr[i]); 

1.     } 
2.     console.log(

'————-'); 

1. })(); 

关于for in，有以下几点需要注意：

• 在for循环与for in循环中，i值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。

• 使用return，break，continue跳出循环都与for循环一致，不过关于return需要注意，在函数体中，return表示函数执行终止，就算是循环外面的代码，也不再继续往下执行。而break仅仅只是终止循环，后面的代码会继续执行。

1. function res() { 
2.     var demoArr = [

'Javascript', 
'Gulp', 
'CSS3', 
'Grunt', 
'jQuery', 
'angular']; 

1.  
2.     

for(var item in demoArr) { 

1.         

if (item == 
2) { 

1.             

return; 

1.         }; 
2.         console.log(item, demoArr[item]); 
3.     } 
4.     console.log(

'desc', 
'function res'); 
//不会执行 

1. } 
2.  
3. forEach 
4.  
5. demoArr.forEach(function(arg) {}) 

参数arg表示数组每一项的元素，实例如下

1. demoArr.forEach(function(e) { 
2.     

if (e == 
'CSS3') { 

1.         

return;  
// 循环被跳过 

1.         

// break;   // 报错 

1.         

// continue;// 报错 

1.     }; 
2.     console.log(e); 
3. }) 

具体有以下需要注意的地方

• forEach无法遍历对象

• forEach无法在IE中使用，firefox和chrome实现了该方法

• forEach无法使用break，continue跳出循环，使用return时，效果和在for循环中使用continue一致

do/while

函数具体的实现方式如下，不过有一点值得注意的是，当使用continue时，如果你将i++放在了后面，那么i++的值将一直不会改变，最后陷入死循环。因此使用do/while一定要小心谨慎一点。

不建议使用do/while的方式来遍历数组

// 直接使用while 

1. (function() { 
2.     var i = 

0, 

1.         len = demoArr.length; 
2.     

while(i < len) { 

1.         

if (i == 
2) { 

1.             

// return; // 函数执行被终止 

1.             

// break;  // 循环被终止 

1.             

// continue;  // 循环将被跳过，因为后边的代码无法执行，i的值没有改变，因此循环会一直卡在这里，慎用！！ 

1.         }; 
2.         console.log(

'demoArr['+ i +
']:' + demoArr[i]); 

1.         i ++; 
2.     } 
3.     console.log(

'————————'); 

1. })(); 
2.  

// do while 

1. (function() { 
2.     var i = 

0, 

1.         len = demo3Arr.length; 
2.     

do { 

1.         

if (i == 
2) { 

1.             

break; 
// 循环被终止 

1.         }; 
2.         console.log(

'demo2Arr['+ i +
']:' + demo3Arr[i]); 

1.         i++; 
2.     } 

while(i<len); 

1. })(); 
2.  
3. $.each 
4.  
5. $.each(demoArr|demoObj, function(e, ele)) 

可以用来遍历数组和对象，其中e表示索引值或者key值，ele表示value值

$.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值输出类似如下

1. console.log(

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

1.  
2. console.log(

this == ele); 
1.
// true 

• 关于上面的this值，遍历一下

1. $.each(

this, function(e, ele) { 

1.     console.log(e, ele); 
2. }) 
3.  

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

1.  
2.     为什么length 和 [[PrimitiveValue]]没有遍历出来？突然灵光一动，在《javascript高级编程》中找到了答案，大概意思就是javascript的内部属性中，将对象数据属性中的Enumerable设置为了

false 

1.  

// 查看length的内部属性 

1. console.log(Object.getOwnPropertyDescriptor(

this, 
'length')); 
1.
// Object {value: 4, writable: false, enumerable: false, configurable: false} 

$.each 中的 $(this) 与this有所不同，不过遍历结果却是一样，你可以在测试代码中打印出来看看

$(selecter).each

专门用来遍历DOMList

1. $(

'.list li').each(function(i, ele) { 

1.     console.log(i, ele); 
2.     

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

1.     $(

this).html(i); 

1.     

if ($(
this).attr(
'data-item') == 
'do') { 

1.         $(

this).html(
'data-item: do'); 

1.     }; 
2. }) 

• i: 序列值 ele: 只当前被遍历的DOM元素

• this 当前被遍历的DOM元素，不能调用jQuery方法

• $(this) == $(ele) 当前被遍历元素的jquery对象，可以调用jquery的方法进行dom操作

使用for in 遍历DOMList

因为domList并非数组，而是一个对象，只是因为其key值为0，1，2… 而感觉与数组类似，但是直接遍历的结果如下

1. var domList = document.getElementsByClassName(

'its'); 
1.
for(var item in domList) { 

1.     console.log(item, 

':' + domList[item]); 

1. } 

// 0: <li></li> 
1.
// 1: <li></li> 
1.
//    … 
1.
// length: 5 
1.
// item: function item() {} 
1.
// namedItem: function namedItem() {} 

因此我们在使用for in 遍历domList时，需要将domList转换为数组

1. var res = [].slice.call(domList); 

for(var item in res) {} 

类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.

小补充

如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上鸟不起

1. +function(ROOT, Struct, undefined) { 
2.     … 
3. }(window, function() { 
4.     function Person() {} 
5. }) 
6.  
7. ()(), !function() {}() +function() {}() 三种函数自执行的方式^_^