【JavaScript】数组reduce()方法的妙用

客官°小女子只卖身不卖艺 2022-11-26 01:40 168阅读 0赞

#### 1. reduce()方法简介 ####

Array.prototype.reduce()是一个数组的方法，平时用的是不特别多，但是用到的时候又特别好用，他的用处很多，下面先看一下MDN中的定义：

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

我们可以看到，reduce方法可以对数组每个元素执行一次回调函数，可以利用它来做一些累加等操作。

**语法：** `arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])`

**参数：**

*  **callback**：执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
    
     *  `accumulator`：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
     *  `currentValue`：数组中正在处理的元素。
     *  `index`： 可选，数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
     *  `array`：可选，调用reduce()的数组
 *  **initialValue**：可选，作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

**返回值：** 该方法会返回函数累计处理的结果

**描述：** reduce会为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素。

#### 2. 常用方法 ####

**（1）累加、累乘**

let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce((x,y)=>x+y)
    let mul = arr.reduce((x,y)=>x*y)
    console.log( sum ); //求和，15
    console.log( mul ); //求乘积，120

**（2）计算数组中每个元素出现的次数**

let letters = ['a', 'b', 'c', 'c', 'a'];
     
    let lettersNum = letters.reduce((pre,cur)=>{ 
     if(cur in pre){ 
      pre[cur]++
     }else{ 
      pre[cur] = 1 
     }
     return pre
    },{ }) // 初始值要设置为一个空对象
    console.log(lettersNum); //{a: 2, b: 1, c: 2}

**（3）数组去重**

let arr = [1,2,3,4,4,2,1]
    let newArr = arr.reduce((pre,cur)=>{ 
      if(!pre.includes(cur)){ 
       return pre.concat(cur)
      }else{ 
       return pre
      }
    },[]) // 初始值要设置为一个空数组
    console.log(newArr);// [1, 2, 3, 4]

**（4）将二维数组转化为一维数组**

let arr = [[0, 1], [2, 3], [4, 5]]
    let newArr = arr.reduce((pre,cur)=>{ 
      return pre.concat(cur)
    },[])
    console.log(newArr); // [0, 1, 2, 3, 4, 5]

**（5）将多维数组转化为一维数组**

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
    const newArr = function(arr){ 
      return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
    }
    console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

**（6）累加对象数组中的值**

let arr = [{ x: 1}, { x:2}, { x:3}]
    let sum = arr.reduce( (pre, cur) => pre + cur.x ,0);
    
    console.log(sum) // 6

**（7）求数组最大值**

let arr = [1, 2, 3, 4, 5];
    let max = arr.reduce((pre, cur) => { 
        return Math.max(pre,cur);
    });
    console.log(max) // 5