js-数组之reduce()

数组中有很多的方法，今天我们就要介绍一下reduce().

思考：

    怎样对数组中的每一项进行累加呢？
复制代码

方法一：

    const nums = [1,2,3,4]
    let value = 0
    for (let i = 0; i < nums.length; i++) {
        value += nums[i]
    }
复制代码

方法二：

    const nums = [1,2,3,4]
    const value = nums.reduce((acc, next) => acc + next,0) //第二个参数可有可无
复制代码

是否第二个方法，更加简单节省代码量呢~

什么是reducer?

1.总返回一个值（这个值可以是number,string,array,object）

2.它有很多的用法，但是最有用的是处理一组值，并返回相对应的一个结果。

MDN 上的解释：

    reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值
复制代码

语法：

    arr.reduce(callback[initialValue])
    
    
    1.callback 执行数组中每个值返回的函数，包含四个参数
        （1） accumulate 累计器累计回调的返回值。
        （2） currentValue 数组正在处理的元素
        （3） currentIndex | 可选 数组中正在处理的当前元素的索引
        （4） array | 可选  调用reduce()的数组
    2.initialValue | 可选
        作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素
复制代码

上述方法二完整的写法：

    const nums = [1,2,3,4]
    const initialValue = 0
    const reducer = (acc, item) => {
        console.log(`acc: ${acc}, item: ${item}, Return value: ${acc + item }`) //方便看执行过程
        return acc + item
    }
    const total = nums.reduce(reducer, initialValue)
    
    ///
    "Acc: 0, Item: 1, Return value: 1"
    "Acc: 1, Item: 2, Return value: 3"
    "Acc: 3, Item: 3, Return value: 6"
    "Acc: 6, Item: 4, Return value: 10"
复制代码

缩写便成了上述的方法二

再来几个例子：

   计算数组中有多少数字，并每个数字出现几次
复制代码

   const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

    const result = nums.reduce((tally, amt) => {
          tally[amt] ? tally[amt]++ : tally[amt] = 1
          return tally
    }, {})
    
    console.log(result)
    
    
    /结果：
    {1: 1, 3: 2, 4: 1, 5: 2, 6: 1, 82: 2}
    
复制代码

   对数组中的数字进行一定的筛选（通过一定的条件）
复制代码

    const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]
    
    const result = nums.reduce((acc, item) => {
          acc[item] = {
            odd: item % 2 ? item : item - 1,
            even: item % 2 ? item + 1 : item
          }
          return acc
    }, {})
    
    console.log(result)
    
    ///
    1:{odd: 1, even: 2}
    3:{odd: 3, even: 4}
    4:{odd: 3, even: 4}
    5:{odd: 5, even: 6}
    6:{odd: 5, even: 6}
    82:{odd: 81, even: 82}
    
复制代码

转载于:https://juejin.im/post/5c5011216fb9a049e2326904