本文详解如何将计算器操作封装为函数对象，通过字符串键安全、高效地动态调用对应数学运算，避免冗长 if-else 链，提升代码可维护性与可扩展性。
本文详解如何将计算器操作封装为函数对象，通过字符串键安全、高效地动态调用对应数学运算，避免冗长 if-else 链，提升代码可维护性与可扩展性。
在科学计算器开发中，频繁使用 if (value === 'sin') { ... } else if (value === 'log') { ... } 不仅违反 DRY 原则，还难以维护和测试。更优雅的方案是：将每个操作抽象为一个纯函数，并以操作符字符串（如 "sin"）为键，构建函数映射对象。关键在于——对象值必须是函数本身，而非函数调用结果。
你原始代码的问题在于：
const calcFunctions = {
cos: Math.cos(expression), // ❌ 错误！此处立即执行，且 expression 可能未定义
tan: Math.tan(expression), // ❌ 同上，返回 NaN 或报错
};这会导致对象初始化时就求值，不仅无法复用，还会因 expression 未声明而抛出 ReferenceError。
✅ 正确做法是存储函数引用（或箭头函数），并在需要时传入当前表达式值：
const calcFunctions = {
ce: () => {
expression = "";
ans.value = 0;
},
"x^2": (x) => x * x,
radic: (x) => Math.sqrt(x),
log: (x) => Math.log10(x), // 推荐 log10 而非自然对数，更符合科学计算器习惯
cos: (x) => Math.cos(x),
sin: (x) => Math.sin(x),
tan: (x) => Math.tan(x),
exp: (x) => Math.exp(x),
"=": () => evaluateExpression(), // 自定义计算逻辑
};? 提示：Math.log() 默认为自然对数，科学计算器通常使用常用对数（底为 10），建议显式使用 Math.log10(x)。
接下来，在事件处理中动态调用：
button.addEventListener("click", (event) => {
const value = event.target.dataset.value; // 如 "sin", "radic"
// ✅ 安全调用：使用可选链操作符（?.）+ 函数调用
const result = calcFunctions[value]?.(expression);
// 若存在对应函数且执行成功，则更新 expression
if (result !== undefined) {
expression = result;
} else if (value === "ce") {
calcFunctions.ce(); // 特殊操作（清空），无返回值
}
});⚠️ 重要注意事项：
- 始终校验输入：expression 应为合法数值（如 parseFloat() 后检查 isNaN()），否则 Math.sin(NaN) 返回 NaN，导致后续计算失效；
- 避免副作用函数混入：ce 和 = 等操作不参与数值计算，应单独处理或统一设计为 (state) => newState 形式以保持接口一致性；
- 错误边界处理：对 Math.sqrt(-1)、Math.log(0) 等非法输入，建议包裹 try-catch 或提前校验，返回用户友好的提示（如 "Invalid input"）；
- 扩展性设计：新增运算符只需在对象中添加一行，无需修改控制流逻辑，极大提升可维护性。
最终，这种“函数字典”模式不仅让核心逻辑清晰简洁，也为未来支持自定义函数、历史回溯、表达式解析等高级功能打下坚实基础。
