常见的JavaScript遍历方式

首先我们写一个数组和json对象。
var Arr=[‘C++’,’c#’,’java’,’css’,’html’,’javascripts’];
var obj={
first:’javascripts’,
second:’css’,
third:’jquery’
};

for循环

1
2
3
4
5
6
7
8
9
10
(function{
for(var i=0,len=Arr.length;i<len;i++){
if(i==2){
//return; //函数执行被终止
//break; //循环被终止
continue; //循环被跳过
}
console.log('Arr['+i+']:'+Arr[i]);
}
})();

for循环中有两点注意

  • for循环中的i在循环结束后依然存在与作用域中,这个时候为了避免影响作用域中的其余变量,我们将采用函数自执行的方式将其隔离起来。形如
1
function(){})();
  • 在循环中避免使用(var i=0;i<Arr.length;)这样数组长度每次都在计算,效率远远低于例子中的写法,同理,我们也可以先赋值好值,如下
1
2
var i=0;len=Arr.length;
for(;i<len;i++)

for in 循环

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

  • 遍历数组,item为索引值,arr为当前索引值对应的元素 arr[item];
  • 遍历对象,item为key值,arr表示key值对应的value值obj[item];
1
2
3
4
5
6
7
8
9
10
(function{
for(var i in Arr){
if(i==2){
//return; //函数执行被终止
//break; //循环被终止
continue; //循环被跳过
}
console.log('Arr['+i+']:'+Arr[i]);
}
})();

关于for in 的注意

  • 同样式需要添加自执行函数。
  • 跳出循环中,return为函数执行终止,即整个函数将终止,在循环外面的也不再进行。break为终止当前的循环,后续代码继续执行。

for Each

Arr.forEach(function(arg){})
参数arg为数组没一项元素。

1
2
3
4
5
6
7
8
Arr.forEach(funciton(val,index){
if(e=='css3'){
return; //循环被跳过
//break; //Error
//continue; //Error
}
console.log(val,index);
})

for Each注意点

  • 回调函数中的2参数分别为值和索引值,和jQuery的$.each相反。
  • forEach无法遍历对象.
  • forEach无法再IE中使用
  • forEach无法使用break和continue,而return和for循环中的continue一致。
  • 可添加第二个参数,为一个数组,在回调中用this指向这个数组,若无第二参数,则this会指向window。
1
2
3
4
var newArr[];
Arr.forEach(function(val,index){
this.push(val); //this指向newArr.
},newArr)

do/while方式

不建议使用,此处不多说明

$.each

这个为jQuery中的方法,熟悉jQuery的应该或多或少的使用过。可遍历数组和对象。
下面的例子中e为索引值,或者key值,ele为value值

1
2
3
$.each(Arr|obj,function(e,ele){
console.log(e,ele);
})

$.each注意点

  • 使用return或return true为跳过一次循环,继续执行后面的循环。
  • 使用return false为终止循环的执行,但是并不终止函数执行,
  • 无法使用break和continue来跳过循环。
  • 循环中this输出:
1
2
3
console.log(this);

console.log(this=ele);

$(selecter).each()

专门用来遍历DOMList

1
2
3
4
5
6
7
8
$('.list li').each(function(i,ele){
console.log(i,ele);

$(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循环中遍历DOMList中需要将DOMlist转换为数组

1
2
var res=[].slice.call(domList);
for(var item in res){}
文章目录
  1. 1. for循环
    1. 1.1. for循环中有两点注意
  2. 2. for in 循环
    1. 2.1. 关于for in 的注意
  3. 3. for Each
    1. 3.1. for Each注意点
    2. 3.2. do/while方式
  4. 4. $.each
    1. 4.1. $.each注意点
  5. 5. $(selecter).each()
,