本文教你用一个状态对象和操作符映射函数，优雅实现支持加减乘除的动态计算器，避免硬编码判断，让等号按钮能根据用户上次点击的运算符自动执行对应计算。
本文教你用一个状态对象和操作符映射函数，优雅实现支持加减乘除的动态计算器，避免硬编码判断，让等号按钮能根据用户上次点击的运算符自动执行对应计算。
构建一个功能完整的动态计算器，关键在于状态管理与运算符解耦。新手常陷入“为每个运算符写独立事件处理逻辑”的误区，导致代码冗余、难以扩展。正确做法是：将用户操作抽象为三种状态——输入数字、选择运算符、触发计算，并用一个统一的数据对象（如 data）持久化中间状态。
核心设计思路
-
data对象：存储value（第一个操作数）、operator（待执行的运算符）、clear（清屏标志），替代分散的全局变量； -
运算符映射表
op：用对象字面量将符号（如'+'）映射为对应函数，实现“运算符即数据”，便于复用和扩展； -
单入口函数
calc(v)：所有按钮共用该函数，通过正则匹配v类型（数字/运算符/等号/清除）分流处理，逻辑清晰且易维护。
完整可运行示例
<div id="disp">0</div>
<button onclick="calc(1)">1</button>
<button onclick="calc(2)">2</button>
<button onclick="calc(3)">3</button>
<button onclick="calc('/')">÷</button>
<br><button onclick="calc(4)">4</button>
<button onclick="calc(5)">5</button>
<button onclick="calc(6)">6</button>
<button onclick="calc('*')">×</button>
<br><button onclick="calc(7)">7</button>
<button onclick="calc(8)">8</button>
<button onclick="calc(9)">9</button>
<button onclick="calc('-')">−</button>
<br><button onclick="calc(0)">0</button>
<button onclick="calc('.')">.</button>
<button onclick="calc('=')">=</button>
<button onclick="calc('+')">+</button>
<br><button onclick="calc('C')">C</button>
<script>
const disp = document.getElementById("disp");
let data = {}; // 状态容器：{ value, operator, clear }
// 运算符函数映射表 —— 扩展只需新增键值对
const op = {
'+': (a, b) => a + b,
'-': (a, b) => a - b,
'*': (a, b) => a * b,
'/': (a, b) => b !== 0 ? a / b : NaN // 防除零
};
const calc = v => {
let cv = disp.innerText;
// 【数字/小数点】输入处理
if (/[\d\.]/.test(v)) {
if (data.clear) {
cv = '0';
delete data.clear;
}
if (cv === '0' && v !== '.') cv = '';
if (/\./.test(cv) && v === '.') return; // 防重复小数点
disp.innerText = cv + v;
}
// 【运算符】记录并准备第二操作数
else if (/[\+\-\*\/]/.test(v)) {
data.value = cv;
data.operator = v;
data.clear = true;
}
// 【等号】执行计算
else if (v === '=' && data.value !== undefined && data.operator) {
const result = op[data.operator](Number(data.value), Number(cv));
disp.innerText = isNaN(result) ? 'Error' : String(result);
data = {}; // 重置状态
}
// 【清除】一键归零
else if (v === 'C') {
data = {};
disp.innerText = '0';
}
};
</script>
关键注意事项
- ✅ 状态一致性：每次运算符点击后设置
data.clear = true，确保下次数字输入时清空显示，这是实现“输入新数字”逻辑的核心； - ⚠️ 类型安全：务必用
Number()转换字符串数值，避免'1' + '2'拼接成'12'； - ? 边界防护：除法需检查除数是否为零，返回
NaN并在 UI 显示Error，提升健壮性； - ? 可扩展性：新增运算符（如
%或^）只需在op对象中添加对应函数，无需修改主逻辑。
这种设计将“动态运算符”问题转化为状态驱动 + 函数式映射，既符合现代 JavaScript 工程实践，又为后续添加历史记录、括号、科学计算等功能预留了清晰架构。
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
