彻底掌握高阶遍历函数——reduce

语法

reduce(callback(rel,item[,index,array]){return ……},initVal)
【】包起来的是非必传元素

reduce(callback(累加器,当前被遍历的元素){return 运算体……}，初始值)

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

代码上手

1. 数组求和

    //reduce接收一个回调参数（必选）和初始值（非必选）作为参数，数组每个元素都会执行回调函数，并将结果传给下一次回调函执行
    //如果没有初始值，那么遍历从下标1开始执行；有初始值，从下标0开始遍历

    //数组相加   每次拿第一个元素和第二个元素相加，结果赋给累加器进行第二轮回调函数
    var arr = [1, 2, 3, 4, 5]

    let res = arr.reduce((rel, item, index, Arr) => {  //rel是累加器，item是每次被遍历的元素，
      console.log('rel=' + rel, 'item=' + item, 'index=' + index, 'Arr=' + [Arr]);//不定义初始值的情况下，rel是数组[0]，item是数组[1]
      return rel + item
    })
    console.log(res); //15
    let res1 = arr.reduce((rel, item, index, Arr) => {  //rel是累加器，item是每次被遍历的元素，
      console.log('rel=' + rel, 'item=' + item, 'index=' + index, 'Arr=' + [Arr]);//不定义初始值的情况下，rel是数组[0]，item是数组[1]
      return rel + item
    },0)
    console.log(res1);  //15 加初始值会多执行一次循环，累加器从初始值0开始

2. 数组中对象求和

    var objArr = [{ subject: '数学', marks: 78 }, { subject: '物理', marks: 80 }, { subject: '化学', marks: 93 }]

    console.log(objArr.reduce((rel, item) => {
      console.log(rel);
      return rel + item.marks
    }, 0));  //251
    //等同于  如果没有初始值，那么遍历从下标1开始执行；有初始值，从下标0开始遍历
    console.log(objArr.reduce((rel, item) => {
      console.log(rel);   //从下标1开始遍历，只执行2次函数，第一次为下标1的元素，是个{}，第二次是相加的结果，是number，所以写了条件判断
      return (rel.marks || rel) + item.marks
    }));  //251

3. 多维数组展开

    //将多维数组转化为一维
    let arr = [[0, 1], [2, 3], [4, [5, 6, 7]],0]

    let newArr=function(arr) {
      return arr.reduce((rel, item) => {
        //拿一个[]拼接每个元素，判断元素是不是数组，递归遍历，返回的也还是数组
        return rel.concat(Array.isArray(item)?newArr(item):item)
      }, [])
    }
    console.log(newArr(arr));

4. 数组去重

    //数组去重
    let arr = [1,2,3,4,4,1]
    console.log(arr.reduce((rel,item)=>{
      rel.indexOf(item)==-1?rel.push(item):'';
      return rel;
    },[]));

    console.log(arr.reduce((rel,item)=>{
      rel.includes(item)?rel.push(item):'';
      return rel 
    },[]));

实践是学习知识的捷径——2021，3.21，23:35