面试:js手动实现reduce方法

1,578 阅读2分钟

马上又开始面临金九银十了,找工作的好时机了,这几天跟公司的hr小姐姐早上吃饭的时候聊了聊, 问最近招聘简历收得怎么样, 她说每天收到的简历比以前多多了,(害、她不会以为我也要跳槽吧~~~) 又想起以前我面试找工作的经历了,说起来都是泪~~

想起以前面试一家公司,

面试官问:你听说过reduce吗?

我:那必须听过呀

面试官:那你用reduce来实现一下数组去重?

我内心尼玛万马奔腾~~

结果不用多说这家面挂了,回来仔细的看了看reduce的用法

语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数

callback 必需。用于执行每个数组元素的函数。

  • accumulator 初始值, 它是上一次调用回调时返回的累积值
  • currentValue 当前元素
  • index 数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。
  • array 调用reduce()的数组(可选) initialValue 传递给函数的初始值(可选)

用法

首先reduce能干啥呢?他是es5数组中新增的一个方法,可以用来求和、去重、组合等等

  • 求和
[0, 1, 2, 3].reduce((accumulator, currentValue)=> {
  return accumulator + currentValue;
}, 0);
// 和为 6
  • 去重
var arrData = [
    {id: 0, name: "小明"},
    {id: 1, name: "小张"},
    {id: 2, name: "小李"},
    {id: 3, name: "小孙"},
    id: 1, name: "小周"},
    {id: 2, name: "小陈"},
];
var obj = {};
arrData = arrData.reduce((cur,next) => {
    if(!obj[next.id]){
        obj[next.id] = true
        cur.push(next);
    }
    return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
console.log(arrData);//打印出数组去重后的结果

一看去重这写法,太简单了,利用对象的key值唯一性,哎,一想到那时候自己,脑袋真的是秀逗了

  • 组合 这我们经常看到的是在redux中源码中用到的组合

源码

平常隔鸡在工作中经常用到这个reduce api,总有点好奇怎么实现的呢?于是想着自己看能不能手动去实现,模拟一下源码 说干就干

Array.prototype.reduce = function(callback,prev){
    // this 代表这个源数组
    for(let i=0;i<this.length;i++){
        if(prev===undefined){
            prev = callback(this[i],this[i+1],i+1,this)
            i++
        }else{
            prev = callback(prev,this[i],i,this)
        }
    } 
    return prev
}

嘿嘿,发现还挺简单的