数组的迭代(遍历)方法 map ,filter , forEach , some ,every , findIndex , reduce

258 阅读3分钟

1,数组map遍历方法:

map场景:映射数组,对数组每个元素进行映射处理,得到一个全新的数组

特点:
回调执行次数 === 数组长度 
本身返回值是一个映射之后的新数组
回调函数内部return的是映射之后的值
let arr = [10,20,30,40,50]
let newArr = arr.map( (value,index) => {
	console.log( value , index) 	// value遍历的每一个元素,index为每一个元素的下标
	return value*2 			// return 返回的是每个元素映射之后的值
	// return 1   则会把每个元素都改为1 结果就是 [1,1,1,1,1]
})
console.log( newArr )				// [ 20,40,60,80,100 ]

2,数组filter遍历方法:

filter场景:筛选数组,找出数组中符合条件的元素

特点:
回调执行次数===数组长度
本身返回值是删选后的新数组
回调函数内部
return true:满足筛选的条件,放入新数组中
return false:不满足筛选后的条件,不放入到新数组中
let arr = [10,20,30,40,50]
let newArr = arr.filter((value,index)=>{
if(value<40 && value>10){
    return true
    }else{
    return false
    }
})
    console.log(newArr)	// [20,30]

以上代码 if(true){ return true }过于智障,可以简写为:

let res = arr.filter( value = > value<40 && value>20

3,数组frEach遍历方法:

forEach场景:遍历数组

let arr = [10,20,30,40,40,]
arr.forEach((value,index)=>{
     console.log(value,index);   //value为遍历的每个元素,index为遍历的每一个元素的下标
})

4,数组some遍历方法:

some场景:判断数组中是否有满足条件的元素

特点:
回调函数次数 !=数组长度
本身返回值为:
true:有满足条件的元素
false:没有满足条件的元素
回调函数内部:
return true:循环立即结束
return false:循环继续执行,如果遍历完数组还没false,则返回false
 let arr = [10,20,30,40,40,]
 let res =  arr.some((value,index)=>{
      if(value==30){
         return true
       }else{
         return false
       }
})
 console.log(res);	//true

同理,以上代码可以简写为:

let res = arr.some( value => value==30)

下面代码将直接以简写方式书写

5,数组every遍历方法:

every和some方法正好相反,建议记住一个就可以了,推荐使用这个

every场景:判断数组中是否所有元素都满足条件

特点:
回调函数次数 !=数组长度
本身返回值为:
true:全部满足条件
false:有元素不满足条件
let arr = [10,20,30,40]
let res = arr.every( value => value<50 )
console.log(res)    // true
let res1 = arr.every( value => value<40 )
console.log(res1)    //false  40不满足条件,则返回false

6,数组findIndex遍历方法:

findIndex场景:获取某个元素下标 与indexOf()方法类似,但findIndex一般用于对象数组,而indexOf()用于获取基本类型元素的下标

特点:
回调函数次数!=数组长度
本身返回值为:
下标 :满足条件元素的下标
-1:没有满足条件
let arr = [
            {
                name:'张三',
                age:32
            },
            {
                name:'李四',
                age:33
            },
            {
                name:'王五',
                age:34
            }
        ]
let res =arr.findIndex( value => value.name =='王五')
console.log(res)  // 2
let res1 = arr.findIndex( value => value.name == '老王')
console.log(res1)  // -1

indexOf可以获取基本类型元素的下标 如果没有则返回-1

let arr = [22,33,44,55]
let res = arr.indexOf(44)
console.log(res)   // 2
let res1 = arr.indexOf(99)
console.log(res1)   // -1

7,数组reduce遍历方法:

reduce场景:给每一个元素执行一次回调,用于数组求和,求数组最大值

sum:上一次的返回值
value:当前元素值
index:当前下标值
return会在sum执行完毕后执行
注意点:如果数组为空的话,没有上一次的返回值则会报错,所以会在函数后面放一个初始值 0 
//求和
let arr = [11,22,88,44,55]
let res = arr.reduce((sum,value,index)=>{
    return sum+=value
},0)
console.log(res);	//220
//求最大值
let res1 = arr.reduce((sum,value,index) =>{
	if(sum<value){
           sum=value
         }
         return sum
})
console.log(res1)  // 88