js中reduce()方法的使用

一、前言：for循环可以做到的事情reduce()都可以做到，甚至操作起来更加简单方便和高雅。reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。

二、语法：arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）
    1、total （上一次调用回调返回的值，或者是初始值initialValue）
    2、currentValue （数组中当前被处理的元素）
    3、index （可选，当前元素在数组中的索引）
    4、array （可选，当前元素所属的数组对象）

initialValue （可选，初始值，作为第一次调用 callback 的第一个参数。）

三、使用 ：箭头函数 + reduce()

1.基础用法：累加和累乘

let arr = [1,2,3,4,5];

//普通求数组累加的方式
function handleSum1(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

//采用reduce()方式数组累加
function handleSum2(arr) {
  function sum(x, y) {
    return x + y
  }
  return arr.reduce(sum, 0);
}

//修改为箭头函数 + reduce()方式数组累加
function handleSum3(arr) {
    return arr.reduce((x,y) => x + y, 0)
}

//箭头函数 + reduce()方式数组累乘
function handleMultip(arr) {
    return arr.reduce((x, y) => x * y, 1);
}

 2.获取一个数组的最大值和最小值

let arr = [111, 2.22, 33.3, 444];

//普通写法求最大值
function max(arr){
  let max = arr[0];
  for (let i of arr) {
    if(i > max) {
      max = i;
    }
  }
  return max;
}

//修改后
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

 3. 简单数组去重

const arr = [1,2,3,4,4,1]

const newArr = arr.reduce((total,item)=>{
	return !total.includes(item) ? total.concat(item) : total;
},[])
console.log(newArr);

 

 

4.数组对象去重

const arr = [
	{type:'苹果',id:1},
	{type:'香蕉',id:1},
	{type:'苹果',id:2},
	{type:'菠萝',id:3},
	{type:'桃子',id:4}
]
const obj = {}
const newArr = arr.reduce((total,item)=>{
	!obj[item.id] ? obj[item.id] = true && total.push(item) : '';
	return total;
},[])
console.log(newArr);

5.多维数组转化为一维

let arr = [111, 2.22, [1, 2, [4, 5, [0]]]];

//多维数组转化为一维
function newArr(arr = []) {
    return arr.reduce((t, v) => t.concat(Array.isArray(v) ? newArr(v) : v), [])
}
console.log(newArr(arr));

 6.统计数组中每个元素出现的次数 

let obj = {};
let arr = [111, 2.22, 111, 2, obj, obj, '3', 'lemon'];

//方法一：统计数组中的次数
function handleCount(arr) {
    return arr.reduce(function(result, i){
        //result.get()查询对应键的值
        if (result.get(i) != undefined) {
            // result.set()创建键值对，如果该元素已经出现过，则将其出现频率增加1。
            result.set(i, result.get(i) + 1)
        } else {
            // 否则，则将其出现频率设置为1
            result.set(i, 1); 
        }
        return result;
    }, new Map());
}

//方法二：(if) in 用来判断一个属性是否属于一个对象。
let countNum = arr.reduce((total, item) => {
	 item in total ? total[item]++ : total[item] = 1;
     return total;
 }, {});

console.log(handleCount(arr),countNum)	

注意：这里使用map对象而不是对象{}来存储统计后的频率，因为数组中的元素可能是对象类型，而对象的key只能是字符串或符号类型。