如何在按钮单击时从数组 javascript 调用 function

Question

我是 javascript 的新手，遇到了问题。 我有一个带有函数的数组：

allFunctions = () => [
  function1(),
  function2(),
  function3(),
  function4(),
  function5(),
  function6(),
  function7(),
  function8(),
  function9()
]

现在我想运行这个 function 并查看哪个 function 导致“真实”值。 如果是这样，我只想在单击按钮时重用那个 function。

因此，如果我调用 allFunctions() 我的 output 将是：

[false, false, false, true, false, false, false, false, false]

我想以某种方式重新调用 function ，它在按钮单击时具有真正的价值？ 任何人都可以帮助我，或者至少让我朝着正确的方向前进。 提前致谢。

Answer 1

您应该创建一个函数数组而不调用它们（调用它们将创建一个结果数组）。 现在您可以将数组与Array.find() （获取第一个返回true的 function ）或Array.find() （获取所有返回true的函数）一起使用：

 const fnFalse = () => false const fnTrue = () => true const allFunctions = [fnFalse, fnFalse, fnFalse, fnFalse, fnFalse, fnTrue, fnFalse, fnFalse, fnFalse] const trueFn = allFunctions.find(fn => fn()) console.log(trueFn.name, trueFn())

您可以使用allFunctions使用Array.indexOf生成的数组执行相同的操作：

 const fnFalse = () => false const fnTrue = () => true const fns = [fnFalse, fnFalse, fnFalse, fnFalse, fnFalse, fnTrue, fnFalse, fnFalse, fnFalse] const allFunctions = () => [fnFalse(), fnFalse(), fnFalse(), fnFalse(), fnFalse(), fnTrue(), fnFalse(), fnFalse(), fnFalse()] const trueFn = fns[allFunctions().indexOf(true)] console.log(trueFn.name, trueFn())

Answer 2

如果我正确理解了您，则实现简单。 考虑两个按钮。

<button type="button" id="find">Find</button>
<button type="button" id="search">Search</button>

和JS

var functions = {
    find: function() { alert("finding..."); },
    search: function() { console.log("searching..."); }
};
document.getElementById ("find")
    .addEventListener ("click", handleClick);
document.getElementById ("search")
    .addEventListener ("click", handleClick);

function handleClick(event) {
    functions[event.target.id]();
}

您可以为其添加更多逻辑。

示例jsfiddle