js-数组之reduce()

202 阅读2分钟

数组中有很多的方法,今天我们就要介绍一下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}