最近写的js代码比较多,但是在做数组循环的时候,老是记不起来javascript提供用来遍历和循环数组的方法,又因为不想打断思路,就懒得去网上查,导致每次都很挫地直接写最原始的for循环。

这次回家来翻了翻书,做一个总结。

在javascript中遍历数组的方式很多,大概分为下面几种:
1. for
2. while
3. every
4. some
5. filter
6. forEach
7. map
8. for in

接下来看代码:

最熟悉的for循环:

var arr = [1,2,3,4,5,6,7,8,9,10];

for(var i=0;i<arr.length;++i){
    arr[i] += 1;
}

console.log(arr);//[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
console.log(i);//10

for循环是每个程序员最熟悉不过的语法了,因此每次在需要遍历一个数组的时候,总是能不假思索的写出一个for循环来。
但是在javascript中用for循环就可能不是那么适合了,上面的例子在打印i的值时,会发现i的值为10,这是因为javascript只有函数作用域而没有块级作用域,因此循环体中定义的变量i将会在循环体结束后依然存在,这可能会造成一些意想不到的结果。

老朋友while循环

var arr = [1,2,3,4,5,6,7,8,9,10];

var index =-1;
while(index++ < arr.length){
    arr[i] += 1;
}

console.log(arr);//[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

while循环和for循环一样经典,不过缺点在于需要额外定义一个变量如(上面的index)来控制循环的继续与否。

every方法

every( function(item,index,array ){}):对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。——《javascript高级程序设计》

var arr = [1,2,3,4,5,6,7,8,9,10];

//判断arr中的每个元素是否都大于0
var test = arr.every(function(item,index,array){
    return item > 0;
});

//判断arr中的每个元素是否都大于5
var test2 = arr.every(function(item,index,array){
    return item > 5;
});

console.log(test);//true
console.log(test2);//false

every可以用来判断数组中的每个元素是否都具有相同的特征。
every方法接受一个参数,这个参数是一个函数,函数需要返回一个布尔值。而every为这个函数准备了三个入参,分别是item,index,array,item为当前元素,index为当前元素在数组中的下标,array为数组对象本身。
不仅仅是every方法,javascript提供的some,filter,forEach,map也同样接受一个函数作为参数,并且这个函数都具有item,index,array这三个入参。

some方法

some( function(item,index,array ){}):对数组中的每一项运行给定函数,如果该函数任意一项返回true,则返回true。——《javascript高级程序设计》

var arr = [1,2,3,4,5,6,7,8,9,10];

//判断arr中是否有元素等于11
var test = arr.some(function(item,index,array){
    return item = 11;
});

//判断arr中是否有元素等于5
var test2 = arr.some(function(item,index,array){
    return item = 5;
});

console.log(test);//false
console.log(test2);//true

与every方法不同,some方法只需要数组中的任意一项能使得所传函数返回true,那么some方法就会返回ture。

filter方法

filter( function(item,index,array ){}):对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。——《javascript高级程序设计》

var arr = [1,2,3,4,5,6,7,8,9,10];

//获取arr中所有大于5的元素
var filterArr = arr.filter(function(item,index,array){
    return item > 5;
});

console.log(filterArr);//[6,7,8,9,10]

filter方法的作用和它的名称一样,是用来“过滤”数组的,比如上面的例子里面,filter函数就能够将所有大于5的元素组成一个新的数组返回。

forEach方法

forEach( function(item,index,array ){}):对数组中的每一项运行给定函数,这个方法没有返回值。——《javascript高级程序设计》

var arr = [1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(item,index,array){
    array[index]+=1;
});

console.log(arr);//[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

forEach方法与every,some以及filter都不同,它没有返回值。forEach可以用来取代原始的for循环来遍历数组,因为forEach不会像for循环一样使得循环体中的“局部”变量污染循环体所在的作用域。比如上面的例子里,index在出了函数作用域后就不能再被访问了。

map方法

map( function(item,index,array ){}):对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。——《javascript高级程序设计》

var arr = [1,2,3,4,5,6,7,8,9,10];

//获取一个每个元素都是arr两倍的新数组
var mapArr = arr.map(function(item,index,array){
    return item*2;
});

console.log(mapArr);//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

map方法也有别于之前介绍的几个方法,它会把每次所传函数调用返回的结果组成一个新的数组返回。

for in循环

var arr = [1,2,3,4,5,6,7,8,9,10];

for(index in arr){
    console.log("index:"+index+" arr["+index+"]:"+arr[index]);
}
/*
index:0 arr[0]:1
index:1 arr[1]:2
index:2 arr[2]:3
index:3 arr[3]:4
index:4 arr[4]:5
index:5 arr[5]:6
index:6 arr[6]:7
index:7 arr[7]:8
index:8 arr[8]:9
index:9 arr[9]:10
*/

for in循环也是一个比较简洁的遍历语法,并且也不会像原始的for循环一样污染循环体所在的作用域。

for in循环还可以用来遍历对象中的key-value值对:

var obj = {
    key1:1,
    key2:2,
    key3:3,
    key4:4,
    key5:5
};

for(key in obj){
    console.log("key:"+key+"  val:"+obj[key]);
}
/*
key:key1  val:1
key:key2  val:2
key:key3  val:3
key:key4  val:4
key:key5  val:5
*/

jQuery中的遍历方法
如果使用过jQuery的话,jQuery也提供了一个遍历数组的方法——each方法。

常规用法如下:

var arr = ["111","222","333"];

$.each(arr,function(index,value){
     console.log(index+"-"+value);
});

/*
0-111
1-222
2-333
*/

var objArr = [{ name: "张三", sex: "gay" }, { name: "李四", sex: "女" }, { name: "王五", sex: "男"}];

$.each(objArr, function (index, value) {
    console.log(value.name+"-"+value.sex);
});

/*
张三-gay
李四-女
王五-男
*/

不过我一般喜欢这样用:

var objArr = [{ name: "张三", sex: "gay" }, { name: "李四", sex: "女" }, { name: "王五", sex: "男"}];

$(objArr).each(function(index, obj){
     console.log(this.name+"-"+this.sex);
});

/*
张三-gay
李四-女
王五-男
*/

把数组对象arr传递给jQuery对象,包装后直接调用each方法。值得一提的是,在each的参数函数中,this的值为当前循环的项。

发表评论

电子邮件地址不会被公开。 必填项已用*标注