js数组常用遍历方法（forEact、map、filter、reduce、every、some、findIndex）

let arr = [
    {id:1,name:'apple',count:50,price:2},
    {id:2,name:'banana',count:40,price:3},
    {id:3,name:'orange',count:30,price:4},
    {id:5,name:'watermelon',count:20,price:5},
    {id:5,name:'strawberry',count:100,price:6},
]

forEach

作用：

与for循环一样，用来遍历数组，数组有几项，就遍历多少遍

语法：

数组.forEach(function(item,index,数组){
    ......
})

数组.forEach((item,index,arr)=>{
    ......
})

参数：

• item:数组中的每一项

• index:item对应的索引

• arr:数组（通常省略）

特点：

• 无返回值，不需要return（手动添加return，也不会返回）

• 改变原数组

eg:

//对数组每一项的count 加 10
arr.forEach((item,index,arr)=>{
    item.count += 10
})
console.log(arr)
// [
//     {"id": 1,"name": "apple","count": 60,"price": 2},
//     {"id": 2,"name": "banana","count": 50,"price": 3},
//     {"id": 3,"name": "orange","count": 40,"price": 4},
//     {"id": 5,"name": "watermelon","count": 30,"price": 5},
//     {"id": 5,"name": "strawberry","count": 110,"price": 6}
// ]

map

作用：

遍历整个数组，并对数组的每一项做处理后返回新数组

语法：

数组.map( function ( item, index, arr){
    return ......
})

数组.map((item,index,arr)=>{
    return ......
})

参数：

• item:数组中的每一项

• index:item的索引

• arr:当前数组

特点：

• 不会改变原数组（除非使用map数组里面存在嵌套复杂的对象、数组结构）

• 要有return，返回当前遍历的元素值（如果没有return,新数组中的每一个元素为undefined）

• 返回新数组的长度 === 原数组的长度

eg:

let newArr = arr.map((item,index,arr)=>{
    return {
        count : item.count + 10,
        price : item.price -1,
        value : index
    }
})
console.log(arr)
// [
//     {"id": 1,"name": "apple","count": 50,"price": 2},
//     {"id": 2,"name": "banana","count": 40,"price": 3},
//     {"id": 3,"name": "orange","count": 30,"price": 4},
//     {"id": 5,"name": "watermelon","count": 20,"price": 5},
//     {"id": 5,"name": "strawberry","count": 100,"price": 6}
// ]
console.log(newArr)
// [
//     {"count": 60,"price": 1,"value": 0},
//     {"count": 50,"price": 2,"value": 1},
//     {"count": 40,"price": 3,"value": 2},
//     {"count": 30,"price": 4,"value": 3},
//     {"count": 110,"price": 5,"value": 4}
// ]

filter

作用：

筛选数组中符合条件的一些元素

语法：

数组.filter(( item, index, arr) =>{
    return ......
})

参数：

• item:数组中的每一项

• index:item的索引

• arr:当前数组

特点：

• 返回值为一个新数组，新数组的长度不确定

• 不会改变原数组

eg:

let newArr = arr.filter((item,index,arr)=>{
    return item.price < 4
})
console.log(arr)
// [
//     {"id": 1,"name": "apple","count": 50,"price": 2},
//     {"id": 2,"name": "banana","count": 40,"price": 3},
//     {"id": 3,"name": "orange","count": 30,"price": 4},
//     {"id": 5,"name": "watermelon","count": 20,"price": 5},
//     {"id": 5,"name": "strawberry","count": 100,"price": 6}
// ]
console.log(newArr)
// [
//     {"id": 1,"name": "apple","count": 50,"price": 2},
//     {"id": 2,"name": "banana","count": 40,"price": 3}
// ]

reduce

作用：

遍历数组元素，为每个数组执行一次回调函数

语法：

数组.reduce((prev,cur,index,arr)=>{
    ......
},init);

参数：

• prev:上次操作的返回值（无上一次操作返回值时位初始值）------必传

• cur:当前遍历的元素------必传

• index:cur的索引

• arr:传入的数组

• init:所有操作开始前的初始值

eg:

//1.数组求和
let arr1 = [2,3,6,12,9,7,8,33,32,43]
let sum = arr1.reduce((prev,cur)=>{
   return prev + cur 
},0)
console.log(sum)
//155

//2.求数组最大值
let arr2 = [12,34,32,98,5,18,66,21,25,9]
let max = arr2.reduce((prev,cur)=>{
     if(prev < cur){
         prev = cur
     }      
     return prev
})
console.log(max)
//98

//3.数组去重
let arr3 = [12,45,12,33,4,8,10,42,45,7,8,33,88,42]
let arr4 = arr3.reduce((prev,cur)=>{
    if(prev.indexOf(cur) === -1) prev.push(cur)
    return prev
},[])
console.log(arr4)
//[12, 45, 33, 4, 8, 10, 42, 7, 88]

every

作用：

用于判断数组中的每一项元素是否都满足条件，返回布尔值

参数：与forEach参数一样

eg:

let bool1 = arr.every((item,index,arr)=>{
    return item.price > 2
})
console.log(bool1)
//false

let bool2 = arr.every((item,index,arr)=>{
    return item.name
})
console.log(bool2)
//true

some

作用：

判断数组中是否至少有一项满足条件

参数：同forEach

eg:

let bool3 = arr.some((item,index)=>{
    return item.count > 100
})
console.log(bool3)
//false

let bool4 = arr.some((item,index)=>{
    return item.name.length > 5
})
console.log(bool4)
//true

findIndex

作用：

返回符合条件的第一个元素所在位置

参数：同forEach

eg:

//返回第一个未成年的位置
let arr5 = [
    {name:'张三',age:20},
    {name:'李四',age:15},
    {name:'王五',age:23},
    {name:'赵六',age:19},
]

let index = arr5.findIndex((item,index)=>{
    return item.age < 18
})
console.log(index)
//1