如何使用JavaScript将NaN替换为其他自定义字符

两个版本代码不生效的核心问题出在执行顺序和赋值逻辑上：

• 执行顺序错误：你在执行NaN替换逻辑之前，就已经把包含NaN的原始值直接写入了DOM的innerHTML，后续不管是循环修改变量还是map生成新数组，都没有同步更新已经渲染到页面的内容，页面自然还是显示NaN。
• 循环赋值无效：for...of遍历基础类型值时，拿到的循环变量x是数组元素的值副本，直接给x重新赋值不会修改原数组的元素，更不会影响之前已经写入DOM的值。
• map版本虽然正确生成了替换完成的新数组，但你没有把新数组的结果重新写回DOM，所以控制台能打印出正确的替换后数组，页面显示没有变化。

核心逻辑是先完成值的校验替换，再把处理后的值写入DOM，避免先渲染再修改的冗余操作。

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

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

  // 先收集原始值做统一处理
  const rawValues = [a, b, c, d];
  // 替换NaN为自定义字符"-"
  const processedValues = rawValues.map(n => Number.isNaN(n) ? "-" : n);
  
  // 所有值处理完成后再写入对应DOM节点
  elem('a1').innerHTML = processedValues[0];
  elem('b1').innerHTML = processedValues[1];
  elem('c1').innerHTML = processedValues[2];
  elem('d1').innerHTML = processedValues[3];
}

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>

• 判断NaN优先用Number.isNaN()，语义清晰且不会做隐式类型转换，避免误判：全局的isNaN()会在判断前自动对入参做类型转换，比如isNaN('abc')、isNaN(undefined)都会返回true，不符合判断真实NaN的需求。
• 你之前用的n !== n判断NaN的写法完全有效，和Number.isNaN(n)的判断结果完全一致，所有JS版本都兼容，只是语义上不如直接调用方法直观。
• 如果业务场景必须先写入DOM再做替换，也可以在替换值之后重新给对应DOM的innerHTML赋值，但这种写法多了一次DOM操作，性能不如先处理值再渲染的方案。

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