高阶函数:
接收函数作为参数,或返回值为函数的函数。
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