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

Question

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

Answer 1

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

您可以创建一个 returns 函数。

下面的

createMenus 接受一个参数并使用传递给它的值，返回另一个将在数组的 reduce 函数中运行的函数，因此调用 reducer(someValue) 实际上是 returns 另一个函数。该函数是传递给 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);

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

Answer 2

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

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

Pass extra variable to a function with predefined arguments like Array.Reduce

javascript

arrays

reduce