JavaScript向二维数组push数组时出现元素合并异常问题

出现这个现象是两个JS基础特性共同导致的：

• 数组是引用类型：全局作用域只声明了1个players数组，每次执行storage.push(players)时，存入storage的不是players当前内容的快照，而是指向这同一个数组的内存地址引用。
• 全程复用了同一个players数组：每次定时器触发调用createplayers(players)，都是往这同一个全局数组里追加新的随机数，从未重置数组或新建独立数组。

最终storage里存的所有元素全是指向同一个players数组的引用，打印时所有元素都会展示这个数组最终的完整内容，看起来就像数组合并了一样，根本不会生成预期的独立子数组结构。

每次生成随机数集合前，新建一个独立的空数组即可，不要复用全局的players变量，修改后的代码如下：

var storage = [];

function createplayers(arr) {
  for (let i = 0; i < 8; i++) {
    let a = true,
      n;
    while (a) {
      n = Math.floor(Math.random() * 100) + 1;
      a = arr.includes(n);
    }
    arr.push(n);
  }
}

var x = 3;
var interval = 1000;
for (var i = 0; i < x; i++) {
  setTimeout(function() {
    // 每次定时器触发都新建独立空数组，不复用全局变量
    let players = [];
    createplayers(players);
    storage.push(players)
    console.log(players)
    console.log(storage)
  }, i * interval)
}

运行后storage就会是预期的二维数组结构，每个子数组独立、互不影响。

如果遇到必须复用原数组的场景，也可以在push时传入数组的浅拷贝，比如写storage.push([...players])，效果和新建数组一致，不会再出现引用联动的问题。

内容的提问来源于stack exchange，提问作者Suffii