基于条件的 JavaScript 随机数输出意外行为

Question

已更新：（真实环境与真实问题）

http://citibigreveal.stage.aiareview.co.uk/

当您单击底部的 4 个选项中的任何一个时，您将看到控制台.log值来自：

var Utilities = (function (array, maxN) {
  function generateRandomNumber(array, maxN) {
        let randomN = Math.floor(Math.random() * maxN) + 0;
        console.log(array.length);
        console.log(maxN);
        if(array.length == maxN) {
            array.length = 0;
        }
        if(!array.includes(randomN)) {
            array.push(randomN);
        }
        else {
            randomN = generateRandomNumber(array, maxN);
        }
        return randomN;
    }
    return {
        generateRandomNumber: generateRandomNumber
    };
})();
export default Utilities;

意外行为是数组随机设置为 0（仅当其长度等于传入的 maxN 时才会发生这种情况）

以下函数使用该实用程序：

var cityArray = [];
function getRandomNumber() {
    let randomN = Utilities.generateRandomNumber(cityArray, 10);
    return randomN;
}

它在 React 组件中调用如下：

...
getNewQuestion = () => {
    var randomN = getRandomNumber();
    var catArray = this.state.data.data.questions;
    Shuffle(catArray);
    this.setState({
        question: catArray[randomN]
    })
    this.setCatBgColor(catArray[randomN].category);
}
...

理想的情况是：

• 对于生成的每个随机数返回它

• 如果已经生成了该数字，则将其存储在数组中并生成一个新的随机数，直到达到MA长度。您还会注意到，有时 maxN 将是 24。（这真的很奇怪，因为插入的最大值是 10）如下：

  function getRandomNumber() {
      let randomN = Utilities.generateRandomNumber(cityArray, 10);
      return randomN;
  }
  

Answer 1

你的代码似乎没有被破坏，至少，与它当前正在做的事情相比，你还没有指定它应该做什么。

如前所述，generateRandomNumber是递归的，您看到的多个日志输出是其效果。如果你想"修复"它，去掉输出，例如只在最后记录数组：

var array = [];
$("div").on('click', function(){
  console.log('clicked');
  generateRandomNumber(array, 10);
  console.log(array);
})

Answer 2

控制台.log"生成随机数"中的状态被多次输出

这是因为您使该函数递归。在这一行代码中，您进行了函数调用本身：randomN = generateRandomNumber(array, maxN);

。因此，该函数被调用多次，将有多个打印消息。

我该如何解决这个问题？

如果要将打印消息移动到循环之外，那么...我想你会想办法做到这一点的。这项工作是朝着函数式编程方向迈出的坚实一步。保持良好的工作:)

更好的是，这些行看起来好像是用于高度特定的调试/实验目的，如果您不再使用它们进行调试或实验，您可以（并且应该）删除它们。叶。这将解决您的问题。