如何在按钮单击时从数组javascript调用函数答案

【问题标题】：How to call function from array javascript on button click如何在按钮单击时从数组javascript调用函数
【发布时间】：2019-11-03 20:04:45
【问题描述】：

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

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

现在我想运行这个函数，看看哪个函数会产生“真”值。如果是这样，我只想在单击按钮时重用该功能。

所以如果我调用 allFunctions() 我的输出将是：

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

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

【问题讨论】：

我建议您将不带括号的函数名（函数对象）放入数组中，对其进行迭代，如果结果为真则保存索引，稍后调用保存的索引。
这种方法确实对我有用！我创建了一个没有括号的新数组，获取了索引并使用我获得的索引调用了正确的函数。

标签： javascript arrays function

【解决方案1】：

您应该创建一个函数数组而不调用它们（调用它们将创建一个结果数组）。现在您可以使用数组，使用Array.find()（获取第一个返回true的函数）或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())

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

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())

【讨论】：

【解决方案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

【讨论】：