如何实现计算器的连续运算（链式计算）

本文详解如何在 javascript 中实现支持多步连续运算的计算器逻辑，通过维护中间结果与操作符状态，使用户能输入如 `12 + 7 - 5 * 3 =` 并按左结合顺序（`((12+7)-5)*3`）实时得出正确结果。

要让计算器支持链式连续运算（如 12 + 7 - 5 * 3 = 42），关键不在于实现完整表达式解析（如 PEMDAS 优先级），而在于遵循题目要求的左结合、逐对计算逻辑：每输入一个新操作符时，立即用当前 previousValue 和 currentValue 执行上一步运算，并将结果存为新的 previousValue，为下一次运算做准备。

✅ 正确的链式计算流程

以 12 + 7 - 5 * 3 = 为例，执行顺序应为：

初始：previousValue = '', currentValue = '', operator = ''
→ 输入 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 = "*", currentValue = ""
→ 输入 3      → currentValue = "3"
→ 点击 =      → 计算：14 * 3 = 42 → 显示 42

⚠️ 注意：这不是数学标准运算（12 + 7 - 5 * 3 数学结果是 4），而是 Odin Project 要求的即时链式计算器行为——即“输入操作符即执行上一步”，类似老式桌面计算器（如 Windows 计算器的“标准模式”）。

? 核心修改点（修复原代码逻辑缺陷）

原代码中，handleOperator() 仅保存操作符和转移值，但未触发计算；而 calculate() 仅在 = 时调用，导致多步运算无法累积。必须改为：

Figma

Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。

下载

• ✅ 在每次点击新操作符时（非首次），立即执行上一步运算；
• ✅ previousValue 始终保存最新中间结果（数字类型），currentValue 始终为待输入的下一个数字（字符串，便于拼接）；
• ✅ operator 表示即将应用于 next number 的操作符，而非“上次使用的”。

✅ 修正后的核心函数（含注释）

// 处理数字输入：支持多位数、长度限制
function handleNumber(num) {
  if (currentValue.length < 5) {
    currentValue += num;
    currentScreen.textContent = currentValue;
  }
}

// 处理操作符输入：【关键！】若已有 previousValue 和 operator，则先计算再更新
function handleOperator(nextOperator) {
  // 防止重复点击同一操作符（可选优化）
  if (operator && currentValue !== '') {
    calculate(); // 立即执行上一步：previousValue [operator] currentValue
  }

  // 更新状态，为下一步做准备
  operator = nextOperator;
  previousValue = currentValue === '' ? previousValue : Number(currentValue);
  currentValue = '';

  // 更新显示（如 "12 +", "19 -"）
  previousScreen.textContent = `${previousValue} ${operator}`;
  currentScreen.textContent = currentValue;
}

// 执行一次二元运算：previousValue [operator] currentValue → 结果存入 previousValue
function calculate() {
  const prev = Number(previousValue);
  const curr = Number(currentValue);

  let result;
  switch (operator) {
    case '+': result = prev + curr; break;
    case '-': result = prev - curr; break;
    case '*': result = prev * curr; break; // 注意：HTML 中显示为 "x"，但逻辑用 "*"
    case '/': result = curr !== 0 ? prev / curr : 0; break;
    default: return;
  }

  previousValue = roundNumber(result);
  currentValue = ''; // 清空，等待下一个数字
}

// 等号事件：执行最后一次计算并显示结果
equal.addEventListener("click", function() {
  if (operator && currentValue !== '') {
    calculate();
    currentScreen.textContent = String(previousValue);
    previousScreen.textContent = '';
  }
});

? 其他必要调整

• *HTML 中乘号统一为 `**：将x的textContent改为，或在handleOperator中映射'x' → ''`：

  const opMap = { 'x': '*', '÷': '/' };
  const actualOp = opMap[nextOperator] || nextOperator;

• 清空逻辑增强：clear 按钮应重置所有状态：

  clear.addEventListener("click", function() {
    previousValue = '';
    currentValue = '';
    operator = '';
    previousScreen.textContent = '';
    currentScreen.textContent = '0';
  });

• 小数点支持（补充）：需防止重复输入 .，并在 handleNumber 中判断 currentValue.includes('.')。

✅ 总结：链式计算器设计原则

? 提示：这种模式不处理括号或优先级，但完美匹配基础计算器交互直觉——每按一个运算符，就立刻算出到目前为止的结果，让用户清晰感知计算过程。

通过以上重构，你的计算器即可稳健支持任意长度的链式运算，如 1 + 2 + 3 + 4 = 10、100 / 5 * 2 - 8 = 32，真正完成 Odin Project 的最终挑战。