AdvancedFunction

文章目录

1. 高阶函数
   1. filter
   2. map
   3. reduce

高阶函数

filter

filter 接受一个回调函数，它将会遍历数组，该回调函数必须返回一个布尔值，表示被遍历到的值是否过滤(添加进 filter 内部的新数组作为返回值)。遍历完成后， filter 会返回这个新数组，需要接收。由于返回的是新数组，所以可以链式编程。

const arr = [1, 2, 3, 4, 5, 67, 8, 9]
const newArr = arr.filter(n => n > 10) // [67]

map

map 接受一个回调函数，它将会遍历数组，该函数每次的返回值，会作为函数内部新数组的内容，遍历完成后，map 会返回这个新数组，需要接受。由于返回的是新数组，所以可以链式编程。

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

reduce

reduce 接受一个回调函数，它将会遍历数组。它的作用是对数组内容进行汇总，该回调函数的第一个参数是一个函数，接受两个参数，一个表示上一次执行该函数返回的值(previousValue)，一个表示数组当前值(currentValue)。回调函数的第二个参数是初始值，用于表示第一次执行第一个参数(它是函数)时，(previousValue) 的值。遍历完成后， reduce 会返回这个汇总的值(previousValue)，需要接收。

// arr.reduce((previousValue, currentValue) => {}, originValue)
// 源码中对 reduce 进行了两次声明，因为是 ts 写的，所以第一次声明不会被第二次声明覆盖，两者都会存在，这叫做重载。
const arr = [1,2,3]
const totalVal = arr.reduce((prev, current) => prev + current) // 6
const totalVal = arr.reduce((prev, current) => prev + current, 0) // 6
const totalVal = arr.reduce((prev, current) => prev + current, 7) // 13

// 注意，当数组中被遍历的项为对象时，必须加上初始值，因为对象与数值相加,两者都会自动调用 toString() 方法后相加。
const arr = [{a: 1}, {a: 2}, {a: 3}]
const totalval = arr.reduce((prev, current) => prev + current.a) // "[object Object]23"
const totalval = arr.reduce((prev, current) => prev + current.a, 0) // 123