关于JavaScript常用的几个高阶函数(filter, map, reduce)

原本打算昨天发一篇博文，家里有事给忘了，今天发2篇吧，都是个人学习过程中的一些总结。

---

操作用数据(纯数字数组):

const nums = [10, 20, 111, 222, 444, 50, 453]

1、filter

filter函数用来过滤满足指定条件的数组，调用时需要传入一个函数，该函数内部需要设立一个条件，并且能为该函数返回一个布尔值结果。

返回数组nums中所有小于100的元素
使用例：

let newNums = nums.filter(function (n) {
   return n < 100
 })

console.log(newNums) // [10, 20, 50]

2、map

map函数调用时需要传入一个函数，最终可以返回一个新数组，新数组中的元素为原始数组元素调用函数处理后的值（按顺序依次处理）。

比如，可以将上面filter函数处理后的newNums进行一个计算处理（所有元素乘以2）
使用例：

let new2Nums = newNums.map(function (n) {
  return n * 2
})
 console.log(new2Nums) // [20, 40, 100]

- 接口数据映射

从接口得到数据 res:

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})

也可以省略 return：

const users = res.items.map(item => ({
    url: item.html_url,      
    img: item.avatar_url,      
    name: item.login,
    })
);

3、reduce

用于计算数组元素相加后的总和，原理就是一个累加器，将数组元素从左往右依次缩减并相加，每次相加后将当前的和，与下一个数组元素再次相加，从而得出最终的和。

使用时需要必须传入一个函数，且该函数必须传入2个参数，可选传入一个值用于决定“必须参数1”的初始值

- 必须参数1：计算的初始值，或计算结束后的返回值
- 必须参数2：当前元素

如果此时需要将上面map函数处理后的new2Nums进行累加计算
使用例：

let total = new2Nums.reduce(function (preValue, n) {
  return preValue + n // 0 + 20 = 20, 20 + 40 = 60, 60 + 100 = 160
}, 0) // 此处的0即定义了preValue的初始值

console.log(total) // [160]

---

- Recorded by Scorpio_sky@2020-08-28