一文详解如何处理JavaScript中的NaN_Javascript

在 javascript 中，nan（not-a-number）表示一个无效的数字值。通常，它出现在尝试将无法转换为数字的值与数字进行运算时，比如将字符串与数字相加时。

nan 的特殊之处在于它并不等于任何值，包括它自身。这意味着你不能使用普通的相等运算符 (== 或 ===) 来判断一个值是否是 nan。为了正确检查一个值是否是 nan，你可以使用 number.isnan() 或 isnan()。

如何判断一个值是否是 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