JavaScript数组遍历的6种方法比较

第JavaScript数组遍历的6种方法比较一、for

JavaScript中的for循环，它用来遍历数组

vararr=[1,2,3,4]

for(vari=0;iarr.length;i++){

console.log(arr[i])

//1,2,3,4

九九乘法表：

for(varx=1;xx++){

varstr=

for(vary=1;yy++){

str+=x+*+y+=+(x*y)+

console.log(str);

}

二、foreach

forEach循环我们可以直接取到元素，同时也可以取到index值。但是forEach也有一些局限，不能continue跳过或者break终止循环

letarr=[a,b,c,d]

arr.forEach(function(val,index,arr){

console.log(index:+index+,+val:+val)//val是当前元素，index当前元素索引，arr数组

console.log(arr)

//index:0,val:a

//[a,b,c,d]0:a1:b2:c3:d

//index:1,val:b

//[a,b,c,d]

//index:2,val:c

//[a,b,c,d]

//index:3,val:d

//[a,b,c,d]

[].forEach(function(value,index,array){

//dosomething

});

等价于：

$.each([],function(index,value,array){

//dosomething

})

三、forin

for(variteminarr|obj){}可以用于遍历数组和对象

遍历数组时，item表示索引值，arr表示当前索引值对应的元素arr[item]

遍历对象时，item表示key值，arr表示key值对应的value值obj[item]

forin一般循环遍历的都是对象的属性，遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性

varobj={a:1,b:2,c:3};

for(letiteminobj){

console.log(obj.+item+=+obj[item]);

//obj.a=1

//obj.b=2

//obj.c=3

vararr=[a,b,c

for(variteminarr){

console.log(item)//012

console.log(arr[item])//abc

}

四、forof

ES6中新增加的语法forof语句创建一个循环来迭代可迭代的对象。在ES6中引入的forof循环，以替代forin和forEach()，并支持新的迭代协议。forof允许你遍历Arrays（数组）,Strings（字符串）,Maps（映射）,Sets（集合）等可迭代的数据结构等。

循环一个数组：

letarr=[A,B,C]

for(letvalofarr){

console.log(val)

//ABC

循环一个字符串：

letiterable=abc

for(letvalueofiterable){

console.log(value);

//a

//b

//c

循环一个Map:

letiterable=newMap([[a,1],[b,2],[c,3]]);

for(let[key,value]ofiterable){

console.log(value);

for(letentryofiterable){

console.log(entry);

//[a,1]

//[b,2]

//[c,3]

循环一个Set:

letiterable=newSet([1,1,2,2,3,3]);

for(letvalueofiterable){

console.log(value);

//3

循环一个拥有enumerable属性的对象

forof循环并不能直接使用在普通的对象上，但如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()方法：

for(varkeyofObject.keys(someObject)){

console.log(key+:+someObject[key]);

}

循环一个生成器(generators):

function*fibonacci(){//ageneratorfunction

let[prev,curr]=[0,1];

while(true){

[prev,curr]=[curr,prev+curr];

yieldcurr;

for(letnoffibonacci()){

console.log(n);

//truncatethesequenceat1000

if(n=1000){

break;

}

五、jQuery里面的$.each

$.each(arr|obj,function(k,v))

可以用来遍历数组和对象，其中k表示索引值或者key值，v表示value值

vararr=[a,b,c]

$.each(arr,function(key,val){

console.log(key,val);

//0a

//1b

//2c

六、jQuery里面的$().each()

$().each()在dom处理上面用的较多,主要是用来遍历DOMList。如果页面有多个input标签类型为checkbox，对于这时用$().each()来处理多个checkbox，例如：

$(input[name=checkbox]).each(function(i){

if($(this).attr(checked)==true){

//操作代码

}

推荐在循环对象属性的时候使用forin,在遍历数组的时候的时候使用forof；

forin循环出的是key，forof循环出的是v