日常开发中,我们免不了要对数组进行循环遍历操作,今天要讲到的,就是我们垒代码过程中经常用到的几大遍历神兽:for(),forEach(),filter(),map(),reduce(),some(),every()。
for()
语法规则
如下代码,基础的for循环中,语句1模块在循环开始前执行;语句2定义循环条件;语句3在每次循环后执行
//基础写法
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
//打印arr数组的所有元素,用变量接收获取的数组长度,可保证遍历过程中只取一次数组长度
for(let i=0,len=arr.length; i<len; i++){
console.log(arr[i]);
}
//for的变种写法,用于遍历数组的对象属性
var person={fname:"John",lname:"Doe",age:25};
var txt = '';
for (x in person) // x 为属性名key
{
txt=txt + person[x]; //person[x]为属性的值value
}
//输出:JohnDoe25
适用情形
当数组由简单元素组成时,都可以用for来遍历,当数组为一个对象集时,我们可以用for in来实现对对象元素的键值对遍历。
forEach()
语法规则
forEach遍历数组时有三个参数,可选,其中,第一个参数(当前元素)为必须项,第二个参数(下标)与第三个参数(数组对象)可填可不填。
let array = [2,4,2,4,3,8];
array.forEach(function(currentValue, index, arr){
//code
}, thisValue)
currentValue:当前元素(必须项)
index:当前元素下标
arr:当前元素所属的数组对象
thisValue:表示传递给函数的值,如果不填,则默认传this
适用情形
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。当对一个空数组执行forEach循环遍历时,将不会执行回调函数。
forEach()可以使数组的每一项单独做一件事情,并改变自身的值,但是无法使用常规的break、continue跳出循环。
值得注意的是,forEach()不支持链式操作,也就是说,forEach().filter这种写法是错误的。
filter()
语法规则
//筛选出arr中大于2的元素并组成新数组
let arr = [2,4,6,5,8];
arr = arr.filter((item,index,array)=>{
return item > 2;
})
item:表示当前遍历项元素 (必须项)
index:表示当前遍历项的数组下标
array:表示当前遍历项所属的数组对象
适用情形
当一个数组使用filter()方法对数组进行遍历的时候,不会改变原数组的数据,而是在原数组的基础上,根据自设的条件,对原始数组做筛查,筛选出符合条件的元素后,会将这些元素放到一个新数组中,并返回这个新数组。
map()
语法规则
array = array.map(function(item, index){
return index+1;
});
map参数与filter相同
适用情形
map()主要是对数组的每个元素做映射,所谓映射,就是在map里面将每一项,与相应的数组下标一一对应起来。
map()中每个元素都会执行相应的回调函数,切记要有return,如果没有return,那最后将返回的是一个空数组。此外,如果想用map()给数组做过滤处理,那也将是一番无谓的空操作。
reduce()
语法规则
array.reduce((prev,cur,index,arr)=>{
//code
}, init);
prev:表示上次调用的返回值,如果是第一次调用,则表示初始值
cur:表示当前正在处理的元素
index:表示当前处理元素的下标
arr:表示当前处理元素所属的数组对象
init:表示首次传入函数中的prev初始值
适用情形
当需要对数组的前后两项做一定操作运算的时候,用reduce()处理会十分的便捷。像一些常见的如:求数组各项之和、求最大值等。
some()
some()方法用于判断数组中是否有满足指定条件的元素,有一项符合就返回true,全部不符合则返回false
用法示例:
arr.some( function( item, index, array ){
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;
})
如下列运行结果所示:只要数组中有一项符合条件,则返回true,否则返回false
every()
every()用于判断数组中的所有元素是否都符合判断条件,是,则返回true,有一项不满足,则返回false
用法示例
arr.every( function( item, index, array ){
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;
})
concat()
concat()方法用于连接两个或多个数组
语法规则
arr.concat(arr1,arr2,arr2)
用法示例
let arr = ['john','marry']
let arr1 = ['max','july']
let arr2 = ['sherry','emily','sunny']
arr.concat(arr1,arr2)
运行结果:arr = ['john','marry','max','july','sherry','emily','sunny']