本文详解如何改造基础计算器，使其支持如 `12 + 7 - 5 * 3 =` 这类链式运算（左结合、逐对计算），最终输出 `42`；核心在于正确管理中间结果、操作符延迟执行与状态流转。
当前代码的问题在于：handleOperator() 立即保存操作符并清空 currentValue，但未触发前一步的计算——导致只有最后两个数参与运算（如 5 * 3 = 15），而 12 + 7 - 的部分被丢弃。要实现链式计算（即 ((12 + 7) - 5) * 3），必须在每次输入新操作符时，立即用上一个操作符和当前数字完成一次计算，并将结果作为新的“前值”继续参与后续运算。
✅ 正确的链式计算流程
- 输入 12 → currentValue = "12"
- 点击 + → 记录 operator = "+"，previousValue = "12"，清空 currentValue（等待下一个数）
- 输入 7 → currentValue = "7"
- 关键点：此时点击 -（而非 =）→ 应立刻执行 12 + 7 = 19，然后设 previousValue = 19，operator = "-"，currentValue = ""
- 输入 5 → currentValue = "5"
- 点击 * → 执行 19 - 5 = 14，更新 previousValue = 14，operator = "*"
- 输入 3 → currentValue = "3"
- 点击 = → 执行 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 判断：
<button class="btn operator">x</button> <!-- ❌ 改为 --> <button class="btn operator" data-op="*">*</button>
并在事件监听中读取：
op.addEventListener("click", function(e) { const opSymbol = e.target.dataset.op || e.target.textContent; handleOperator(opSymbol); // ...更新屏幕 }); - 边界情况处理：除零、空输入、连续操作符（可额外加防抖或覆盖逻辑）。
通过以上重构，你的计算器就能真正实现“边输边算”的链式体验——每一次操作符都是对当前结果的延续，而非等待 = 的被动响应。这正是 Odin Project 考察的核心：状态管理与用户意图的精准映射。
