数组 reduce 简介及使用场景

本是古典何须时尚 2022-10-15 10:48 163阅读 0赞

## （一）reduce的作用 ##

**1 . 数组求和，求乘积**  
**2 . 计算数组中每个元素出现的次数**  
**3 . 数组去重**  
**4 . 数组扁平化（将二维，或者多维数组转化为一维数组）**  
**等等等等…基本上数组方法能做的事情，reduce都能做**

大部分现代的数组方法都返回一个新的数组，而 `Array.reduce()` 更加灵活。它可以返回任意值，它的功能就是将一个数组的内容聚合成单个值。这个值可以是数字、字符串，甚至可以是对象或新数组

## （二）reduce的参数 ##

**`reduce`的参数，只接收两个参数，`1. 回调函数（必填）`，`2. initValue 初始值（非必填）`**  
**注意：回调函数有四个参数**

对空数组调用reduce()和reduceRight()是不会执行其回调函数的，可认为reduce()对空数组无效

**1 . Accumulator （累计器)，上一次回调函数的返回值，如果有initValue，他就表示为initValue的值**  
**2 . Current Value 当前正在处理的数组元素**  
**3 . Current Index 当前正在处理的数组元素的索引，如果提供了initValue ，则索引值为0，否则索引值为1**  
**4 . Source Array 源数组**

const numArr = [1, 2, 3, 4, 5]
    const sum = numArr.reduce(function (accumulator, currentValue, currentIndex, array) { 
      console.log(accumulator, currentValue)
      return accumulator + currentValue;
    })
    // 这里因为没有init值，所以输出，1 2（没有init时，循环 length - 1 次）

const numArr = [1, 2, 3, 4, 5]
    const sum = numArr.reduce(function (accumulator, currentValue, currentIndex, array) { 
      console.log(accumulator, currentValue)
      return accumulator + currentValue;
    }, 5)
    // 这里因为有init值，所以输出，5 1（有init时，循环 length 次）

## （三）利用reduce，求数组内所有元素的和，积 ，最大值，最小值 ##

**求和**

const numArr = [1, 2, 3, 4, 5]
    const sum = numArr.reduce((pre, cur, index, arr) => { 
      return pre + cur
    })
    
    // 封装成函数
    function Accumulation(val) { 
      return val.reduce((pre, cur) => pre + cur);
    }
    console.log(Accumulation(numArr)) // 15

**求积（跟求和一样，就是把 `+` 换成 `*` ）**

const numArr = [1, 2, 3, 4, 5]
    const sum = numArr.reduce((pre, cur, index, arr) => { 
      return pre * cur
    })
    
    // 封装成函数
    function Multiplication(val) { 
      return val.reduce((pre, cur) => pre * cur);
    }
    console.log(Multiplication(numArr)) // 120

**求最大值**

const numArr = [12, 45, 21, 65, 38, 76, 108, 43];
    
    function maxNum(arr = []) { 
      return arr.reduce((pre, cur) => pre > cur ? pre : cur)
    }

**求最小值**

const numArr = [12, 45, 21, 65, 38, 76, 108, 43];
    
    function maxNum(arr = []) { 
      return arr.reduce((pre, cur) => pre < cur ? pre : cur)
    }

## （四）利用reduce，计算数组中每个元素出现的次数 ##

const nameArr = ['佩可莉姆', '可可萝', '凯露', '可可萝', '真步', '佩可莉姆', '可可萝']
    // 设置一个初始值，init为空对象{}
    const sum = nameArr.reduce((pre, cur, index, arr) => { 
      // 如果：当前值在上次的返回值中，则让他的value值++
      // pre[cur] 相当于 obj.key 
      if (cur in pre) { 
        pre[cur]++
      }
      // 否则： pre[cur] = 1 的意思类比于 obj.key = value
      // 因为这是 else 的值，这个 key，肯定不在这个对象中，如果一个对象的不存在这个 key ，我们又用obj.key的形式声明
      // 则会直接给该对象添加属性，并赋值
      else { 
        pre[cur] = 1
      }
      return pre;
    }, { })
    // { 佩可莉姆: 2, 可可萝: 3, 凯露: 1, 真步: 1 }
    
    // 封装成函数
    function Count(arr = []) { 
      return arr.reduce((pre, cur) => (pre[cur] = (pre[cur] || 0) + 1, pre), { });
    }

