JavaScript中Null、NaN与undefined的区别是什么？

Hey there! Let's break down JavaScript's three confusing "no-value" pals: null, NaN, and undefined. They all signal "no valid content" but each has a distinct purpose, origin, and use case. Let's unpack them one by one:

undefined is JavaScript's way of saying, "This thing was declared, but no one gave it a value yet." It's the default value for uninitialized variables, missing function arguments, and non-existent object properties.

Common Scenarios: #

• Uninitialized variables: If you declare a variable but don't assign anything to it, JS sets it to undefined automatically:

  let username;
  console.log(username); // Output: undefined
  

• Missing function arguments: If you call a function without passing a required argument, that parameter will be undefined:

  function sayHello(name) {
    console.log(`Hello, ${name}!`);
  }
  sayHello(); // Output: Hello, undefined!
  

• Non-existent object/array entries: Accessing an object property or array index that doesn't exist returns undefined:

  const user = { name: "Alex" };
  console.log(user.age); // Output: undefined
  
  const numbers = [1, 2, 3];
  console.log(numbers[5]); // Output: undefined
  

• Functions with no return value: Any function that doesn't explicitly return something will implicitly return undefined:

  function doNothing() {}
  console.log(doNothing()); // Output: undefined
  

Unlike undefined, null is a value you explicitly set to indicate "This should be empty by design." It's a deliberate choice to represent an empty or non-existent value, rather than an accidental oversight.

Common Scenarios: #

• Initializing variables for later use: If you know a variable will hold data eventually but don't have it yet, setting it to null makes your intent clear:

  let fetchedData = null; // Will be filled with API data later
  

• Clearing existing values: When you want to reset a variable to an empty state on purpose:

  let tempSession = "active";
  tempSession = null; // Explicitly clear the session
  

• Function returns for "no result found": If a search or lookup fails, returning null tells the caller the operation completed but found nothing:

  function findUserById(id) {
    const users = [{ id: 1, name: "Alice" }];
    const match = users.find(u => u.id === id);
    return match || null; // Return null if no match
  }
  

• Class properties with intentional empty states: In classes, you might initialize properties to null to show they're meant to hold data but aren't populated yet:

  class Car {
    constructor() {
      this.owner = null; // Owner will be set later
      this.model = "Tesla";
    }
  }
  

Fun quirk: typeof null returns 'object'—this is a historical bug in JavaScript that's been kept for backward compatibility!

NaN stands for "Not a Number," but here's the twist: it's actually a member of the Number type. It's JavaScript's way of saying, "I tried to do a number calculation, but it didn't make sense."

Common Scenarios: #

• Invalid type conversions: Trying to convert a non-numeric string to a number results in NaN:

  Number("hello world"); // Output: NaN
  parseInt("abc123"); // Output: NaN
  

• Math operations with no valid result: Some mathematical calculations can't produce a real number, so JS returns NaN:

  0 / 0; // Output: NaN (Division by zero with zero is undefined)
  Math.sqrt(-1); // Output: NaN (Square root of negative number isn't real)
  

• Operations involving NaN: Any calculation with NaN will also return NaN—it's contagious:

  NaN + 5; // Output: NaN
  NaN * 10; // Output: NaN
  

Important note: NaN is the only value in JavaScript that doesn't equal itself. To check if a value is NaN, use Number.isNaN() (strict check) instead of isNaN() (which converts non-numbers to numbers first and can give false positives):

NaN === NaN; // Output: false
Number.isNaN(NaN); // Output: true
Number.isNaN("hello"); // Output: false (correct, since "hello" isn't NaN)
isNaN("hello"); // Output: true (incorrect, because it converts "hello" to NaN first)

Quick Cheat Sheet to Keep Them Straight #

• undefined: Accidental absence (JS sets this when something isn't filled in)
• null: Intentional absence (you set this to mean "nothing here on purpose")
• NaN: Failed numeric operation (result isn't a valid number)

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