天天看点

js遍历数组方法总结js遍历数组方法总结

js遍历数组方法总结

1.for循环

使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。

for(j = 0,len=arr.length; j < len; j++) {
    
}
           

2.foreach循环

遍历数组中的每一项,没有返回值,对原数组没有影响,但是不支持IE

//没有返回值
arr.forEach((item,index,array)=>{
    //执行代码
})
//参数:value数组中的当前项, index当前项的索引, array原始数组;
//数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
           

3.map循环(有返回值的方法)

有返回值,可以return出来

map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,ary ) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改
console.log(ary);//-->[12,23,24,42,1];  原数组并未发生变化
           

4.forof遍历

可以正确响应break、continue语句(注意此处并不能使用return语句)

for (var value of myArray) {
console.log(value);
}
           

5.filter遍历

即只有满足箭头函数内条件的item才会组成一个新的数组而返回

var arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))// -->[{ id: 1, text: 'aa', done: true }]

           
var arr = [73,84,56, 22,100]
var newArr = arr.filter(item => item>80)   //得到新数组 [84, 100]
           

6.every遍历

every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr.every( function( item, index, array ){ 
        return item > 3; 
    })); // --->false
           

7.some遍历

every()要每一项都满足条件才返回true,而some只需要任意一项满足条件则返回true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 

    console.log( arr.some( function( item, index, array ){ 
        return item > 3; 
    })); // --->true

           

8.find方法

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]
function getStu(element){
   return element.name == '李四'
}
 
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}