js遍歷與jQuery遍歷
js遍歷數組和對象
for...
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
(function() {
for(var i=0, len=demoArr.length; i<len; i++){
console.log('demo1Arr['+i+']:'+demo1Arr[i]);
}
})();
- for循環中的i在循環結束之后任然存在與作用域中，為了避免影響作用域中的其他變量，使用函數自執行的方式將其隔離起來()();
- 避免使用for(var i=0; i 的方式，這樣的數組長度每次都被計算，效率低于上面的方式。也可以將變量聲明放在for的前面來執行，提高閱讀性
var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};
for...in...
for(var item in arr|obj){} 可以用于遍歷數組和對象
遍歷數組時，item表示索引值， arr表示當前索引值對應的元素 arr[item]
遍歷對象時，item表示key值，arr表示key值對應的value值 obj[item]
遍歷數組：
(function() {
for(var i in demoArr) {
console.log("demoArr[i]:" + demoArr[i]);
}
})();
遍歷對象：
var man ={hands:2,legs:2,heads:1};
for(var i in man){
if (man.hasOwnProperty(i)) { //filter,只輸出man的私有屬性
console.log(i,":",man[i]);
};
}
//輸出結果為print hands:2,legs:2,heads:1
for(var i in man) {
//不使用過濾
console.log(i,":",man[i]);
}
//輸出結果為
//hands : 2
//legs : 2
//heads : 1
forEach...只能遍歷數組
demoArr.forEach(function(val, index) {
console.log(val, index);
})
回調函數中有2個參數，分別表示值和索引，這一點與jQuery中的$.each相反
forEach無法遍歷對象
forEach無法在IE中使用，firefox和chrome實現了該方法
forEach無法使用break，continue跳出循環，使用return時，效果和在for循環中使用continue一致
jQuery遍歷數組和對象
$.each
$.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"
var demoObj = {
aaa: 'Javascript',
bbb: 'Gulp',
ccc: 'CSS3',
ddd: 'Grunt',
eee: 'jQuery',
fff: 'angular'
};
$.each(demoObj,function(index,value){
console.log(index,value);
})
//輸出結果：
aaa Javascript
bbb Gulp
ccc CSS3
ddd Grunt
eee jQuery
fff angular
$(selecter).each
$('.list li').each(function(i, ele) {
console.log(i, ele);
})
