解构变量在if语句中无法访问，报“modal未定义”错误求助

我来帮你把这个问题的核心逻辑理清楚：

先看你最初的代码片段：

const data = { modal: false, button: null };
const updateData = () => {
  const {modal, button} = data
  if (document.querySelector('.modal')) {
    modal = true
    button = document.querySelector('.modalButton')
  }
};

调用updateData()时抛出Uncaught ReferenceError: modal is not defined，但直接操作data.modal却能正常运行，问题出在解构变量的本质和const声明的特性上：

核心原因拆解 #

• 当你执行const {modal, button} = data时，相当于在函数内部创建了两个独立的const局部变量，它们的初始值是从data对象中浅拷贝而来的，和原对象的属性没有任何绑定关系。
• const声明的变量是只读的，你试图给modal = true赋值，本质是在修改一个const变量，这在JavaScript中是不允许的（报错信息虽然写的是“modal未定义”，但实际是因为不允许给const变量重新赋值）。
• 而直接操作data.modal = true时，你修改的是data对象的属性——data本身是const声明的对象，但const只限制变量的引用（不能让data指向另一个对象），不限制对象内部属性的修改，所以这种写法是合法的。

如果你想保留解构的写法 #

如果一定要用解构，同时需要修改原对象的属性，你可以这样写（不过直接操作原对象其实更直观）：

const updateData = () => {
  if (document.querySelector('.modal')) {
    // 用解构获取当前值做判断（可选）
    const { modal: currentModal } = data;
    if (!currentModal) {
      data.modal = true;
      data.button = document.querySelector('.modalButton');
    }
  }
};

总结一下：解构出来的const变量是独立的局部变量，无法重新赋值；而原对象的属性不受const变量引用的限制，这就是两种写法产生差异的根本原因。

内容的提问来源于stack exchange，提问作者Aurian Guerard des Lauriers