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);
})
