使用JavaScript将NaN替换为'-'字符的方法与问题修复

代码失效是三个逻辑错误导致的：

• 执行顺序错误：先把变量值（包括NaN）写入了DOM，之后才遍历数组做替换，就算数组内的值修改完成，已经渲染到页面的内容也不会自动更新。
• 遍历赋值无效：用for...of遍历基础类型数组时，拿到的循环变量x是数组元素的值拷贝，给x重新赋值不会修改原数组的存储内容，仅修改临时变量不会产生实际效果。
• 判断逻辑不全：现有判断逻辑仅覆盖了NaN场景，没有覆盖需要统一替换的null、undefined场景。

推荐先统一处理所有待展示的值，完成替换后再写入DOM，避免重复操作。

推荐实现（映射表方式） #

把待展示的值和对应的DOM节点ID做关联，遍历过程中一次性完成值校验、替换、渲染全流程：

var a, b, c, d;
var elem = document.getElementById.bind(document);

function iFunc () {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;

  // 值与DOM节点的映射表
  const renderList = [
    { domId: 'a1', value: a },
    { domId: 'b1', value: b },
    { domId: 'c1', value: c },
    { domId: 'd1', value: d }
  ];

  for (const item of renderList) {
    // 统一判断NaN、null、undefined，符合替换条件就返回"-"
    const displayValue = (item.value === null || item.value === undefined || Number.isNaN(item.value)) 
      ? '-' 
      : item.value;
    elem(item.domId).innerHTML = displayValue;
  }
}

iFunc();

配套HTML结构无需修改，保持原有表格即可：

<table>
  <tr>
    <td><span id="a1"></span></td>
    <td><span id="b1"></span></td>
    <td><span id="c1"></span></td>
    <td><span id="d1"></span></td>
  </tr>
</table>

兼容原有变量写法的实现 #

如果要保留原有单独声明x1-x4变量的写法，需要通过数组索引修改元素值，处理完成后再渲染到DOM：

var a, b, c, d, x1, x2, x3, x4;
var elem = document.getElementById.bind(document);

function iFunc () {
  a = 1;
  b = 3;
  c = 2;
  d = NaN;
  
  // 先存原始值，不要提前写入DOM
  var arrX = [a, b, c, d];
  const domIdList = ['a1', 'b1', 'c1', 'd1'];
  
  for (let i = 0; i < arrX.length; i++) {
    const currentVal = arrX[i];
    if (currentVal === null || currentVal === undefined || Number.isNaN(currentVal)) {
      arrX[i] = "-";
    }
    // 值处理完成后再写入对应DOM节点
    elem(domIdList[i]).innerHTML = arrX[i];
  }

  // 如需给x1-x4赋值可以在这里取arrX对应索引的值
  [x1, x2, x3, x4] = arrX;
}

iFunc();

注意：判断NaN请使用Number.isNaN()，不要用全局的isNaN()。全局isNaN()会先把传入值强制转成数值类型再判断，会把非数值的有效值（比如字符串、普通对象）误判为NaN，Number.isNaN()只会对真正的NaN值返回true，判断逻辑更准确。

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