为什么 splice 不从我的数组中删除元素？

Question

我正在创建一个轮盘游戏，当轮盘落在特定类别时，它会显示来自不同数组的随机项目。到目前为止，一切正常，除了当轮子落在一个类别上时，它会一遍又一遍地从正确的数组中选择相同的随机项目。我正在尝试使用 math.random 和 splice 方法从数组中随机选择一个项目，然后删除该项目，以便之后只能显示数组中新的随机项目，但它没有工作。

Answer 1

我将输入数组重新排列为数组数组（5 个数组，9 个元素 = 45）。我猜你想要整件事洗牌。

const log = data => console.log(JSON.stringify(data));

let zones = [
  ["?", "?", "?", "?", "?", "?", "?", "?", "?"],
  ["?", "?", "?", "?", "?", "?", "?", "?", "?"],
  ["?", "?", "?", "?", "?", "?", "?", "?", "?"],
  ["?", "?", "?", "?", "?", "?", "?", "?", "?"],
  ["?", "?", "?", "?", "?", "?", "?", "?", "?"]
];
let zoneSize = zones.length * zones[0].length;
let symbolZones = [];

for (let i = zoneSize; i > 0; i--) {
  let deg = zones.flatMap(z => z.splice(Math.floor(Math.random() * z.length), 1));
  if(deg.length > 0) {
    symbolZones.push(deg);
  }
}
log(`Original Array zones`);
log(zones);
log(`New Array symbolZones`);
log(symbolZones);

.as-console-row-code {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}

.as-console-row::after {
  content: ''!important
}

Answer 2

我不知道其余代码如何，但如果您总是一遍又一遍地获得相同的值，那可能是您没有重新运行获取这些值的代码。

尝试将检索符号区域的逻辑包装在一个函数中：

function getSymbolZones() {

  const symbolZones = [];

  symbolZones[1] = a[Math.floor(Math.random()*a.length)];
  symbolZones[2] = b[Math.floor(Math.random()*b.length)];
  symbolZones[3] = c[Math.floor(Math.random()*c.length)];
  symbolZones[4] = d[Math.floor(Math.random()*d.length)];
  symbolZones[5] = e[Math.floor(Math.random()*e.length)];
  symbolZones[6] = f[Math.floor(Math.random()*f.length)];
  symbolZones[7] = g[Math.floor(Math.random()*g.length)];
  symbolZones[8] = h[Math.floor(Math.random()*h.length)];

  return symbolZones;
}

然后在handleWin函数中使用它。

const handleWin = (actualDeg) => {
  const symbolZones = getSymbolZones();
  const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
  display.innerHTML = symbolZones[winningSymbolNr];
}

附言 我知道您从索引 1 开始数组，因为这是您可以从操作 45 / 45 中获得的最小区域。 但如果我是你，我会从 0 开始索引，并在访问数组时减去 1：symbolZones[winningSymbolNr - 1]。 这样，当您尝试循环访问具有空第一个索引的数组时，您就不会遇到奇怪的错误。

Answer 3

除了使用array，我建议您使用object 和for 循环来使代码更易于执行。这段代码应该可以工作：

let deg = 0;
// The 360 degree wheel has 8 zones, so each zone is 45 degrees
let zoneSize = 45;
let symbol = {
  a: ["a", "b", "c", "d", "e"],
  b: ["f", "g", "h", "i", "j"],
  c: ["a", "b", "c", "d", "e"],
  d: ["f", "g", "h", "i", "j"],
  e: ["a", "b", "c", "d", "e"],
  f: ["f", "g", "h", "i", "j"],
  g: ["a", "b", "c", "d", "e"],
  h: ["f", "g", "h", "i", "j"],
}

// zones for each 8 categories
let ran = Math.floor(Math.random() * Object.keys(symbol).length)
console.log(Object.values(symbol)[ran])
//Random select a zone from above 8 
let selectedzone = Object.values(symbol)[ran]
//Random select an item from selected zone
let index = Math.floor(Math.random() * selectedzone.length)
let symbolZones = selectedzone[index]
console.log(symbolZones)
const handleWin = (actualDeg) => {
  const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
  display.innerHTML = symbolZones[winningSymbolNr];
}