JS开发简易计算器结果输出NaN问题的正确实现方案咨询

页面显示NaN是三个核心代码错误导致的：

• calc函数里只声明了result变量但没有赋初始值，变量默认值为undefined，和任何值做运算都会直接得到NaN
• 现有计算逻辑完全不支持运算符处理：你把输入的每个字符单独转整数累加，+、-、*、/、括号这类运算符被parseInt转换时会直接返回NaN，最终结果必然是NaN
• 逻辑冗余存在状态bug：input函数每次点击按钮都先清空输入框、再循环遍历全局存储的输入数组拼接内容，计算完成后数组不会重置，多次输入会出现内容重复拼接的问题

入门阶段做计算器不需要一开始就手写复杂的表达式解析逻辑，直接读取输入框的完整运算字符串计算即可，修正后可直接运行的完整代码如下：

HTML部分 #

<div>
  <form>
    <div>
      <input type="text" name="value" id="value" readonly>
      <p id="result"></p>
    </div>
    <div>
      <input type="button" name="(" value="(" class="but" onclick="input(this);">
      <input type="button" name=")" value=")" class="but" onclick="input(this);">
      <input type="button" name="/" value="/" class="but" onclick="input(this);">
      <input type="button" name="*" value="*" class="but" onclick="input(this);">
      <br>
      <input type="button" name="7" value="7" class="but" onclick="input(this);">
      <input type="button" name="8" value="8" class="but" onclick="input(this);">
      <input type="button" name="9" value="9" class="but" onclick="input(this);">
      <input type="button" name="^" value="^" class="but" onclick="input(this);">
      <br>
      <input type="button" name="4" value="4" class="but" onclick="input(this);">
      <input type="button" name="5" value="5" class="but" onclick="input(this);">
      <input type="button" name="6" value="6" class="but" onclick="input(this);">
      <input type="button" name="-" value="-" class="but" onclick="input(this);">
      <br>
      <input type="button" name="1" value="1" class="but" onclick="input(this);">
      <input type="button" name="2" value="2" class="but" onclick="input(this);">
      <input type="button" name="3" value="3" class="but" onclick="input(this);">
      <input type="button" name="+" value="+" class="but" onclick="input(this);">
      <br>
      <input type="button" name="0" value="0" class="but" onclick="input(this);">
      <input type="button" name="." value="." class="but" onclick="input(this);">
      <input type="button" name="clear" value="C" onclick="clearInput();">
      <input type="button" name="=" value="=" onclick="calc();">
    </div>
  </form>
</div>

JS部分 #

// 移除冗余全局数组，直接操作输入框内容减少状态不一致问题
const input = (btn) => {
  const inputDom = document.getElementById('value');
  // 将^幂运算符自动替换为JS原生支持的**运算符
  const inputVal = btn.value === '^' ? '**' : btn.value;
  inputDom.value += inputVal;
}

// 新增清空功能
const clearInput = () => {
  document.getElementById('value').value = '';
  document.getElementById('result').innerText = '';
}

const calc = () => {
  const inputDom = document.getElementById('value');
  const resultDom = document.getElementById('result');
  try {
    // 个人本地练手可使用eval直接计算表达式，公开线上项目禁止使用eval避免XSS安全风险
    const result = eval(inputDom.value);
    // 校验结果合法性，处理除以0、表达式写错的场景
    if (isNaN(result) || !isFinite(result)) {
      resultDom.innerText = '表达式非法，请重新输入';
      return;
    }
    resultDom.innerText = result;
  } catch (e) {
    resultDom.innerText = '表达式非法，请重新输入';
  }
}

• 给输入框加了readonly属性，避免用户手动输入非法字符
• 新增清除按钮，支持一键重置输入和结果
• 增加异常捕获逻辑，括号不匹配、连续输入运算符等错误场景不会直接抛出控制台错误，而是给用户明确提示
• 自动处理幂运算符适配，不需要额外手写幂运算逻辑
• 进阶提示：等你把基础功能跑通后，可以尝试去掉eval，自己实现「中缀表达式转后缀表达式」的计算逻辑，能很好地锻炼JS基础能力。

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