将额外变量传递给具有预定义参数的函数，例如 Array.Reduce答案

【问题标题】：Pass extra variable to a function with predefined arguments like Array.Reduce将额外变量传递给具有预定义参数的函数，例如 Array.Reduce
【发布时间】：2021-07-17 15:47:12
【问题描述】：

我有一个这样的reducer函数

let reducer = (acv, cv) => {
     return acv += cv;
}

function createMenus(arr){
    let someValue = getNewValue();
    arr.reduce(reducer, '');

    //I want to bind my above someValue to reducer function so, I can append it to my string like below
}

let reducer = (acv, cv, someValue) => {
     return acv += (cv+someValue);
}

我尝试使用bind() 做某事，但没有成功。

【问题讨论】：

标签： javascript arrays reduce

【解决方案1】：

您可以在代码中使用closures 来发挥自己的优势。

您可以创建一个返回函数的函数。

createMenus 下面接受一个参数并使用传递给它的值，返回另一个将在数组的 reduce 函数中运行的函数，因此调用 reducer(someValue) 实际上返回另一个函数。该函数就是传递给 reduce 的函数（与上面的方法相同）。

function getNewValue() {
  return 'foo';
}

function reducer(someValue) {
  return (acv, cv) => {
     return acv += (cv + someValue);
  }
};

function createMenus(arr){
    let someValue = getNewValue();
    return arr.reduce(reducer(someValue), '');
}

console.log(createMenus(['a', 'b', 'c']));

更新

正如评论中提到的@george，您也可以使用箭头函数来完成同样的事情。语法要短得多，但可读性在旁观者眼中。

let reducer = value => (a, v) => a + (v + value);

即使您发现它更具可读性，使用此方法可能会使您的代码更难调试，因为与命名函数相比，跟踪匿名函数中发生的错误可能更难。

【讨论】：

您的回答效果最好，但我无法理解一件事，如果您能解释 (acv, cv) 在我们仅将 someValue 传递给减速器函数时如何获取值，我将不胜感激？跨度>
let reducer = value => (a, v) => a + (v + value) 会更好看。
@georg 你能解释一下 (a,v) 将如何获取值，而我们只将值传递给我们的 reducer 函数吗？
@Airy：它被称为“闭包”，developer.mozilla.org/en-US/docs/Web/JavaScript/Closures。这个reducer应该更准确地称为makeReducer

【解决方案2】：

您可以通过在someValue 可用的另一个函数定义中定义reducer 内部来访问someValue。（这是在 JavaScript 中使用 closures。）

const
  myArr = ["big", "medium", "tiny"],
  myStr = createMenus(myArr);
console.log(myStr);

function createMenus(arr){
  const
    someValue = getNewValue(),
    reducer = (acv, cv) => acv + (cv + someValue),
    output = arr.reduce(reducer, '');
  return(output);
}
function getNewValue(){
  return "MenuItem, ";
}

【讨论】：

谢谢猫。这真的有助于特别了解闭包。