如何精简控制按钮状态的JavaScript条件判断代码？

嘿，这就帮你优化这段代码！原逻辑是根据传入的布尔值切换两个按钮的禁用状态和样式类，我们可以利用JS的语法特性来精简代码，同时保持甚至提升可读性：

方案一：直接利用逻辑取反与classList.toggle #

export function carBtnsMoveActive(isActive) {
  const btnStart = document.querySelector('.btn-start');
  const btnStop = document.querySelector('.btn-stop');

  btnStart.disabled = !isActive;
  btnStart.classList.toggle('btn-off', !isActive);
  
  btnStop.disabled = isActive;
  btnStop.classList.toggle('btn-off', isActive);
}

优化点说明：

• 把参数名改成isActive，更贴合语义，一眼能懂参数代表的含义
• 去掉冗余的if-else判断，直接用逻辑取反给disabled赋值：当isActive为true时，启动按钮不禁用，停止按钮禁用，反之亦然
• 使用classList.toggle的第二个参数（布尔值），精准控制类的添加/移除——第二个参数为true时添加类，false时移除，替代了原代码里的add和remove，一行搞定样式类的切换

方案二：用数组映射提升扩展性（适合按钮数量多的场景） #

如果以后可能增加更多按钮，这种方式会更易维护：

export function carBtnsMoveActive(isActive) {
  // 定义每个按钮的选择器和对应的状态规则
  const buttonConfigs = [
    { selector: '.btn-start', disabled: !isActive, shouldAddOffClass: !isActive },
    { selector: '.btn-stop', disabled: isActive, shouldAddOffClass: isActive }
  ];

  buttonConfigs.forEach(({ selector, disabled, shouldAddOffClass }) => {
    const btn = document.querySelector(selector);
    btn.disabled = disabled;
    btn.classList.toggle('btn-off', shouldAddOffClass);
  });
}

这种方式把按钮的配置和逻辑分离，后续新增按钮只需要在数组里加一行配置即可，不用修改逻辑部分，可读性和扩展性都很强。

两种方案都能把原代码从10行精简到更短的篇幅，同时逻辑清晰，不会牺牲可读性~

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