引言:偶然看到一道面试题,希望可以用reduce方法实现map方法,看过之后发现这是个有趣的逻辑思维题、既要对数组方法有深入理解也要有一定编程能力。
一、reduce语法
reduce:高阶数组方法,对数组中的所有元素应用一个函数(由你提供),将其减少为单个输出值。
arr.reduce((prev,cur,index,arr)={},initialValue)
reduce有两个参数,第一个callback函数,第二个初始值 ,适用于将序列的元素通过某种操作合并成一个单一的结果
callback 函数(执行数组中每个值的函数,包含四个参数):
prev(必需):上一次调用回调返回的值,或者是提供的初始值(initialValue)
cur(必需):数组中当前被处理的元素
index:当前元素在数组中的索引
arr:调用 reduce 的数组
initialValue(表示初始值,作为第一次调用 callback 的第一个参数):如果初始值存在,cur 从数组第一项开始,而prev 是初始值,如果初始值不存在,则 cur 从第二项开始执行,而 prev 是数组第一项的值
reduce可以实现的功能很多,如数组求和、统计数组中元素出现的次数、数组去重、数组扁平化(flat可以直接用,也可以尝试用reduce写一下)等等。
二、map语法
map:高阶数组方法,可以对数组中的每个元素进行操作,并返回一个新的数组,新数组的元素个数与原数组相同
array.map((cur, index, arr)=>{}, thisValue)
map也有两个参数,第一个callback函数,第二个指定函数中的 this
值,适用于对列表中的每个元素执行相同操作的情况
callback 函数(操作每个元素的函数,包含三个参数):
cur:数组中当前被处理的元素
index:当前元素在数组中的索引
arr:调用 map的数组thisValue 指定函数中的
this
值
三、用reduce实现map
Array.prototype.map2 = function (callback, ctx = null) {
if (typeof callback !== 'function') {
throw('callback must be a function')
}
return this.reduce((pre, cur, index, arr) => {
return pre.concat(callback.call(ctx, cur, index, arr))
}, [])
}
总结
虽然在实际开发中很少会用到 reduce
来实现 map
,但这种练习仍然有助于提升编程技能和问题解决能力。同时,也可以作为一个有趣的问题,让你更深入地理解 JavaScript 的数组方法。