js中的reduce函数

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

• reduce有两个参数

• reduce(回调函数，值)

• reduce中的回调函数有四个参数

  • 第一个参数，在第一次遍历时是reduce的第二个参数，后面的几次遍历是上一次遍历时，函数中返回的值
  • 第二个参数，遍历出来的value
  • 第三个参数，遍历出来的下标
  • 第四个参数，正在遍历的数组

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

运行结果如下图：

这是从结果中共可以看到输出的内容只有三行，也就是从下标为1的元素才开始输出，也就是代码运行一共循环了三次，再看下面的代码

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //在这里多加了一个0，也就是reduce的第二个参数
console.log(arr, sum);

运行结果如下图：

从运行结果可以看到加上reduce的第二个参数index就变成了充0开始，也就是循环了四次

• reduce的第二个参数其实就是回调函数的初始值，这个初始值还有一个好处就是如果调用reduce的数组为空数组会报错，但如果设置里初始值就不会报错

使用reduce计算数组中各个元素出现的次数

let nameList = ['Timi', 'Aoen', 'Feifei', 'Feifei', 'Timi'];

let nameNum = nameList.reduce((pre,cur)=>{
  if(cur in pre){ //通过in来判断当前值在对象里是否存在
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{}) //在这里设置初始值为{}
console.log(nameNum); //{Timi: 2, Aoen: 1, Feifei: 2}

• 使用reduce来进行数组去重

let arr = [1,3,3,5,5,2,4,4]
let result = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){  //通过includes来判断当前值是否在数组中
      return pre.concat(cur)
    }else{
      return pre
    }
},[]) //初始值设置为[]
console.log(result);// [1, 3, 5, 2,4]

• 二维数组转一维数组

let arr = [[0, 1], [1, 2], [2, 3]]
let result = arr.reduce((pre,cur)=>{
    return pre.concat(cur)//利用concat拼接两个数组的特性
},[])
console.log(result); // [0, 1, 1, 2, 2, 3]

-reduceRight和reduce作用一样，只是遍历的顺序相反

• 多维数组转一维数组

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const result = function(arr){
   return arr.reduce((pre,cur)=>
   pre.concat(Array.isArray(cur)?result(cur):cur) //如果当前值还是一个数组的话再调用result
   ,[])
}
console.log(result(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

总结

reduce用着还是很有逼格的，一定要记得用好初始值的设置，非常重要！！！