為什么splice沒有從我的陣列中洗掉元素？

我正在創建一個輪盤游戲，當輪子落在特定類別上時，它會顯示來自不同陣列的隨機專案。到目前為止，一切正常，除非輪子落在一個類別上，它一遍又一遍地從正確的陣列中選擇相同的隨機專案。我正在嘗試使用 math.random 和 splice 方法從陣列中隨機選擇一個專案，然后洗掉該專案，以便之后只能顯示陣列中的新隨機專案，但它沒有用。

let deg = 0;
  // The 360 degree wheel has 8 zones, so each zone is 45 degrees
  let zoneSize = 45;

const a = ["a", "b", "c", "d", "e"]
const b = ["f", "g", "h", "i", "j"]
const c = ["a", "b", "c", "d", "e"]
const d = ["f", "g", "h", "i", "j"]
const e = ["a", "b", "c", "d", "e"]
const f = ["f", "g", "h", "i", "j"]
const g = ["a", "b", "c", "d", "e"]
const h = ["f", "g", "h", "i", "j"]

// zones for each 8 categories
const symbolZones = [];
symbolZones[1] = a.splice(Math.floor(Math.random()*a.length), 1);
symbolZones[2] = b.splice(Math.floor(Math.random()*b.length), 1);
console.log(symbolZones);
symbolZones[3] = c.splice(Math.floor(Math.random()*c.length), 1);
symbolZones[4] = d.splice(Math.floor(Math.random()*d.length), 1);
console.log(symbolZones);
symbolZones[5] = e.splice(Math.floor(Math.random()*e.length), 1);
symbolZones[6] = f.splice(Math.floor(Math.random()*f.length), 1);
console.log(symbolZones);
symbolZones[7] = g.splice(Math.floor(Math.random()*g.length), 1);
symbolZones[8] = h.splice(Math.floor(Math.random()*h.length), 1);
console.log(symbolZones);


// display a question from the winning category
  const handleWin = (actualDeg) => {
    const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
    display.innerHTML = symbolZones[winningSymbolNr];
  }

uj5u.com熱心網友回復：

我不知道代碼的其余部分如何，但是如果您總是一遍又一遍地獲得相同的值，則可能是您沒有重新運行獲取這些值的代碼。

嘗試在函式中包裝用于檢索 symbolZones 的邏輯：

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];
}

PS 我知道你在索引1開始的陣列，因為這是你可以從操作45/45獲得最小的區域，但如果我是你，我會從0開始的索引以及訪問陣列的時候只是減去1： symbolZones[winningSymbolNr - 1]。這樣，在嘗試遍歷具有空第一個索引的陣列時，您就不會遇到奇怪的錯誤。

uj5u.com熱心網友回復：

除了使用之外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
const arr = [];
for (let i in symbol) {
  let item =
    symbol[i].splice(Math.floor(Math.random() * symbol[i].length), 1)
  arr.push(item)
}
//Make the nested array become flat array
let symbolZones = arr.flat(1)
console.log(symbolZones)
const handleWin = (actualDeg) => {
  const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
  display.innerHTML = symbolZones[winningSymbolNr];
}

uj5u.com熱心網友回復：

我將輸入陣列重新排列為陣列陣列（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
}

標籤：javascript 数组 拼接

上一篇：為什么這個PowerShell物件發生了變化？有什么區別？

下一篇：爆炸字串多個實體