JavaScript手写系列——手写reduce取代map
2021/4/23 14:27:10
本文主要是介绍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(total,currentValue,currentIndex,arr){ total: 上一次循环体内返回的值, 如果指定initialValue,则第一次循环的total为initialValue, 否则为array的第一个元素 currentValue: 当前元素。 如果指定initialValue,则第一次循环的currentValue为array的第一个元素 否则为array的第二个元素 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; });
这篇关于JavaScript手写系列——手写reduce取代map的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现