JavaScript手写系列——手写reduce取代map

JavaScript手写系列-数组

1.使用reduce的方法实现map

完整代码

Array.prototype.map2 = function(callback,thisArg){
    const _this = thisArg || null;
    let res = this.reduce((total,currentValue,currentIndex,arr)=>{
      total[currentIndex] = callback.call(_this,currentValue,currentIndex,arr);
      return total;
    },[]);
    return res;
}

分析

1.reduce方法原理

MDN: Array.prototype.reduce()

reduce概念

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

reduce代码结构梳理

array.reduce(function(accumulator,currentValue,currentIndex,arr){
	accumulator:
		累计器,上一次回调函数的结果的累计,
		如果指定initialValue，则第一次循环的accumulator为initialValue,
		否则为array的第1个元素
	currentValue:
		当前元素。
		如果指定initialValue，则第一次循环的currentValue为array的第2个元素
		否则为array的第1个元素
	currentIndex:
		当前元素currentValue的索引
	arr:
		当前遍历的array数组
},initialValue)

案例DEMO

//定义一个数组
var myarr = [1,2,3,4];
/*
reduce有四个参数:
1.total叠加器，为上一次循环体内返回的值，若指定initialValue
*/
var total = myarr.reduce((total,currentValue,currentIndex,arr)=>{
console.log("total:",total,'currentValue:',currentValue,'currentIndex:',currentIndex,"arr:",arr)
   return total+currentValue;

})

结果输出：

2.Map方法原理

MDN:Array.prototype.map()

数组的map方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

代码结构梳理

arary.map(function(currentValue,currentIndex,arr){
	currentValue:
		当前值
	currentIndex:
		当前值的索引
	arr:
		当前的array数组

},_thisArg);

案例DEMO

var originArr = [1,2,3,4];
var newArr = originArr.map((currentValue,currentIndex,arr)=>{
  console.log("currentValue:",currentValue,"currentIndex:",currentIndex,"arr:",arr);
  return "列表第:"+item+"个";
});

结果输出：

总结

结合上面对reduce和map的了解，就可以用reduce来替代map手写一个map的替代品了:

Array.prototype.map2 = function(callback,thisArg){
	//确定this指向，如果thisArg不传，则为null
    const _this = thisArg || null;
    //对当前数组执行reduce方法
    let res = this.reduce((total,currentValue,currentIndex,arr)=>{
      console.log("total:",total);
      console.log("currentValue:",currentValue);
      console.log("currentIndex:",currentIndex)
      console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
      //指定了initialValue为空数组，这样total第一个元素为该空数组[]
      //由于指定initialValue, 所以currentValue为array数组的第一个元素
	  //每次循环迭代过程中，将callback调用后的返回值保存在total的每一项里。
      total[currentIndex] = callback.call(_this,currentValue,currentIndex,arr);
      //每次返回total,累积器会将total的值累积到下一轮循环中的total中。
      return total;
    },[]);
    return res;
}

var myarr = ['sim','peter','bob'].map2((item,idx)=>{
  return '第:'+idx+'项'+",内容:"+item;
});