经典面试题第八更---reduce的使用

前言：
    🤡 作者简介：我是Morning，计算机的打工人，想要翻身做主人 🙈 🙈 🙈
    🏠 个人主页： Morning的主页
    📕系列专栏：前端面试备战  
    📞 如果小编的内容有欠缺或者有改进，请指正拙著。期待与大家的交流
    🔥如果感觉博主的文章还不错的话，👍点赞👍 + 👀关注👀 + 🤏收藏🤏
 

目录

基本使用

1.数组元素运算

2.数组中各元素出现次数

3.数组去重（无奖竞猜）💃💃

4.数组降维

二维降一维

多维降一维

5.对象的属性求和

6.一道笔试题

数组去重补充

 

---

 

在此篇博客撰写中我遇到了几个比较有意思的报错（第四题），于是想与大家分享一下。希望大家多多多支持

基本使用

先给大家介绍一下reduce的基本使用规则及其参数含义：

pre:上一次调用回调时的返回值或者初始值init。第一次调用时如果没有init，pre为数组的第一项

cur:当前元素的值。第一次调用时如果指定了init，则为第一项的值。无init，则为第二项

index:cur的下标

arr:调用者本身

arr.reduce(function(pre,cur,index,arr){
    ...
},init);
//或者
arr.reduce(function(pre,cur,index,arr){
    ...
})

实例：

const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const init = 0;
const sum1 = array1.reduce((pre, cur,index,arr) => {
  console.log(pre, cur,index);
  console.log(`${pre}+${cur},cur的下标为${index}`);
  return pre + cur
}, init);
console.log(sum1);

给出了init，所以第一次运算pre为0，cur为数组第一项(即arr[0])的值1 

也就是运算了0+1+2+3+4

1.数组元素运算

为了让大家掌握有无init的两种情况。这次的例子没有给出init，所以第一次运算，pre为第一项1，cur为第二项2 

也就是运算了1+2+3+4

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

 

 在熟悉之后参数名也就按大家自己喜好按照需求随意变换了了

var arr=[1,2,3,4]
var mul=arr.reduce((x,y)=>x*y)//即1*2*3*4
console.log(mul);//24

2.数组中各元素出现次数

此例中将pre的初始值定为了空对象，将cur作为pre的key，每个元素出现的次数就是key对应的value

var names=['Alice','Ben','Cris','Dog','Elephant','Ben']
var obj=names.reduce((pre,cur)=>{
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur]=1
    }
    return pre
},{})
console.log(obj);//{Alice: 1, Ben: 2, Cris: 1, Dog: 1, Elephant: 1}

3.数组去重（无奖竞猜）💃💃

以下是两种错误方案，看大家能不能找出其中的错误。在文章末尾会给出正确方法及其错误点

方案一（报错）

var names=['Alice','Ben','Cris','Dog','Elephant','Ben']
var obj=names.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.push(cur)
    }else{
        return pre
    }
    
},[])
console.log(obj);

 方案二（undefined）

var names=['Alice','Ben','Cris','Dog','Elephant','Ben']
var obj=names.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }
},[])
console.log(obj)

数组去重还有很多其他简便的方法，可以看我的此篇博客第二题经典面试题第六更---十月一的11道笔试题 

4.数组降维

二维降一维

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

多维降一维

判断cur是否是数组，如果是数组就进行递归直到变为数字，如果不是就合并数组

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

5.对象的属性求和

返回的值是没有score的，那就让给出初始值，让cur为第一项，然后累加就可以了

var result=[
    {
        subject:'Math',
        score:80
    },
    {
        subject:'English',
        score:10
    },
    {
        subject:'PE',
        score:100
    },
    {
        subject:'Chinese',
        score:100
    },
];
var sum=result.reduce((pre,cur)=>{
    return cur.score+pre
},0)
console.log(sum);

6.一道笔试题

需求：找出字符串后中出现次数最多的字母

var str='aabbcccdddd'
function getObj(str){
    const arr=str.split('')
    return arr.reduce((pre,cur)=>{
        if(cur in pre){
            pre[cur]++
        }else{
            pre[cur]=1
        }
        return pre
    },{})
}
var strObj=getObj(str)
console.log(strObj);//{a: 2, b: 2, c: 3, d: 4}
//出现次数最多的字母
var maxStr
//出现了max次
var max=0
for(var key in strObj){
    if(max<strObj[key]){
        max=strObj[key]
        maxStr=key
    }
}
console.log(`出现次数最多的字母是${maxStr}，出现了${max}次`);
//出现次数最多的字母是d，出现了4次

数组去重补充

正确代码

var names=['Alice','Ben','Cris','Dog','Elephant','Ben']
var obj=names.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }else{
        return pre
    }
},[])
console.log(obj);//['Alice', 'Ben', 'Cris', 'Dog', 'Elephant']

方案一错误：return pre.push(cur)     push返回的值是数组的长度，这个返回值在下一次运算中会作为继续使用，数字是没有includes方法的，就会报错

方案二错误：在最后一次运算中没有走if，走了else，else又没有写return值。所以最后返回了undefined

 

所以reduce方法的使用搞清楚pre、cur、init重要，但是搞清楚return更重要。一定一定要记得return呀❗❗❗。

写此篇博客代码，我有很多次都忘记return......😢😢