17370845950

本文详解如何改造基础计算器，使其支持如 `12 + 7 - 5 * 3 =` 这类链式运算（左结合、逐对计算），最终输出 `42`；核心在于正确管理中间结果、操作符延迟执行与状态流转。

当前代码的问题在于：handleOperator() 立即保存操作符并清空 currentValue，但未触发前一步的计算——导致只有最后两个数参与运算（如 5 * 3 = 15），而 12 + 7 - 的部分被丢弃。要实现链式计算（即 ((12 + 7) - 5) * 3），必须在每次输入新操作符时，立即用上一个操作符和当前数字完成一次计算，并将结果作为新的“前值”继续参与后续运算。

✅ 正确的链式计算流程

1. 输入 12 → currentValue = "12"
2. 点击 + → 记录 operator = "+"，previousValue = "12"，清空 currentValue（等待下一个数）
3. 输入 7 → currentValue = "7"
4. 关键点：此时点击 -（而非 =）→ 应立刻执行 12 + 7 = 19，然后设 previousValue = 19，operator = "-"，currentValue = ""
5. 输入 5 → currentValue = "5"
6. 点击 * → 执行 19 - 5 = 14，更新 previousValue = 14，operator = "*"
7. 输入 3 → currentValue = "3"
8. 点击 = → 执行 14 * 3 = 42

? 核心原则：每个新操作符的输入，既是“提交当前运算”的信号，也是“开启下一轮运算”的起点。

✅ 修改关键函数

function handleOperator(nextOperator) {
  // 如果已有 previousValue、currentValue 和 operator，立即计算中间结果
  if (previousValue !== '' && currentValue !== '' && operator !== '') {
    calculate(); // 执行上一对数字的运算
  }

  // 将当前显示值转为数字后存为 previousValue（即中间结果）
  previousValue = Number(currentValue);
  operator = nextOperator;
  currentValue = ''; // 清空，准备输入下一个数字
}

// calculate() 需适配：始终用 previousValue 和 currentValue 运算，并更新 previousValue
function calculate() {
  let prev = Number(previousValue);
  let curr = Number(currentValue);

  switch (operator) {
    case "+": previousValue = prev + curr; break;
    case "-": previousValue = prev - curr; break;
    case "*": previousValue = prev * curr; break;
    case "/": 
      previousValue = curr !== 0 ? prev / curr : 0;
      break;
    default: return;
  }

  previousValue = roundNumber(previousValue);
  currentValue = String(previousValue); // 重置 currentValue 为结果，便于链式继续
}

✅ 更新等号逻辑（可选但推荐）

= 不再是唯一计算入口，而是最终确认；若还有未参与运算的 currentValue（如刚输完数字就按 =），仍需执行一次计算：

equal.addEventListener("click", function() {
  if (currentValue !== '' && previousValue !== '' && operator !== '') {
    calculate();
  }
  // 显示结果（注意：此时 previousValue 已是最终结果）
  currentScreen.textContent = String(previousValue).length <= 5 
    ? String(previousValue) 
    : String(previousValue).slice(0, 5) + "...";
  previousScreen.textContent = '';
});

⚠️ 注意事项

• 不要在 handleNumber() 中直接修改 previousValue 或调用 calculate() —— 数字输入阶段只负责拼接字符串。
• handleOperator() 是链式计算的“引擎开关”：它既结算上一轮，又初始化下一轮。
• 运算符按钮（如 +, -）必须触发 handleOperator()，且确保 HTML 中乘号使用 *（而非 x）以匹配 JS 判断：

  x 
  *

  并在事件监听中读取：

  op.addEventListener("click", function(e) {
    const opSymbol = e.target.dataset.op || e.target.textContent;
    handleOperator(opSymbol);
    // ...更新屏幕
  });

• 边界情况处理：除零、空输入、连续操作符（可额外加防抖或覆盖逻辑）。

通过以上重构，你的计算器就能真正实现“边输边算”的链式体验——每一次操作符都是对当前结果的延续，而非等待 = 的被动响应。这正是 Odin Project 考察的核心：状态管理与用户意图的精准映射。