亲手实现数组的map方法

2,619 阅读1分钟

ES6给我们的js提供了很多的数组的扩展方法,今天主要实现map方法

map方法的实现

首先我们看下map的语法和使用方法,借鉴MDN的哈!

	// map的使用语法,回调函数可以接受三个参数,map的第二个参数指定回调函数的this
    var new_array = arr.map(function callback(currentValue[, index[,array]]) {
 	// Return element for new_array 
	}[, thisArg])
    
	var arr = [1,2,3,4];
    var newArr = arr.map((item,i,arr) => item+i);
    console.log(newArr); // [1,3,5,7]

实现map-版本1

    
// ===============亲手实现map方法,v1版本=========================
	  //为了做区别,我自己写的map为_map,挂载到Array的原型上
      Array.prototype.map = function(cb){
      	// 错误处理
        if(!Array.isArray(this) || typeof cb != 'function'){
          throw new Error('has Error, please check!')
        }
        // 返回一个新的元素
        var res = []
        for(var i = 0; i < this.length; i++){
         // 执行回调函数后将结果push进res中,this就是调用map的数组
         res.push(cb(this[i],i,this))
        }
        //返回res
        return res;
      }
      // 测试
      var arr = [1,2,3,4]
      var res = arr.map((item,index,arr)=> item+1)
      console.log(res); // [2,3,4,5]

实现map-版本2,最终版

实现官方的第三个参数,为回调函数指定this,直接看代码

// ========亲手实现map方法,v2版本【标准版本】,为回调函数指定this===========
 Array.prototype.map = function(cb,thisArg){
        if(!Array.isArray(this) || typeof cb != 'function'){
          throw new Error('has Error, please check!')
        }
        var res = []
        for(var i = 0; i < this.length; i++){
         //使用call方法来改变this指向即可
         res.push(cb.call(thisArg,this[i],i,this))
        }
        return res;
      }
      // 测试
      var arr = [1,2,3,4]
      var obj = {name: 'jakeQuc',age:18}
      var res = arr.map(function(item,index,arr) {
        item+1;
        //此处的this就是传进来的obj,调用多少次就打印多少次
        // 如果此处使用箭头函数this指向的是window,你应该懂的哈
        console.log(this) 
      },obj)
      console.log(res); // [2,3,4,5]