原生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);