js【详解】arr.reduce() 数组缩减

目录

​​arr.reduce()的含义​​

​​arr.reduce()的语法​​

​​arr.reduce()的基础用法​​

​​arr.reduce()的高级用法​​

​​（1）计算数组中每个元素出现的次数​​

​​（2）数组去重​​

​​（3）将二维数组转化为一维数组​​

​​（3）将多维数组转化为一维数组​​

​​（4）对象里的属性求和​​

arr.reduce()的含义

reduce中文释义为“缩减”，arr.reduce() 即将数组中的每个值（从左到右）开始缩减，最终计算为一个值。

arr.reduce()的语法

arr.reduce()会对数组中每一项运行回调函数，返回最后一次回调函数的执行结果，格式如下：

arr.reduce((previousValue, item, index, arr) => {

}, initialValue)

共5个参数：

• previousValue：

• 第一次执行回调函数时，若initialValue有值，则使用initialValue，若initialValue没有值，则使用数组的第一个元素
• 从第二次执行回调函数开始，每次的值都是上一次调用回调函数时的返回值

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => {
        console.log(x)
        return x + y
    })
// 得到 1,3,6

let sum2 = arr.reduce((x, y) => {
        console.log(x)
        return x + y
    }, 10)
// 得到 10,11,13,16

• item：

• 第一次执行回调函数时，若initialValue有值，则使用数组的第一个元素，之后每次执行回调函数都使用下一个数组元素
• 若initialValue没有值，则使用数组的第二个元素，之后每次执行回调函数都使用下一个数组元素

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x, y) => {
        console.log(y)
        return x + y
    })
// 得到 2,3,4

let sum2 = arr.reduce((x, y) => {
    console.log(y)
    return x + y
}, 10)
// 得到 1,2,3,4

• index：item在数组中的下标
• arr：调用reduce()方法的数组
• initialValue：【可选】初始值（若initialValue有值，则第一次调用回调函数时会传给 previousValue ）

• initialValue有值时，回调函数执行 arr.length 次
• initialValue无值时，回调函数执行 arr.length -1 次

若arr为空数组，当initialValue没有值时，会报错，但当initialValue有值时，不会报错。

arr.reduce()的基础用法

arr.reduce()的基础功能便是实现累积调用，所以常用于数组求和，数组求乘积

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

arr.reduce()的高级用法

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

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

（2）数组去重

let arr = [1,2,3,4,4,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]

（3）将二维数组转化为一维数组

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]

（3）将多维数组转化为一维数组

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]

（4）对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60