JavaScript两层循环生成多维数组的函数异常行为原因咨询

这是JavaScript引用类型的特性导致的：

• 数组属于引用类型，你在代码最顶部只初始化了一次innerArray，全程操作的都是内存中同一个数组实例
• outerArray.push(innerArray) 存入的是这个数组的内存引用地址，不是当前数组内容的副本
• 第二次外层循环修改innerArray时，outerArray里两个元素指向的是同一个数组，所以第一个元素的内容也会跟着同步变化

方案1：常规二维数组生成（每个子数组长度均为n，结果为[["x","x"],["x","x"]]） #

把innerArray的声明挪到外层循环内部，每次循环都创建一个全新的独立数组：

function makeArray(n, val) {
 let outerArray = [];

 for (let i = 0; i < n; i++) {
  let innerArray = [];
  for (let y = 0; y < n; y++) {
   innerArray.push(val);
  }
  outerArray.push(innerArray);
 }
 return outerArray;
}

方案2：符合你给出的预期结果（结果为[["x","x"],["x","x","x","x"]]） #

如果需要每次存入outerArray的是当前innerArray的内容快照，push时做一次浅拷贝即可：

function makeArray(n, val) {
 let outerArray = [];
 let innerArray = [];

 for (let i = 0; i < n; i++) {
  for (let y = 0; y < n; y++) {
   innerArray.push(val);
  }
  // 浅拷贝当前innerArray的内容，存入副本而非原引用
  outerArray.push([...innerArray]);
 }
 return outerArray;
}

内容的提问来源于stack exchange，提问作者h.vu