javascript - 存在 javascript 循环引用问题

Question

我有一个函数createminor4(arr，锦标赛)它基本上将arr分成4组，每组8人，然后将它们一次交换到tourney 1组。从那里它插入四个{}，其中有 4 个带有空数组的键。

我已经在 Chrome 中单步执行了它，在第一组正确推送后，下一组会覆盖前一组，即使我按下了四个{}中的不同键。我最终得到了循环引用，并且不明白我做错了什么。

*createMinor4() 应返回:四{
"A":[["熔岩灯", ..."射手"],["a", "b"],["c", "d"],["e", "f"],[ “G”]]，
"B":[["黄龙队", ..."水枪"],["a", "b"],["c", "d"],["e", "f"], [“G”]]，
"C":[["蛇", ... "鹰"],["a", "b"],["c", "d"],["e", "f"],["G”]]，
"D":[["玩家", ... "蠕虫"],["a", "b"],["c", "d"],["e", "f"],["g"]]}

let players4 = [
  "Lava Lamps", "Jarheads", "Cloud Gazerz", "Cobras", "Red Ravens", "Leaders", "Destroyers", "shooters",
  "Yellow Dragons", "Whales", "fearwolves", "Hitters", "red rebels", "Knights", "cute gremlins", "water pistols",
  "Snakes", "Ravens", "Chariots-of-Hell", "Predators", "Assassins", "Gladiators", "Broncos", "Hawks",
  "Gamers", "Slickers", "Freeze", "Rabbits", "Holy Rollers", "Crusaders", "FireHawks", "Worms"
]
let minorTourny = [
  ["t1", "t2"],
  ["t3", "t4"],
  ["t5", "t6"],
  ["t7", "t8"],
  ["a", "b"],
  ["c", "d"],
  ["e", "f"],
  ["g"]
];

function createMinor4(arr, tourney) {
  let q = arr.length * .25;
  let s = 0;
  let p = 1;
  let g = 4;
  let x = 0;
  let y = 0;
  let z = 0;

  let four = {
    "A": [],
    "B": [],
    "C": [],
    "D": []
  }
  //while 4 > 0
  while (g > s) {
    do {
      let loadTeam = tourney[x].splice(y, 1, arr[z]);
      if (z === 0) {
        loadTeam;
        y++;
      } else if (z % 2 == 0) {
        loadTeam;
        y = 1;
      } else if (z % 2 !== 0) {
        loadTeam;
        y = 0;
        x++;
      }
      z++;
    }
    while (z < q) // while 0 < 8
    if (g === 4) {
      four.A.push(tourney);
    } else if (g === 3) {
      four.B.push(tourney);
    } else if (g === 2) {
      four.C.push(tourney);
    } else if (g === 1) {
      four.D.push(tourney);
    }
    arr.splice(0, q)
    g--;
    p++;
    z = 0;
    x = 0;
    y = 0;
  }
  return four
}
console.log(createMinor4(players4, minorTourny))

Answer 1

当您在数组上使用splice时，它也会更改原始数组，这就是为什么players4和minorTourny在之后不一样createMinor4 函数调用
您可以使用深层复制
当您使用深复制时，它将不再具有原始数组的引用
What is the most efficient way to deep clone an object in JavaScript?

let players4 = [
  "Lava Lamps", "Jarheads", "Cloud Gazerz", "Cobras", "Red Ravens", "Leaders", "Destroyers", "shooters",
  "Yellow Dragons", "Whales", "fearwolves", "Hitters", "red rebels", "Knights", "cute gremlins", "water pistols",
  "Snakes", "Ravens", "Chariots-of-Hell", "Predators", "Assassins", "Gladiators", "Broncos", "Hawks",
  "Gamers", "Slickers", "Freeze", "Rabbits", "Holy Rollers", "Crusaders", "FireHawks", "Worms"
]
let minorTourny = [
  ["t1", "t2"],
  ["t3", "t4"],
  ["t5", "t6"],
  ["t7", "t8"],
  ["a", "b"],
  ["c", "d"],
  ["e", "f"],
  ["g"]
];

function createMinor4(_arr, _tourney) {
  const arr = JSON.parse(JSON.stringify(_arr)); // Use Deep copy
  const tourney = JSON.parse(JSON.stringify(_tourney)); // Use Deep copy
  let q = arr.length * .25;
  let s = 0;
  let p = 1;
  let g = 4;
  let x = 0;
  let y = 0;
  let z = 0;

  let four = {
    "A": [],
    "B": [],
    "C": [],
    "D": []
  }
  //while 4 > 0
  while (g > s) {
    do {
      let loadTeam = tourney[x].splice(y, 1, arr[z]);
      if (z === 0) {
        loadTeam;
        y++;
      } else if (z % 2 == 0) {
        loadTeam;
        y = 1;
      } else if (z % 2 !== 0) {
        loadTeam;
        y = 0;
        x++;
      }
      z++;
    }
    while (z < q) // while 0 < 8
    if (g === 4) {
      four.A.push(tourney);
    } else if (g === 3) {
      four.B.push(tourney);
    } else if (g === 2) {
      four.C.push(tourney);
    } else if (g === 1) {
      four.D.push(tourney);
    }
    arr.splice(0, q)
    g--;
    p++;
    z = 0;
    x = 0;
    y = 0;
  }
  return four
}
console.log(createMinor4(players4, minorTourny))