JavaScript中利用各種循環(huán)進行遍歷的方式總結
為了方便例子講解，現(xiàn)有數(shù)組和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(var item in arr|obj){} 可以用于遍歷數(shù)組和對象
遍歷數(shù)組時，item表示索引值， arr表示當前索引值對應的元素 arr[item]
遍歷對象時，item表示key值，arr表示key值對應的value值 obj[item]
(function() {
for(var i in demoArr) {
if (i == 2) {
return; // 函數(shù)執(zhí)行被終止
// break; // 循環(huán)被終止
// continue; // 循環(huán)被跳過
};
console.log('demoArr['+ i +']:' + demoArr[i]);
}
console.log('-------------');
})();
關于for in，有以下幾點需要注意：
在for循環(huán)與for in循環(huán)中，i值都會在循環(huán)結束之后保留下來。因此使用函數(shù)自執(zhí)行的方式避免。
使用return，break，continue跳出循環(huán)都與for循環(huán)一致，不過關于return需要注意，在函數(shù)體中，return表示函數(shù)執(zhí)行終止，就算是循環(huán)外面的代碼，也不再繼續(xù)往下執(zhí)行。而break僅僅只是終止循環(huán)，后面的代碼會繼續(xù)執(zhí)行。
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'); //不會執(zhí)行
}
forEach
demoArr.forEach(function(arg) {})
參數(shù)arg表示數(shù)組每一項的元素，實例如下
demoArr.forEach(function(e) {
if (e == 'CSS3') {
return; // 循環(huán)被跳過
// break; // 報錯
// continue;// 報錯
};
console.log(e);
})
具體有以下需要注意的地方
- forEach無法遍歷對象
- forEach無法在IE中使用，firefox和chrome實現(xiàn)了該方法
- forEach無法使用break，continue跳出循環(huán)，使用return時，效果和在for循環(huán)中使用continue一致
do/while
函數(shù)具體的實現(xiàn)方式如下，不過有一點值得注意的是，當使用continue時，如果你將i++放在了后面，那么i++的值將一直不會改變，最后陷入死循環(huán)。因此使用do/while一定要小心謹慎一點。
不建議使用do/while的方式來遍歷數(shù)組
// 直接使用while
(function() {
var i = 0,
len = demoArr.length;
while(i < len) {
if (i == 2) {
// return; // 函數(shù)執(zhí)行被終止
// break; // 循環(huán)被終止
// continue; // 循環(huán)將被跳過，因為后邊的代碼無法執(zhí)行，i的值沒有改變，因此循環(huán)會一直卡在這里，慎用??！
};
console.log('demoArr['+ i +']:' + demoArr[i]);
i ++;
}
console.log('------------------------');
})();
// do while
(function() {
var i = 0,
len = demo3Arr.length;
do {
if (i == 2) {
break; // 循環(huán)被終止
};
console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
i++;
} while(i<len);
})();
$.each(demoArr|demoObj, function(e, ele))
可以用來遍歷數(shù)組和對象，其中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為跳過一次循環(huán)，繼續(xù)執(zhí)行后面的循環(huán)
- 使用return false為終止循環(huán)的執(zhí)行，但是并不終止函數(shù)執(zhí)行
- 無法使用break與continue來跳過循環(huán)
循環(huán)中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的內部屬性中，將對象數(shù)據(jù)屬性中的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并非數(shù)組，而是一個對象，只是因為其key值為0，1，2… 而感覺與數(shù)組類似，但是直接遍歷的結果如下
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時，需要將domList轉換為數(shù)組
var res = [].slice.call(domList);
for(var item in res) {}
類似這樣的對象還有函數(shù)的屬性arguments對象，當然字符串也是可以遍歷的，但是因為字符串其他屬性的enumerable被設置成了false，因此遍歷出來的結果跟數(shù)組是一樣的，也就不用擔心這個問題了.
小補充
如果你發(fā)現(xiàn)有些人寫函數(shù)這樣搞，不要驚慌，也不要覺得他高大上鳥不起
+function(ROOT, Struct, undefined) {
...
}(window, function() {
function Person() {}
})
()(), !function() {}() +function() {}() 三種函數(shù)自執(zhí)行的方式^_^
- javascript先序遍歷DOM樹的方法
- Node.js本地文件操作之文件拷貝與目錄遍歷的方法
- JS遍歷數(shù)組及打印數(shù)組實例分析
- JSON遍歷方式實例總結
- js實現(xiàn)遍歷含有input的table實例
- javascript for-in有序遍歷json數(shù)據(jù)并探討各個瀏覽器差異
- 詳解javascript遍歷方式
- JavaScript簡單遍歷DOM對象所有屬性的實現(xiàn)方法
- javascript實現(xiàn)網頁子頁面遍歷回調的方法（涉及 window.frames、遞歸函數(shù)、函數(shù)上下文）
- JavaScript中循環(huán)遍歷Array與Map的方法小結
相關文章
JavaScript Break 和 Continue區(qū)別教程
JavaScript Break 和 Continue區(qū)別教程...2007-04-04
本文內容講的是:JS保存和刪除cookie操作,判斷cookie是否存在的方法2013-11-11
DOM 節(jié)點屬性操作方法小結。2009-05-05
JavaScript字符串對象fromCharCode方法入門實例（用于把Unicode值轉換為字符串）
這篇文章主要介紹了JavaScript字符串對象fromCharCode 方法入門實例,fromCharCode用于把Unicode值轉換為字符串,需要的朋友可以參考下2014-10-10
今天特地花了一點時間整理了下height, top的區(qū)別，本篇主要以chrome為準，可能各個瀏覽器之間還是有一些區(qū)別，需要的朋友可以參考下2015-09-09
JavaScript入門教程(8) Location地址對象
location 地址對象 它描述的是某一個窗口對象所打開的地址。要表示當前窗口的地址，只需要使用“l(fā)ocation”就行了2009-01-01
大家可能看到了，我已經將過去寫的兩篇jQuery的教程刪掉了，因為附件不存在了等等問題，所以刪除了，從今天開始我就寫jQuery教程第二版了！希望大家能夠支持我！2010-02-02
javascript數(shù)組操作(創(chuàng)建、元素刪除、數(shù)組的拷貝)
這篇文章主要介紹了javascript數(shù)組操作，包括創(chuàng)建、元素的訪問、元素刪除、數(shù)組的拷貝等操作，還有其它示例,需要的朋友可以參考下2014-04-04
本文從上一篇文章結束的地方開始，解釋其他的一些基本的JavaScript語言概念，繼續(xù)為初學者提供對語言的基礎理解2011-10-10
下面小編就為大家?guī)硪黄猨avascript的幾種寫法總結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09