Math.random 超出最大调用堆栈

Question

我有很多水果。我想用水果填充一个大小为 12 的数组，这样新数组中的每个水果出现的次数都是偶数。

水果琳琅满目：

const fruitsList: TFruit[] = [
  { id: 1, img: "/apple.jpg", flipped: false },
  { id: 2, img: "/banana.jpg", flipped: false },
  { id: 3, img: "/cherry.jpg", flipped: false },
  { id: 4, img: "/coconut.jpg", flipped: false },
  { id: 5, img: "/grapes.jpg", flipped: false },
  { id: 6, img: "/lemon.jpg", flipped: false },
  { id: 7, img: "/muskmelon.jpg", flipped: false },
  { id: 8, img: "/watermelon.jpg", flipped: false },
];

生成随机整数的代码：

let randomOrderedFruits = [];

const generateRandomFruits = () => {
  const arrLength = Object.keys(randomOrderedFruits).length;
  if (arrLength === 12) return;
  const randomIndexOfFruit = Math.floor(Math.random() * 8);
  let timesToRepeat = Math.floor(Math.random() * 4);
  timesToRepeat = timesToRepeat % 2 === 0 ? timesToRepeat : timesToRepeat + 1;
  fillWithRandom(timesToRepeat, randomIndexOfFruit);

  generateRandomFruits();
};
const usedIndices = {};

const fillWithRandom = (timesToRepeat, randomIndexOfFruit) => {
  if (timesToRepeat === 0 || randomOrderedFruits.length === 12) return;
  //repeat selected randomIndexOfFruit such that it occurs 2 or 4 times.
  for (let i = 0; i < timesToRepeat; i++) {
    const randomIndexToInsertAt = Math.floor(Math.random() * 12);
    if (usedIndices[randomIndexToInsertAt]) {
      fillWithRandom(timesToRepeat, randomIndexOfFruit);
    } else {
      usedIndices[randomIndexToInsertAt] = true;
      randomOrderedFruits[randomIndexToInsertAt] = fruitsList[randomIndexOfFruit];
    }
  }
};
generateRandomFruits();

我上面所做的是选择fruitsList的随机索引。

再次生成一个随机数，以确定所选随机索引必须在新数组中出现多少次（2 次或 4 次）。

然后选择必须插入水果的新数组的随机索引。

我的代码超出了最大调用堆栈，因为某些要填充的索引从未出现在

randomIndexToInsertAt

中。

usedIndices

中的数字是重复的。

完整代码在此链接

Answer 1

可能不是您的核心问题，而是以下问题

const arrLength = Object.keys(randomOrderedFruits).length;

应该是

const arrLength = randomOrderedFruits.length;

因为它是一个数组，而不是一个键/值对象。