数组的相关操作（三）数组之reduce方法——数组求和、数组去重和对象去重、求和、求最值、字符串字符出现次数 & 计算商品总价格

数组的相关操作（三）数组之reduce方法——数组求和、数组去重和对象去重、求和、求最值、字符串字符出现次数 & 计算商品总价格

1、参数介绍

array.reduce((pre, cur, index, arr)=>{
	...
}, init);

pre: 必需。初始值, 或者计算结束后的返回值。
cur： 必需。当前元素。
index： 可选。当前元素的索引。
arr： 可选。当前元素所属的数组对象。
init: 可选。传递给函数的初始值，相当于pre的初始值。
reduce里面有一定要return，return出去的值也要注意

reduce可以接受两个参数，reduce接受的第一个参数是一个方法，该方法可以接受四个参数，第一个参数为上一次函数调用的返回值（第一次调用时默认是数组的第一个元素），第二个参数为当前被遍历的元素，第三个参数为当前遍历元素的下标，第四个参数为执行reduce方法的原数组，reduce接受的第二个参数是第一个参数方法第一次调用的返回值的初始值（默认是数组的第一个元素）。

reduce可以遍历调用该方法的数组并使用传入参数方法，返回遍历完成后最终的执行结果，不会修改原数组。

2、示例

1.1-数组求和

//数组求和
var arr = [0,1,2,3,4];
var sum = arr.reduce( (prev,cur) => prev+cur ); // sum 为 10

上面的代码执行过程可以通过下面的代码来了解

var sum = arr.reduce((prev,cur,ind) => { 
    console.log(ind+' : prev=' + prev + ' cur=' + cur) 
    return prev + cur
});
console.log('sum=' + sum)
//0 : prev=0 cur=1
//1 : prev=1 cur=2
//2 : prev=3 cur=3
//3 : prev=6 cur=4
//sum=10

1.2-数组内元素属性求和

//数组内元素属性求和
var arr = [{num:0},{num:1},{num:2},{num:3},{num:4}];
var sum = arr.reduce((prev,cur) => prev+cur.num , 0 ); // sum 为 10
// prev初始值设置为0，否则将默认为{num:0}，无法累加

2.1-基本数据类型去重

let arr2 = [9, 4, 3, 6, 9];
//基本类型去重
let set = arr2.reduce((pre, cur) => {
    !pre.includes(cur) && pre.push(cur)
    return pre
}, [])
console.log(set);  //[9,4,3,6]

2.2-引用数据类型去重

let result = [
    {
        subject: "数学",
        marks: 80
    },
    {
        subject: "语文",
        marks: 90
    },
    {
        subject: "英语",
        marks: 80
    },
]
let object = {}
let array = result.reduce((pre, cur) => {
    // object[cur.marks] ? "" : object[cur.marks] = true && pre.push(cur)
    if (!object[cur.marks]) {
        object[cur.marks] = true
        pre.push(cur)
    }
    return pre
}, [])
console.log(array);  //[{subject:"数学",marks:80}，{subject:"语文"：90}]

3.1-基本数据类型求和

let arr2 = [9, 4, 3, 6, 9];
let sum = arr2.reduce((pre, cur) => {
    return pre + cur
},0)
console.log(sum)   //31

3.2-引用数据类型求和

let arr = [
  {
    value: 45,
  },
  {
    value: 88,
  },
  {
    value: 101,
  },
];
let newArr = arr.reduce((pre, cur) => {
  return pre + cur.value;
}, 0);
console.log(newArr);   // 234

4-求最大值和最小值

let arr2 = [9, 4, 3, 6, 9];
let max = arr2.reduce((prev, cur)=> {
    return Math.max(prev, cur);
})
let min= arr2.reduce((prev, cur)=> {
    return Math.min(prev, cur);
})
console.log(max,min);   //9,3

5-求字符串中各个字符出现的次数

//示例1  统计字符串中每个字符出现次数
var str = 'aaabbccddddd'
var strArr = str.split('')
var strArrRes = strArr.reduce(function(res, cur) {
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
},{}) // 将res为初始化为一个空对象，否则res默认为‘a’字符串，即strArr的第一个元素
console.log(strArrRes); // {a: 3, b: 2, c: 2, d: 5}


//示例2
const str = 'jordanbryantjamescurrydurant';
const res1 = str.split('').reduce((pre, cur) => {
    pre[cur] ? pre[cur]++ : pre[cur] = 1;
    return pre;
}, {});
console.log(res1);  //{j:2,o:1,r:5,d:2,...}
let arr = []
let num = Math.max(...new Set(Object.values(res1)))
let value;
for (let keys in res1) {
    if (res1[keys] == num) {
        value = keys
        break
    }
}
console.log(`出现最多的字母为${value},出现的次数为${num}次`); //出现最多的字母为r,出现的次数为5次

6.1-二维数组转化为一维

let arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
let res = arr.reduce((pre, cur) => {
    return pre.concat(cur)
},[]);
console.log(res)  //[1, 2, 8, 3, 4, 9, 5, 6, 10]

6.2-多维数组转化为一维

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

3、实例-计算所有商品在不同汇率下的总价格

//计算所有商品在不同汇率下的总价格
//汇率数据对象
var exchangs = {euro: 0.888, dollar: 0.666, rmb: 1}
//商品列表
var itemArr = [{price: 10}, {price: 100}, {price: 1000}]
//累加器函数
var reducer = function(exc){
    //接受 汇率数据参数 返回 一个新函数 作为调用是的参数方法 
    return function(res,cur){
        //遍历所有汇率 将每一种汇率的价格累加 
    	var totalRes = Object.keys(exc).reduce(function(useless,excKey){
            res[excKey]?res[excKey]+=cur.price*exc[excKey]:res[excKey]=cur.price*exc[excKey]; 
            return res;
        },{});
        //返回计算结果
        return totalRes;
    }
}
//使用商品列表 调用reduce 计算结果初始值设置为{euro:0, dollar: 0, rmb: 0}
var totalResult = itemArr.reduce(reducer(exchangs),{euro:0, dollar: 0, rmb: 0});
console.log(totalResult);
//{euro: 985.68, dollar: 739.26, rmb: 1110}