面试官：请你实现一下map / filter / reduce | 数据基础方法的模块化实现

2021-04-09 18:01:13 阅读：143 来源： 互联网

标签：pre map 面试官 return reduce ArrayExent ele let arrTan

数组基础方法的实现是前端面试常问的点，有时我们感觉自己写出了解法面试官却不满意，那是因为我们只注重了功能实现，而未考虑模块化开发导致的，下面介绍如何实现并封装数组常用的多个方法。

首先，我们定义一个类，这个类继承自Array类，所以Array类的方法它也都包括，我们可以使用new通过该类构建一个数组实例，这个实例和普通数组没有分别。

class ArrayExent extends Array{
	test(){
        console.log("新定义的方法被调用了");
    }
}

let arrTan = new ArrayExent(1,2,3);
console.log(arrTan) // [1 ,2, 3]

可以看到，通过new ArrayExent创建的数组实例是就是一个正常数组。

另外，我们在ArrayExent上定义了方法test，这个方法会写到ArrayExent的原型对象中去，这是ArrayExent数组的不同之处，它比正常数组多了一个方法test，ArrayExent数组实例可以调用ArrayExent类原型对象上的方法，因为它是ArrayExent的实例。

arrTan.test(); // 新定义的方法被调用了

所以，我们只要将方法写到ArrayExent类中，就可以拥有可以调用我们自定义方法的数组实例了。

对于数据的基础方法这里就不多做介绍，直接上实现。

class ArrayExent extends Array{
    test(){
        console.log("新定义的方法被调用了");
    }
    mapExent(callBackFun){
        // 调用传入的函数 映射所有的项到新数组
        let arrRes = [];
        for(let i = 0; i < this.length; i++){
            arrRes[i] = callBackFun(this[i], i, this);
        }
        return arrRes;
    }
    everyExent(callBackFun){
        // 调用传入的函数 全部返回true则返回true
        let res = true;
        for(let i = 0; i < this.length; i++){
            res = res && callBackFun(this[i], i, this);
        }
        return res;
    }
    someExent(callBackFun){
        // 调用传入的函数 一个返回true则返回true
        let res = false;
        for(let i = 0; i < this.length; i++){
            res = res || callBackFun(this[i], i, this);
        }
        return res;
    }
    filterExent(callBackFun){
        // 返回true则为新数组的一部分
        let arrRes = [];
        for(let i = 0; i < this.length; i++){
            if(callBackFun(this[i], i, this)) {
                arrRes.push(this[i]);
            }
        }
        return arrRes;     
    }
    reduceExent(callBackFun, pre = -1){
        // 调用传入的函数 对pre进行处理
        let i = 0;
        if(pre === -1){
            pre = this[0];
            i++;
        }
        for(; i < this.length; i++){
            pre = callBackFun(pre, this[i], i, this);
        }
        return pre;
    }
}

let arrTan = new ArrayExent(1,2,3);

// every
let everyRes1 = arrTan.everyExent((ele,i,arr)=>{
    return ele !== 2;
})
let everyRes2 = arrTan.everyExent((ele,i,arr)=>{
    return ele !== 4;
})
console.log(everyRes1, everyRes2); // false true

// filter
let filterRes1 = arrTan.filterExent((ele,i,arr)=>{
    return ele === 2;
})
let filterRes2 = arrTan.filterExent((ele,i,arr)=>{
    return ele !== 2;
})
console.log(filterRes1, filterRes2); // [2] [1, 3]

//map
let mapRes1 = arrTan.mapExent((ele,i,arr)=>{
    return ele + 1;
})
console.log(mapRes1); // [2, 3, 4]

//some
let someRes1 = arrTan.someExent((ele,i,arr)=>{
    return ele !== 2;
})
let someRes2 = arrTan.someExent((ele,i,arr)=>{
    return ele === 4;
})
console.log(someRes1, someRes2); // true false

//reduce()
let reduceRes1 = arrTan.reduceExent((pre, ele,i,arr)=>{
    return ele + pre;
}, 10)
let reduceRes2 = arrTan.reduceExent((pre, ele,i,arr)=>{
    return ele + pre;
})
console.log(reduceRes1, reduceRes2); // 16 6

标签：pre,map,面试官,return,reduce,ArrayExent,ele,let,arrTan
来源： https://blog.csdn.net/weixin_45809580/article/details/115556164

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

面试官：请你实现一下map / filter / reduce | 数据基础方法的模块化实现