js数组方法总结之常见高阶函数:reduce、every等

43 阅读3分钟

高阶函数:

接收函数作为参数,或返回值为函数的函数。

1. reduce( )

接收两个参数:callback函数,可选initialVal初始值。

callback可接受四个参数:preVal上一次执行函数的值,curVal当前值,curIndex当前值索引,arr当前数组

注意:空数组调用reduce方法,传入初始值,返回初始值;不传初始值,则报错。所以使用reduce方法时建议传入初始值。

//用法
arr.reduce((preVal, curVal, curIndex, arr) => {}, initialVal)
  • 只接受callback函数
const arr = [1,2,3,4,5,6,7,8,9]
/**
 * 只接收一个callback参数情况
 * @param {*} preVal 首次执行 为数组的第1个值 arr[0]
 * @param {*} curVal 首次执行 为数组的第2个值 arr[1]
 * @param {*} curIndex 开始为1
 * @param {*} arr 当前遍历的数组
 */
arr.reduce((preVal, curVal, curIndex, arr) => {
    //...无初始值,执行次数为 arr.length-1
})
  • 接受callback函数和初始值initialVal
const arr = [1,2,3,4,5,6,7,8,9]
const initialVal = 0
/**
 * 接收callback函数和一个初始值
 * @param {*} preVal 初始值
 * @param {*} curVal 首次执行为数组的第1个值 arr[0]
 * @param {*} curIndex 首次执行为0
 * @param {*} arr 当前遍历的数组
 * @param {*} initialVal 初始值
 */
 arr.reduce((preVal, curVal, curIndex, arr) => {
    //...有初始值,执行次数为 arr.length
}, initialVal)
  • 应用场景举例:

(1)数组求和

// 数组求和
const arr = [1,2,3,4,5,6,7,8,9]
const sum = arr.reduce((preVal, curVal, curIndex, arr) => preVal+curVal )
console.log('sum=', sum) //sum=45

(2)扁平化数组

// 二维数组转化为一维数组
const arr = [[6,7,8,9],[11,22,33,44],[55,66,77]]
const result = arr.reduce((preVal, curVal, curIndex, arr) => preVal.concat(curVal) )
console.log('result', result) //result [6,7,8,9,11,22,33,44,55,66,77]

(3)计数

// 统计成绩合格的人数
const student = [
    {name: 'lisi', grade: 45},
    {name: 'zhangsan', grade: 66},
    {name: 'wangwu', grade: 88},
    {name: 'luoxiang', grade: 59},
    {name: 'zhaosi', grade: 10},
]
const passNumbers = student.reduce((preVal, curVal, curIndex, arr)=>{
    if(curVal.grade >= 60){
        preVal ++
    }
    return preVal
},0)
console.log('passNumbers', passNumbers)// passNumbers 2

接下来介绍的高阶函数,都接收相同的参数,callback函数和thisArg

  • callback接收三个参数:val数组项,index索引,arr数组

  • thisArg可选:callback函数中的this。

2、every( )

返回值:Boolean

数组各项均通过callback函数,则返回true;否则返回false

[12, 5, 8, 130, 44].every(val => cal >= 10); // false
[12, 54, 18, 130, 44].every(val => val >= 10); // true

3、some( )

返回值:Boolean

数组中至少有一项通过callback函数,就返回true;否则返回false

注意:空数组 some 方法始终返回 false ;返回 true 之后不再遍历数组。

[1,2,3,4,5].some(val => val > 3) //true
[1,2,3,4,5].some(val => val > 6) //false

4、find( )

返回值:数组项或undefined

找到符合条件的第一个数组元素,找不到则返回undefined

const arr = [1,2,31,5,6,7]
let el = arr.find(val => val > 10 ) // 31

5、findIndex( )

返回值:索引值或-1

找到符合条件的第一个数组元素的索引值,找不到则返回-1

const arr = [1,2,31,5,6,7]
let el = arr.findIndex(val => val > 10 ) // 2

6、findLast( )

返回值:数组项或undefined

找到符合条件的最后一个数组元素,找不到则返回undefined

const arr = [1,2,31,5,61,7]
let el = arr.findLast(val => val > 10 ) // 61

7、findLastIndex( )

返回值:索引值或-1

找到符合条件的最后一个数组元素的索引值,找不到则返回-1

const arr = [1,2,31,5,61,7]
let el = arr.findLastIndex(val => val > 10 ) // 4

8、filter( )

返回值: 数组

返回一个新数组,该数组各项均通过callback函数

const arr = [50, 60, 70, 90, 100]
const newArr = arr.filter(val => val > 80) // [90, 100]

9、map( )

返回值: 数组

遍历数组的每一项,返回一个新数组

const arr = [1,2,3]
const newArr = arr.map(val => val*2 ) //[2,4,6]

10、forEach( )

遍历数组

const arr = [1,2,3]
arr.forEach(val => console.log(val))
//1
//2
//3