js 高阶函数

filter map reduce

• filter 高阶函数的用法

filter 中的回调函数有一个要求:
必须返回一个boolean值
当,返回 true时的, 内部会将这次遍历的元素放入一个新的数组汇总
当,返回false时, 内部会过滤掉当前遍历的元素

const nums = [200, 120, 19, 60, 10, 20, 40,100];
const arr_100 = nums.filter((num)=>{
    //取出 > 100 的数, 放入新数组
        return num > 100
    })
    console.log(arr_100);

• map 高阶函数的使用

如果需要对数组里面的所有元素进行处理, 得到一个新的数组就可以 使用map
map 函数也是需要一个函数类型的参数

 //const nums = [200, 120, 19, 60, 10, 20, 40,100];
  将 nums 中的所有元素 乘以2 得到一个新的数组
    const arr_map = nums.map((num)=>{
        return num  * 2
    })
    console.log(arr_map);

• reduce 高阶函数的使用

reduce 对数组中的所有内容进行汇总, 可以把reduce函数理解成一个迭代函数

1. reduce 函数有2个参数, 第一个是 迭代回调参数,是一个函数类型(有两个参数 previous 和 current)
2. 第二个参数是初始化参数
3. 第一个迭代参数, 第一次回调时 previous 就是初始化参数, 后面的每次回调就是 return返回的值

    const arr = [10,20,30,40]
    const  initParam = 1
    let total = arr.reduce((previousItem, currentItem)=>{
        console.log('pre: ' +  previousItem, 'current: +' + currentItem);
        return previousItem + currentItem;
    }, initParam)
    console.log('total: ' +  total);

打印结果:
pre: 1 current: +10
pre: 11 current: +20
pre: 31 current: +30
pre: 61 current: +40

 total: 101

• filter map reduce 高阶函数综合应用

// 高阶函数 filter map  和 reduce 的综合使用
    const counters = [1,2,3,4,5,6,7,8,9,10];

    let totalCount = counters.filter((count)=>{
        return count%2 == 0
    })  // 取出所有的偶数
    .map((doubleCount)=>{
        return doubleCount * 2;
    }) // 每个偶数 都乘以2
    .reduce((pre, current)=>{
        return pre + current
    },0) // 将所有的偶数 相加
    console.log('总数:  ', totalCount);