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

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

我有一个像这样的 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() 做一些事情，但没有成功。

解决方法

您可以在代码中使用 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);

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

,

您可以通过定义 someValue inside 另一个函数定义来访问 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,";
}