如何将JavaScript中重复的条件判断逻辑存入变量优化代码？

针对你遇到的重复判断按钮值的问题，有几种简洁的实现方式，既能保持原有功能，又能大幅简化代码结构：

方法1：用集合（Set）存储运算符号 #

把所有四则运算按钮的文本内容集中存到一个Set里，利用Set的has()方法快速判断当前按钮值是否属于运算按钮：

// 提前定义运算符号集合
const operacoes = new Set([
  teclaSoma.innerHTML,
  teclaSubt.innerHTML,
  teclaMult.innerHTML,
  teclaDiv.innerHTML
]);

// 循环绑定点击事件
for (const botao of botoes) {
  botao.addEventListener('click', function() {
    const valor = this.innerHTML;
    if (operacoes.has(valor)) {
      // 处理运算按钮的逻辑（比如记录运算符、切换输入状态等）
      console.log(`触发运算：${valor}`);
    } else {
      // 处理数字/其他按钮的逻辑（比如追加到输入框）
      console.log(`输入内容：${valor}`);
    }
  });
}

方法2：用数组的includes()方法判断 #

如果对Set不熟悉，用普通数组配合includes()方法也能达到同样效果，写法更直观：

// 用数组存储运算符号
const operacoes = [
  teclaSoma.innerHTML,
  teclaSubt.innerHTML,
  teclaMult.innerHTML,
  teclaDiv.innerHTML
];

// 绑定事件时判断
for (const botao of botoes) {
  botao.addEventListener('click', function() {
    const valor = this.innerHTML;
    if (operacoes.includes(valor)) {
      // 运算按钮逻辑
      console.log(`触发运算：${valor}`);
    } else {
      // 其他按钮逻辑
      console.log(`输入内容：${valor}`);
    }
  });
}

进阶优化：用类名标记运算按钮 #

如果不想依赖按钮的文本内容（比如后续可能修改按钮图标或文字），可以给所有运算按钮统一添加类名（比如class="operacao"），然后通过判断类名来区分：

<!-- 给运算按钮加类名 -->
<button class="operacao">+</button>
<button class="operacao">-</button>
<button class="operacao">×</button>
<button class="operacao">÷</button>

for (const botao of botoes) {
  botao.addEventListener('click', function() {
    if (this.classList.contains('operacao')) {
      const valor = this.innerHTML;
      // 运算按钮逻辑
      console.log(`触发运算：${valor}`);
    } else {
      const valor = this.innerHTML;
      // 其他按钮逻辑
      console.log(`输入内容：${valor}`);
    }
  });
}

优势说明 #

• 代码更简洁：把分散的多个||条件集中到一个容器里，可读性更强
• 易维护：后续新增运算（比如取模%），只需在集合/数组里添加元素，或给新按钮加类名，不用修改判断语句
• 性能更优：Set的has()方法查找效率比多个||判断更高（元素越多越明显）

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