JavaScript模块中使用spread语法出现Read-only错误问题

ES 模块规范中，跨文件导入的变量属于只读活绑定：导入的变量只是对导出模块内部原变量的引用，仅允许读取值，不允许在导入侧直接重新赋值覆盖绑定关系。
你在 newToDo.js 中执行 toDoArray = [...toDoArray, toDo()] 本质是尝试重写导入绑定的引用地址，不符合规范要求，因此抛出只读错误。而单文件内操作时没有导入导出的绑定限制，普通 let 声明的变量允许重新赋值，所以运行正常。

下面是三种常用的修复方案：

• 方案1：直接修改原数组（最简便）
  数组是引用类型，不需要替换整个数组的引用，直接调用数组方法修改内部内容即可：

// newToDo.js 中修改 addToDoArray 逻辑
function addToDoArray(toDo) {
  toDoArray.push(toDo());
  console.log(toDoArray);
  printToDos(toDoArray);
}

• 方案2：在导出模块内封装修改方法
  把数组的更新逻辑放在定义它的 helpers.js 中，外部仅调用导出的方法操作：

// helpers.js 新增逻辑
let toDoArray = []
const pushToDoArray = (item) => {
  toDoArray = [...toDoArray, item]
}
export { inputItems, toDoArray, toDosWrapper, pushToDoArray };

// newToDo.js 中调用方法
import { inputItems, toDoArray, pushToDoArray } from './helpers.js';
function addToDoArray(toDo) {
  pushToDoArray(toDo());
  console.log(toDoArray);
  printToDos(toDoArray);
}

• 方案3：把数组挂载到对象属性上
  如果需要在导入侧用扩展运算符生成新数组，可以把数组放在对象属性中，修改属性不会触发导入绑定的只读限制：

// helpers.js 调整声明
let toDoState = {
  toDoArray: []
}
export { inputItems, toDoState, toDosWrapper };

// newToDo.js 中调整逻辑
import { inputItems, toDoState } from './helpers.js';
function addToDoArray(toDo) {
  toDoState.toDoArray = [...toDoState.toDoArray, toDo()];
  console.log(toDoState.toDoArray);
  printToDos(toDoState.toDoArray);
}

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