JavaScript - 使用reduce实现map函数，将函数作为参数传递时出错答案

【问题标题】：JavaScript - implementing map function with reduce, error when passing function as argumentJavaScript - 使用reduce实现map函数，将函数作为参数传递时出错
【发布时间】：2020-12-14 14:11:54
【问题描述】：

我正在尝试使用reduce在javascript中实现地图功能。

function newMap(inputArr, fn) {
    return inputArr.reduce((mapItem, elem) => 
        mapItem = (fn(elem)), [])
}

function plusTwo(num) {
    return num + 2;
}

newMap(arr, plusTwo())

console.log(newMap)

错误输出为：“TypeError: fn is not a function”

所以我的问题是——reduce 函数签名或传递的函数抛出错误，我做错了什么？

附： -- 还在学习 javascript，如果有人可以帮助编辑标题以使其更清晰，那将不胜感激。

谢谢

【问题讨论】：

已经有一个map()函数....？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
是的，我明白，但是我正在实施自己的学习目的。
newMap(arr, plusTwo()) plusTwo的()
这能回答你的问题吗？ Why does click event handler fire immediately upon page load?
@Taplar，很好，错误消失了，但现在它返回了一个函数对象。我会继续胡闹，谢谢。

标签： javascript function functional-programming reduce

【解决方案1】：

您在传递时调用plusTwo，但您只需要在reduce 回调中调用plusTwo。在 reduce 回调中，将fn(elem) 的调用添加到累加器数组中。

function newMap(inputArr, fn) {
    return inputArr.reduce((accum, item) => [...accum, fn(item)], []);
}

function plusTwo(num) {
    return num + 2;
}

const arr = [1, 2, 3];
console.log(newMap(arr, plusTwo));

【讨论】：

【解决方案2】：

mapItem 是对结果数组的引用。您需要将结果值推送给它，而不是在每次迭代中重新分配它，即mapItem.push(fn(elem))
将plusTwo 作为函数传递而不是调用它plusTwo()，这就是您收到fn is not a function 错误的原因
打印newMap 的结果而不是newMap 本身

function newMap(inputArr, fn) {
  return inputArr.reduce((mapItem, elem) => {
      mapItem.push(fn(elem))
      return mapItem;
  }, [])
}

function plusTwo(num) {
    return num + 2;
}

let result = newMap([1,2,3], plusTwo)

console.log(result)

【讨论】：

【解决方案3】：

你传递给 reduce 的回调应该会返回一些东西。加上其他人的评论，你想通过plusTwo，而不是plusTwo()，这是NaN（undefined+2 的结果）：

function newMap(inputArr, fn) {
    return inputArr.reduce((accum, item) => {
        accum.push(fn(item));
        return accum;
    }, []);
}

function plusTwo(num) {
    return num + 2;
}

const arr = [1, 2, 3];
console.log(newMap(arr, plusTwo));

console.log("plusTwo:", plusTwo);
console.log("plusTwo():", plusTwo());

【讨论】：