一文详解如何处理JavaScript中的NaN-牛翰网

如何判断一个值是否是 NaN

Number.isNaN(value)：这是现代 JavaScript 中检查 NaN 的推荐方法，只有当值严格为 NaN 时才返回 true，不会对非数字类型进行强制转换。

isNaN(value)：这个方法会先将传入的值转换为数字，然后再判断是否是 NaN，所以它可能会有一些不太符合直觉的行为。

1. Number.isNaN() 使用示例

console.log(Number.isNaN(NaN));  // true
console.log(Number.isNaN(123));  // false
console.log(Number.isNaN('abc'));  // false，因为 'abc' 会被转成 NaN，但此时返回的是 false

2. isNaN() 使用示例

console.log(isNaN(NaN));  // true
console.log(isNaN(123));  // false
console.log(isNaN('abc'));  // true，因为 'abc' 无法转换为数字，所以返回 true

从上面可以看到，Number.isNaN() 更为严格，推荐使用它来检查 NaN。

如何处理 NaN

处理 NaN 时，我们需要考虑一些常见的情况，比如输入无效值时如何避免 NaN 影响后续计算。可以通过检查值是否为 NaN 或提供默认值来解决这一问题。

解决方案：避免 NaN 的出现

在实际项目中，我们可以使用如下方法来处理 NaN，确保程序的健壮性。

示例一：用户输入时避免 NaN

假设我们正在开发一个计算器应用，用户输入的值可能会导致 NaN，我们可以在输入后进行验证和处理。

// 计算器应用：处理用户输入
function addNumbers(a, b) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);

    // 检查是否为有效的数字
    if (Number.isNaN(num1) || Number.isNaN(num2)) {
        return '输入无效，请输入数字。';
    }

    return num1 + num2;
}

console.log(addNumbers('10', '5'));  // 输出：15
console.log(addNumbers('10', 'abc'));  // 输出：输入无效，请输入数字。
console.log(addNumbers('abc', '5'));  // 输出：输入无效，请输入数字。

在这个例子中，我们使用 parseFloat 将输入转换为浮动数字类型。如果转换失败，则返回 NaN。在调用 addNumbers 函数时，我们通过 Number.isNaN() 来确保两个输入都是有效的数字。如果其中一个是 NaN，我们就返回错误信息。

示例二：为 NaN 提供默认值

在某些情况下，我们可能希望在值为 NaN 时提供默认值。比如，当处理计算结果时，如果发生了 NaN，我们希望返回 0 或其他合适的默认值。

// 计算器应用：为 NaN 提供默认值
function addNumbers(a, b) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);

    // 如果是 NaN，就给一个默认值 0
    const result = (Number.isNaN(num1) ? 0 : num1) + (Number.isNaN(num2) ? 0 : num2);
    
    return result;
}

console.log(addNumbers('10', '5'));  // 输出：15
console.log(addNumbers('10', 'abc'));  // 输出：10
console.log(addNumbers('abc', '5'));  // 输出：5

在这个例子中，我们使用了三元运算符，在 NaN 出现时将其转换为默认值（如 0），这样即使用户输入了无效的数字，程序也能继续正常运行。

示例三：通过条件判断和提示消息处理 NaN

当进行复杂的计算时，如果结果是 NaN，我们可以向用户提示错误信息，避免直接显示 NaN 导致用户困惑。

// 商品价格计算：检查 NaN 并提示用户
function calculatePrice(price, quantity) {
    const total = price * quantity;

    if (Number.isNaN(total)) {
        return "计算错误，请检查输入的价格和数量是否正确。";
    }

    return `总价是：${total}元`;
}

console.log(calculatePrice(100, 2));  // 输出：总价是：200元
console.log(calculatePrice(100, 'abc'));  // 输出：计算错误，请检查输入的价格和数量是否正确。
console.log(calculatePrice('abc', 2));  // 输出：计算错误，请检查输入的价格和数量是否正确。

在这个例子中，calculatePrice 函数尝试计算商品的总价。如果输入的 price 或 quantity 不是有效的数字，计算结果将是 NaN。通过 Number.isNaN() 来检查，如果是 NaN，我们返回一条友好的错误提示。

防止 NaN 的常见技巧

默认值：在进行数值计算时，确保如果值是 NaN，可以通过 || 或三元运算符等方式赋予默认值，避免程序崩溃。

类型转换：确保输入类型正确，尤其是在处理用户输入时，使用 parseFloat、parseInt 等方法进行类型转换。

健壮的验证：在程序中添加必要的校验和错误处理，避免无效数据引发 NaN。

// 处理 null 和 undefined 的情况
function safeAdd(a, b) {
    const num1 = a == null || isNaN(a) ? 0 : a;  // 对 null 或 undefined 返回 0
    const num2 = b == null || isNaN(b) ? 0 : b;  // 对 null 或 undefined 返回 0
    return num1 + num2;
}

console.log(safeAdd(5, 10));    // 输出：15
console.log(safeAdd(5, null));  // 输出：5
console.log(safeAdd(null, 10)); // 输出：10
console.log(safeAdd(null, null));  // 输出：0