构建支持连续运算的计算器：实现链式计算逻辑

本文详解如何改造基础计算器，使其支持如 `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 考察的核心：状态管理与用户意图的精准映射。