JavaScript布尔变量重复赋值true的性能优化疑问

首先得提个小细节：你写的 !hasChanged && hasChanged = true; 在JavaScript里是语法错误哦——赋值表达式不能直接作为逻辑与操作的右侧操作数（除非用括号把它包成表达式，比如 !hasChanged && (hasChanged = true);，但这种写法可读性并不高）。更规范的替代写法应该是用 if 判断：

const handleSubmit = () => {
  // ...
  if (!hasChanged) {
    hasChanged = true;
  }
  // ...
}

回到你关心的性能问题：这种级别的操作差异在实际应用中完全可以忽略。现代JavaScript引擎（比如V8）对简单的变量读写和条件判断都做了极致优化，直接赋值和先检查再赋值的时间差大概在纳秒级别——除非你的 handleSubmit 被调用几百万次，否则根本感知不到任何性能区别。

那从工程角度来看，哪种写法更合理？

• 如果这个变量是框架中的状态变量（比如React的useState返回的状态），直接修改它是无效的（框架状态通常是不可变的，必须通过setter更新）。这时先检查再更新的意义不在于变量读写的性能，而是避免不必要的组件重渲染——这才是真正有价值的优化点：

  const [hasChanged, setHasChanged] = useState(false);
  
  const handleSubmit = () => {
    // ...
    setHasChanged(prev => {
      if (!prev) return true;
      return prev; // 没有变化时不更新状态，避免组件重渲染
    });
    // 或者更简洁的写法：setHasChanged(prev => prev || true);
    // ...
  }
  

• 如果只是普通的局部状态变量（非框架管理的状态），直接写 hasChanged = true; 反而更简洁可读，因为即使重复赋值为true，也不会有任何副作用，代码逻辑更直观。

总结一下：

• 纯性能层面，两种写法没有实际区别；
• 语法上要避免错误写法，优先选择可读性更高的if判断；
• 框架状态变量场景下，优先通过条件检查避免不必要的状态更新，能带来实际的性能收益；
• 普通变量场景下，直接赋值更简单易懂。

内容的提问来源于stack exchange，提问作者Victor Molina