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

})