修复JavaScript简易计算器中的常见运算符逻辑错误

本文旨在解决javascript简易计算器中常见的运算符逻辑错误。主要问题包括用户输入的运算符被意外覆盖，以及在条件判断中错误地使用了赋值运算符（`=`）而非严格相等运算符（`===`），导致计算器始终执行加法运算。通过修正这些基本错误，并提供正确的代码示例，读者将学会如何构建一个功能正常的javascript计算器。

JavaScript简易计算器运算符逻辑错误解析与修正

在开发简单的JavaScript计算器时，初学者常会遇到一些基础但关键的逻辑错误，导致程序无法按预期执行。本教程将深入分析一个典型的案例，即计算器只能执行加法运算的问题，并提供详细的修正方法。

问题分析

假设我们正在构建一个通过 prompt 获取用户输入数字和运算符的简易计算器。原始代码可能如下所示：

inp1 = prompt("Enter in a number");
inp1 = Number.parseInt(inp1);
let js1 = inp1;

op = prompt("Enter an operator");
op = ["+", "-", "*", "/"]; // 问题点1：用户输入的运算符被覆盖

inp2 = prompt("Enter another number");
inp2 = Number.parseInt(inp2);
let js2 = inp2;

function addition(x, y) {
    return (x + y);
}
function subtraction(x, y) {
    return (x - y);
}
function multiplication(x, y) {
    return (x * y);
}
function division(x, y) {
    return (x / y);
}

if (op = "+") { // 问题点2：使用了赋值运算符而非比较运算符
    console.log(addition(js1, js1)); // 注意：这里使用了js1和js1，而非js1和js2
}
else if (op = "-") { // 问题点2：使用了赋值运算符而非比较运算符
    console.log(subtraction(js1, js2));
}
else if (op = "*") { // 问题点2：使用了赋值运算符而非比较运算符
    console.log(multiplication(js1, js2));
}
else if (op = "/") { // 问题点2：使用了赋值运算符而非比较运算符
    console.log(division(js1, js2));
}
else {
    console.log("Sorry! An Error has occurred");
}

这段代码存在两个核心问题，导致计算器无法正确识别和执行用户选择的运算符：

1. 运算符变量被覆盖： 在获取用户输入的运算符后，代码中有一行 op = ["+", "-", "*", "/"];。这行代码将 op 变量的值从用户输入的字符串（例如 "-"）更改为一个包含所有运算符的数组。这意味着无论用户输入什么，op 最终都会变成这个数组。
2. 赋值运算符误用为比较运算符： 在 if 和 else if 语句中，使用了单等号 = 进行条件判断，例如 if (op = "+")。在JavaScript中，单等号 = 是赋值运算符，它会将右侧的值赋给左侧的变量，然后返回被赋的值。由于非空字符串（如 "+"）在布尔上下文中被视为真值（truthy），因此 if (op = "+") 总是评估为 true，导致程序始终进入第一个 if 块执行加法运算。

此外，原始代码在加法运算中错误地使用了 addition(js1, js1)，这应该修正为 addition(js1, js2)。

立即学习“Java免费学习笔记（深入）”；

修正方案

针对上述问题，我们进行以下修正：

1. 移除不必要的赋值： 删除 op = ["+", "-", "*", "/"]; 这行代码，确保 op 变量始终保存用户输入的运算符。
2. 使用严格相等运算符： 将所有条件判断中的 = 替换为 ===。=== 是严格相等运算符，它会检查两个值是否类型相同且值相等，这才是进行条件判断的正确方式。
3. 修正加法运算参数： 将 addition(js1, js1) 改为 addition(js1, js2)。

修正后的代码示例

// 获取第一个数字
let inp1 = prompt("请输入第一个数字");
let js1 = Number.parseInt(inp1);

// 获取运算符
let op = prompt("请输入一个运算符 (+, -, *, /)");

// 获取第二个数字
let inp2 = prompt("请输入第二个数字");
let js2 = Number.parseInt(inp2);

// 定义运算函数
function addition(x, y) {
    return (x + y);
}
function subtraction(x, y) {
    return (x - y);
}
function multiplication(x, y) {
    return (x * y);
}
function division(x, y) {
    // 避免除以零的错误
    if (y === 0) {
        return "错误：除数不能为零";
    }
    return (x / y);
}

// 根据运算符执行相应运算
if (op === "+") {
    console.log(`结果: ${js1} + ${js2} = ${addition(js1, js2)}`);
} else if (op === "-") {
    console.log(`结果: ${js1} - ${js2} = ${subtraction(js1, js2)}`);
} else if (op === "*") {
    console.log(`结果: ${js1} * ${js2} = ${multiplication(js1, js2)}`);
} else if (op === "/") {
    const divResult = division(js1, js2);
    if (typeof divResult === 'string') { // 检查是否为除以零的错误信息
        console.log(divResult);
    } else {
        console.log(`结果: ${js1} / ${js2} = ${divResult}`);
    }
} else {
    console.log("抱歉！输入的运算符无效。");
}

注意事项与最佳实践

1. 赋值与比较的区别： 始终牢记 = 用于赋值，== 用于宽松比较（只比较值，不比较类型），=== 用于严格比较（同时比较值和类型）。在条件判断中，推荐使用 === 以避免类型转换带来的潜在问题。

   

   算家云

   高效、便捷的人工智能算力服务平台

   37

   查看详情

2. 用户输入验证： 实际应用中，应该对用户输入进行更严格的验证。例如，检查 Number.parseInt() 的结果是否为 NaN（Not a Number），以及用户输入的运算符是否在有效列表中。

3. 使用 switch 语句： 对于多个 if...else if 条件判断，使用 switch 语句可以提高代码的可读性和维护性。

   // 使用 switch 语句重构条件判断
   switch (op) {
       case "+":
           console.log(`结果: ${js1} + ${js2} = ${addition(js1, js2)}`);
           break;
       case "-":
           console.log(`结果: ${js1} - ${js2} = ${subtraction(js1, js2)}`);
           break;
       case "*":
           console.log(`结果: ${js1} * ${js2} = ${multiplication(js1, js2)}`);
           break;
       case "/":
           const divResult = division(js1, js2);
           if (typeof divResult === 'string') {
               console.log(divResult);
           } else {
               console.log(`结果: ${js1} / ${js2} = ${divResult}`);
           }
           break;
       default:
           console.log("抱歉！输入的运算符无效。");
           break;
   }

   登录后复制

4. 错误处理： 在除法运算中加入了对除数为零的判断，这是一个良好的错误处理实践。

通过理解和修正这些基础逻辑错误，您将能够构建出更健壮、更符合预期的JavaScript应用程序。熟练掌握赋值与比较运算符的区别，以及对用户输入的有效处理，是成为一名合格开发者的重要一步。

以上就是修复JavaScript简易计算器中的常见运算符逻辑错误的详细内容，更多请关注php中文网其它相关文章！