为何数组调用函数后自行改变？未修改却输出非原数组的原因

定义了二维数组main与rotateArray函数，在函数中将main赋值给original后立即执行console.log(main)，此时尚未对main进行修改操作，但控制台输出却不是原数组；同时疑惑为何调用函数后数组会被修改。

代码示例 #

var main = [
  [2,0,0,0],   
  [0,0,0,0],   
  [4,0,0,0],   
  [4,0,0,0]   
];

function rotateArray(){
   let original = main; 
   console.log(main); // 此时应该还没有操作影响main

   let x = 0;
  for(let u = 0; u < original.length; u++){
    let y = 3;
    for(let i = 0; i < original[u].length; i++){
        original[u][i] = main[y][x];
        y--;
    }
    x++;
    }
}

控制台输出 #

[4,4,0,4],
[0,0,0,4],
[0,0,0,0],
[0,0,4,4]

原因分析 #

1. 引用类型赋值导致原数组被修改 #

JavaScript中，数组属于引用类型。执行let original = main;时，并没有复制main数组的内容，而是让original和main指向了内存中同一个数组对象。后续对original的修改（比如original[u][i] = ...），本质上就是直接修改了main指向的数组，所以函数执行后main会被改变。

2. 控制台惰性求值导致日志显示异常 #

你在循环前执行console.log(main)，但控制台显示修改后的数组，是因为浏览器控制台采用惰性求值机制：当你在控制台中展开数组查看详情时，才会读取数组当前的实际状态。而此时函数的循环已经执行完毕，数组已被修改，所以看到的是修改后的结果，而非console.log执行时的原数组。

解决方法 #

• 若要查看console.log执行时的数组状态，可将数组转为字符串输出：

  console.log(JSON.stringify(main));
  

• 若要避免修改原数组，需对二维数组进行深拷贝，例如：

  // 深拷贝二维数组
  let original = main.map(row => [...row]);
  

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