JavaScript变量导出后跨文件未更新：为何重新赋值无效而push有效？

问题场景 #

你有两个文件：
index.js

let list = [];

function add() {
    //list.push("item");
    list = ["item"];
    console.log("B. list length " + list.length);
}

module.exports = {
    add,
    list
}

test.js

let { add, list } = require('./index');

console.log("A. list length " + list.length);
add();
console.log("C. list length " + list.length);

当前输出：

A. list length 0
B. list length 1
C. list length 0

预期输出：

A. list length 0
B. list length 1
C. list length 1

核心原因：引用类型的赋值逻辑差异 #

JavaScript里数组属于引用类型，但你的两种写法本质是完全不同的操作：

1. list = ["item"]的问题

   • 当你在index.js导出{ add, list }时，导出的是当时list变量指向的空数组的引用副本。
   • test.js解构得到的list变量，保存的是这个空数组的引用。
   • 调用add()时，list = ["item"]是让index.js里的list变量指向一个全新的数组对象，但test.js里的list仍然指向原来的空数组，所以输出C时长度还是0。

2. list.push("item")能生效的原因

   • push操作并没有改变list变量的引用，而是直接修改了原数组对象的内部内容。
   • test.js里的list和index.js里的list指向的是同一个数组对象，所以修改后两边都能看到数组长度的变化。

解决方案 #

方案1：修改原数组（推荐，保持引用不变）

继续使用push、unshift或直接修改数组元素等操作，不重新赋值数组变量：

function add() {
    list.push("item");
    console.log("B. list length " + list.length);
}

方案2：导出获取list的函数

通过函数每次返回最新的list引用：
index.js

let list = [];

function add() {
    list = ["item"];
    console.log("B. list length " + list.length);
}

module.exports = {
    add,
    getList: () => list
}

test.js

let { add, getList } = require('./index');

console.log("A. list length " + getList().length);
add();
console.log("C. list length " + getList().length);

方案3：用对象包裹list

将list放在一个对象里，修改对象的属性而不是重新赋值变量：
index.js

const store = {
    list: []
};

function add() {
    store.list = ["item"];
    console.log("B. list length " + store.list.length);
}

module.exports = {
    add,
    store
}

test.js

let { add, store } = require('./index');

console.log("A. list length " + store.list.length);
add();
console.log("C. list length " + store.list.length);

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