如何将 forEach 分配给变量？这是可能的？

Question

大家好：）我正在尝试写石头、剪子布游戏，但我遇到了一个小问题。是否有任何选项可以像我在这段代码中所做的那样将 let playerChoice = buttons.forEach... 分配给任何变量？不幸的是，它不是这样工作的。我在下面附上了我的代码。

感谢您的任何提示！

let choiceOptions = ["ROCK", "PAPER", "SCISSORS"];
let buttons = document.querySelectorAll('button');


let computerChoice = () => choiceOptions[Math.floor(Math.random() * choiceOptions.length)];

let playerChoice = buttons.forEach(button => {
    button.addEventListener('click', () => {
        return button.id.toUpperCase();
    });
});

console.log(playerChoice) //does not work

Answer 1

你不能在这里使用forEach 做你想做的事。

首先，forEach 永远不会返回任何内容，但其次，当用户实际单击按钮时，您稍后会返回 button.id.toUpperCase()。从事件处理程序返回不会将值分配到任何有用的地方。

相反，您应该将playerChoice 变量添加到共享的外部作用域中，并在事件发生时分配给它。

let playerChoice;
buttons.forEach(button => {
    button.addEventListener('click', () => {
        playerChoice = button.id.toUpperCase();
    });
});

这样playerChoice会在用户点击按钮时更新。

但是，这实际上可能对您没有帮助，因为您的代码不会知道变量已更新。因此，让我们创建一个您的事件处理程序可以调用的回调。

let playerChoice;
let setPlayerChoice = (choice) => {
  playerChoice = choice;
  // we can use the value of playerChoice now, 
  // because this callback is being triggered 
  // by the user clicking the button.
  console.log(playerChoice); 
}
buttons.forEach(button => {
    button.addEventListener('click', () => {
        setPlayerChoice(button.id.toUpperCase());
    });
});