JavaScript中if/else条件分支逻辑异常问题咨询

我是JavaScript初学者，编写了一个通过prompt让用户选择SUMA（加法）或RESTA（减法）的程序。预期逻辑是：当用户点击prompt的「取消」按钮，或输入空内容点击「确定」时，仅弹出alert('No option entered, aborting operation!')并终止执行，但第一版代码实际还会额外触发alert('No valid option entered, aborting operation!')。修改后的第二版功能符合预期，以下是两个版本的代码片段及问题原因解析：

FIRST VERSION (not working as expected): #

let opText = document.getElementById('opText');
let opOperation = prompt('Enter SUMA or RESTA');
let opSuma1; 
let opSuma2; 
let opStatus = true;
let opResult;

if(opOperation === null || opOperation === ""){
    alert('No option entered, aborting operation!'); //THE CODE DISPLAYS THIS MESSAGE IF EITHER 'CANCEL' OR 'OK' BUTTONS ARE CLICKED
    opStatus = false;
}

else {
    opOperation = opOperation.trim().toLowerCase();
}

function addition(){
    opSuma1 = prompt('Enter first value:');
    opSuma2 = prompt('Enter second value:');
    opSuma1 = Number(opSuma1);
    opSuma2 = Number(opSuma2);
    opResult = opSuma1 + opSuma2;
    opText.textContent = `Your result was a ADDITION and it is ${opResult}`;
}

function substraction(){
    opSuma1 = prompt('Enter first value:');
    opSuma2 = prompt('Enter second value:');
    opSuma1 = Number(opSuma1);
    opSuma2 = Number(opSuma2);
    opResult = opSuma1 - opSuma2;
    opText.textContent = `Your result was a SUBSTRACTION and it is ${opResult}`;
}


if(opStatus && opOperation === 'suma'){
    addition();
}
else if(opStatus && opOperation === 'resta'){
    substraction();
}
else {
    
    alert('No valid option entered, aborting operation!'); // BUT IT ALSO DISPLAYS THIS MESSAGE
}

SECOND VERSION (working as expected) #

let opText = document.getElementById('opText');
let opOperation = prompt('Enter SUMA or RESTA');
let opSuma1; 
let opSuma2; 
let opStatus = true;
let opResult;

if(opOperation === null || opOperation === ""){
    alert('No option entered, aborting operation!');
    opStatus = false;
}

else {
    opOperation = opOperation.trim().toLowerCase();
}

function addition(){
    opSuma1 = prompt('Enter first value:');
    opSuma2 = prompt('Enter second value:');
    opSuma1 = Number(opSuma1);
    opSuma2 = Number(opSuma2);
    opResult = opSuma1 + opSuma2;
    opText.textContent = `Your result was a ADDITION and it is ${opResult}`;
}

function substraction(){
    opSuma1 = prompt('Enter first value:');
    opSuma2 = prompt('Enter second value:');
    opSuma1 = Number(opSuma1);
    opSuma2 = Number(opSuma2);
    opResult = opSuma1 - opSuma2;
    opText.textContent = `Your result was a SUBSTRACTION and it is ${opResult}`;
}

 if (opStatus) {
     if (opOperation === 'suma') {
         addition();
     } else if (opOperation === 'resta') {
         substraction();
     } else {
         alert('No valid option entered, aborting operation!');
     }
 }

问题原因解析 #

第一版代码的核心问题在于最后的条件判断逻辑结构：

当用户取消prompt（opOperation为null）或输入空内容时，代码会将opStatus设为false。此时执行最后的判断：

• 第一个if条件opStatus && opOperation === 'suma'：因为opStatus是false，整个表达式结果为false，不执行加法；
• 第二个else if条件opStatus && opOperation === 'resta'：同样因为opStatus是false，表达式结果为false，不执行减法；
• 由于前两个条件都不满足，会直接进入最后的else分支，触发alert('No valid option entered, aborting operation!')，导致出现额外弹窗。

而第二版代码将opStatus的判断放在外层：

• 当opStatus为false时，会直接跳过整个内部的操作类型判断块，不会进入任何弹窗分支；
• 只有opStatus为true时，才会检查用户输入的操作是否合法，此时才有可能触发第二个alert。

简单来说，第一版的else是全局兜底分支，不管opStatus是否有效，只要前两个条件不满足就会执行；第二版则通过外层判断，把无效状态的情况直接排除在后续判断之外，符合预期逻辑。

内容的提问来源于stack exchange，提问作者Dekodbm