**如果你看不懂封装成函数的这段代码，下面是解释**

1 . 逗号表达式（逗号运算符）**逗号运算符是二元运算符，它能够先执行运算符左侧的操作数，然后再执行右侧的操作数，最后返回最右侧操作数的值。**  
举个例子：  
**与条件运算符、逻辑运算符根据条件来决定是否执行所有或特定操作数不同，逗号运算符会执行所有的操作数，但不会返回所有操作数的结果，它只返回最后一个操作数的值。（也就是例子中的 x \* 8）**

const exampleNum = (x = 5 + 3, x = x - 4, x * 8)
    console.log(exampleNum) // 32

const nameArr = ['佩可莉姆', '可可萝', '凯露', '可可萝', '真步', '佩可莉姆', '可可萝']
    // 封装成函数
    function Count(arr = []) { 
      // 第一次循环 pre = {}，cur = '佩可莉姆'
      // 第二次循环 pre = { '佩可莉姆':1 } ， cur = '可可萝'
      // 第三次循环同理 结束时 pre = { '佩可莉姆':1 , '可可萝':1, '凯露':1}
      // 第四次循环 开始时 pre = { '佩可莉姆':1 , '可可萝':1, '凯露':1}
      return arr.reduce((pre, cur) => (
        // 第一次循环 {}.佩可莉姆 = {}.佩可莉姆 || 0 因为此时，{}.佩可莉姆 = undefined 所以这里 = 0 + 1
        // 然后返回 pre 也就是 { '佩可莉姆':1 }
    
        // 第二次循环 { '佩可莉姆':1 }.可可萝 = { '佩可莉姆':1 }.可可萝 || 0，同理 { '佩可莉姆':1 }.可可萝 = undefined，所以这里 = 0 + 1
        // 然后返回 pre 也就是 { '佩可莉姆':1 , '可可萝':1}
    
        // 第四次循环 { '佩可莉姆':1 , '可可萝':1, '凯露':1}.可可萝 = { '佩可莉姆':1 , '可可萝':1, '凯露':1}.可可萝 || 0 ，
        // 这时 { '佩可莉姆':1 , '可可萝':1, '凯露':1}.可可萝 = 1 已经有值了，不会走||运算了，之后再 + 1 
        // 然后返回 pre 也就是 { '佩可莉姆':1 , '可可萝':2, '凯露':1 }
        pre[cur] = (pre[cur] || 0) + 1, pre
      ), { });
    }

## （五）数组扁平化 ##

`Array.concat()`可以传入数组，也可以传入值  
**（数组扁平化`Array.flat(Infinity)`数组自带扁平化的方法，但是兼容性不太好，IE浏览器更是一点都不兼容，但是新版本的IE（Edge）却可以完美支持）**

const numArr = [1, [2, [3, [4, [5]]]], 6]
    
    const newArr = (arr) => { 
      return arr.reduce((pre, cur) => { 
        return pre.concat(Array.isArray(cur) ? newArr(cur) : cur)
      }, [])
    }
    
    // 封装成函数
    function myFlat(arr = []) { 
      return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? myFlat(cur) : cur), [])
    }

## （六）数组去重 ##

const nameArr = ['佩可莉姆', '可可萝', '凯露', '可可萝', '真步', '佩可莉姆', '可可萝']
    
    function myUnique(arr = []) { 
      return arr.reduce((pre, cur) => pre.includes(cur) ? pre : [...pre, cur], [])
    }

## （七）数组对象去重 ##

## （八）斐波那契数列 ##

**存在一个问题，输入小于2的数，都会返回 \[0,1\]，这个问题可以根据自己的情况修改**

function myFibonacci(time = 2) { 
      const Arr = [...new Array(time).keys()]
      return Arr.reduce((pre, cur, index) => { 
        index > 1 && pre.push(pre[index - 1] + pre[index - 2])
        return pre
      }, [0, 1])
    }
    console.log(myFibonacci(1)) // [0, 1]
    console.log(myFibonacci(2)) // [0, 1]
    console.log(myFibonacci(10)) // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]