原生JavaScript进阶训练---重写map方法

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

之前发过一期重写forEach方法的文章，然后更新了多期Electron的内容，现在Electron的内容暂时更新完了，我们继续重写JavaScript的内置方法。

今天重写数组的扩展方法map。

先看一下map的基础用法：

var arr = [
            {
                name:'张三',
                age:34
            },
            {
                name:'李四',
                age:25
            },
            {
                name:'王五',
                age:21
            },
            {
                name:'刘六',
                age:28
            }
];

var obj = {
    name:'Jacky',
    age:3
};

var newArr =  arr.map(function(item,index,array){
    console.log(this);
    item.name = obj.name;
    return item
},obj);   

console.log(newArr);

map与forEach不同的是，map会返回一个新的数组。

map的参数和forEach类似，一个必须要有的回调函数，一个可选的对象。

回调函数的参数，还是item，index，array，作用和forEach一样。

和forEach不同的就是，map可以在回调函数里对每一项数据进行一些处理，然后再返回一个新数组出去。

看下我上面发的示例，首先我们传入了map的第二个参数obj，然后在回调函数内部，对每一项数据进行了一个处理，把arr每一项的name值改为了obj的name值，即Jacky，并且把item给return回去了。

通过控制台输出我们可以发现，在回调函数内部的this指向的是传入的第二个参数obj。然后返回的新数组newArr的每一项的name值都变成的obj的name，Jacky。

以上就是原生map方法的使用过程。接下来我们对它进行重写。

Array.prototype.myMap = function(callBack){
    var _arr = this;
    var _len = _arr.length;
    var _arg2 = arguments[1] || window;
    var _newArr = [];
    var _item;
    var _res;

    for(var i = 0; i < _len; i++){
        _item = deepClone(_arr[i]);
        _res = callBack.apply(_arg2,[_item,i,_arr])
        _res && _newArr.push(_res);
    }

    return _newArr;
};

我们在Array对象的原型上新增myMap方法，方法的内部其实都是一些比较常规的操作，应该都能知道是在干嘛。
值得一提的是，因为原生的map方法是返回一个新的数组。所以，我们需要对操作的每一项进行push之前，把它深拷贝，即代码中的deepClone方法，这样才能真正做到和原生map一致。

深拷贝deepClone的代码网上有很多，有能力的也可以自己写，我给大家提供一下。

function deepClone(obj){
    let newObj = obj.push?[]:{}; //如果obj有push方法则 定义newObj为数组，否则为对象。
    for(let attr in obj){
        if(typeof obj[attr] === 'object'){
            newObj[attr] = deepClone(obj[attr]);
        }else{
        newObj[attr] = obj[attr];
        }
    }
    return newObj;
}

接下来，我们去试一下，我们写的myMap方法和原生的map方法，有没有区别：

var arr = [
            {
                name:'张三',
                age:34
            },
            {
                name:'李四',
                age:25
            },
            {
                name:'王五',
                age:21
            },
            {
                name:'刘六',
                age:3
            }
];

var obj = {
    name:'Jacky',
    age:3
};

var newArr =  arr.map(function(item,index,array){
    console.log(this);
    console.log(item,index,array)
    item.name = obj.name;
    return item
},obj);   

console.log(newArr);

console.log('--------');

var newArr2 = arr.myMap(function(item,index,array){
    console.log(this);
    console.log(item,index,array);
    item.name = obj.name;
    return item;
},obj);

console.log(newArr2);

通过控制台的输出我们可以发现，在使用方法相同的情况下，原生的map方法和我们重写的myMap方法，实现的效果一模一样。

这样我们就完成了对JavaScript数组扩展方法map的重写。

PS：有任何问题都可以加我联系方式交流，发现代码的任何问题，欢迎指正，本人也是菜鸡。

原生JavaScript是决定我们前端工作高度的核心，要充分掌握原生JavaScript，才能让你的职业生涯走的更远。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