数组覆写（Array overwrite）未按预期生效，为何控制台仍显示原数组？

嘿，我太懂你这种“明明感觉逻辑没问题，但结果就是不对”的疑惑了！结合你说的情况，最常见的原因是你在函数里犯了一个JavaScript引用类型的经典错误——给数组参数重新赋值，而不是修改原数组对象本身。

举个典型的错误例子，你写的函数可能是这样的：

function overwriteArray(arr) {
  // 这里是给函数内部的arr变量重新赋值了一个新数组
  arr = [10, 20, 30];
}

const myArr = [1, 2, 3];
overwriteArray(myArr);
console.log(myArr); // 输出还是[1,2,3]

背后的原理是什么？ #

在JavaScript里，数组属于引用类型，当你把数组作为参数传给函数时，传递的是数组对象的引用副本。这时候：

• 如果直接修改这个引用指向的对象（比如修改数组元素、用push/splice/length=0等方法），外部的原数组会跟着变化，因为它们指向同一个对象。
• 但如果像上面那样给函数内部的arr变量重新赋值（arr = 新数组），相当于把这个局部的引用指向了一个全新的数组对象——这和外部的原数组引用彻底断开了关系，外部的变量依然指向原来的数组，所以控制台输出自然还是原数组。

验证一下正确的写法 #

如果要真正覆写原数组，你需要操作原对象本身，比如：

function overwriteArray(arr) {
  // 方法1：清空原数组后添加新元素
  arr.length = 0;
  arr.push(10, 20, 30);

  // 方法2：用splice直接替换所有元素
  // arr.splice(0, arr.length, 10, 20, 30);
}

const myArr = [1,2,3];
overwriteArray(myArr);
console.log(myArr); // 输出[10,20,30]

当然，如果你的函数里涉及异步操作（比如setTimeout里修改数组），也可能出现控制台先输出原数组、异步操作后才修改的情况，但你说已经找到了解决方法，这种可能性相对小一些。

核心就是一句话：修改引用指向的对象本身，而不是重新赋值引用变量，这样外部才能看到数组的变化~

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