js中数组遍历常用的方法

时间:2024-01-09 17:05:56

常见的数组遍历方法,比如 for in,for  of, forEach,map,filter,every,some,find,reduce等

1,普通for循环,经常用的数组遍历
var arr = [1,2,0,3,9];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}
2,优化版for循环:使用变量,将长度缓存起来,避免重复获取长度,数组很大时优化效果明显
for(var j = 0,len = arr.length; j < len; j++){
console.log(arr[j]);
}
3,forEach,ES5推出的,数组自带的循环,主要功能是遍历数组,实际性能比for还弱
arr.forEach(function(value,i){
  console.log('forEach遍历:'+i+'--'+value);
})
arr.forEach((val)=>{
console.log(val)
})
forEach这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
4,map遍历,map即是 “映射”的意思 用法与 forEach 相似
1、创建新数组
2、不改变原数组
3、输出的是return什么就输出什么新数组
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
js中数组遍历常用的方法js中数组遍历常用的方法
arr.map(function(value,index){
console.log('map遍历:'+index+'--'+value);
});
map遍历支持使用return语句,支持return返回值
var temp=arr.map(function(val,index){
console.log(val);
return val*val
})
console.log(temp); //先打印值,再返回数组
forEach、map都是ECMA5新增数组的方法,所以ie9以下的浏览器还不支持
5,for-of遍历 是ES6新增功能
for( let i of arr){
console.log(i);
}
  • for-of这个方法避开了for-in循环的所有缺陷
  • 与forEach()不同的是,它可以正确响应break、continue和return语句 
for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象
for-of循环也支持字符串遍历

JS对象遍历:

1,for-in遍历
for-in是为遍历对象而设计的,不适用于遍历数组。
遍历数组的缺点:数组的下标index值是数字,for-in遍历的index值"0","1","2"等是字符串
for (var index in arr){
console.log(arr[index]);
console.log(index);
}

arr.filter()、includes()、find()、findIndex()— —筛选数组

一、arr.filter()

1、创建新数组
2、不改变原数组
3、输出的是判断为true的数组元素形成的新数组
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
js中数组遍历常用的方法js中数组遍历常用的方法

二、arr.includes()

只是判断数组是否含有某值,不用return,不用回调函数,输出一个true或false
无用
示例:
js中数组遍历常用的方法js中数组遍历常用的方法

三、arr.find()

1、不创建新数组
2、不改变原数组
3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
js中数组遍历常用的方法js中数组遍历常用的方法
四、arr.findIndex()— — 与find()相同
1、不创建新数组
2、不改变原数组
3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素序列
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
(较无用)
示例:
js中数组遍历常用的方法js中数组遍历常用的方法
arr.some()、every()— —判断数组
(不常用)
一、some()
1、不创建新数组
2、不改变原数组
3、输出的是判断为true则马上跳出循环并return成true
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
js中数组遍历常用的方法js中数组遍历常用的方法
一、every()— —与some相反
1、不创建新数组
2、不改变原数组
3、输出的是判断为false则马上跳出循环并return成false
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
js中数组遍历常用的方法js中数组遍历常用的方法
reduce()— —叠加数组
不一定在数学意义上的叠加计算,这里叠加指:可以利用前遍历操作的结果到下一次遍历使用,重复叠加使用下去
1、创建新数组
2、不改变原数组
3、输出的是return叠加什么就输出什么 新数组
4、回调函数参数
pre(第一次为数组第一项,之后为上一操作的结果)
next(数组的下一项)
index(next项的序列)
arr(数组本身)
回调函数后的改变第一项参数。(不影响原数组)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
//reduce():
//求和计算
var arr1 = [1,2,3,4,5] ;
var new1 = arr1.reduce(function(sum,next,index){
        return sum+next ;    
        /*
         *第一次:pre-->1  next-->2  index-->1
         *遍历计算return得结果为pre+next=1+2=3
         *第二次:pre-->3  next-->3  index-->2
         *遍历计算return得结果为pre+next=3+3=6
         *第三次:pre-->6  next-->4  index-->3
         *遍历计算return得结果为pre+next=6+4=10
         *第四次:pre-->10  next-->5  index-->4
         *遍历计算return得结果为pre+next=10+5=15
        */
})
//扁平化数组
var arr2 = [[1,2,3],[4,5],[6,7]] ;
var new2 = arr2.reduce(function(pre,next,index){
        return pre.concat(next);    //前数组拼接后数组 .concat()
})
//对象数组叠加计算
var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];
var new3 = arr3.reduce(function(pre,next,index){
        return pre+next.price*next.count;
        //当需要对第一项进行操作时,后面pre使用上一项操作结果,不再需要操作
        //所以当需要操作第一项的时候,利用reduce(callbreak(){},往数组第一项前添加一项,如:0)
},0)    //在原数组第一项添加为0,不改变原数组,则可不操作第一项
console.log(new1);
console.log(new2);
console.log(new3);
console.log(arr1);        //普通数组
console.log(arr2);        //多重数组
console.log(arr3);        //对象数组
js中数组遍历常用的方法js中数组遍历常用的方法