undefined 和null 的区别是什么,typeof null vs typeof undefined

题图来自Unsplash，基于CC0协议

导读

在JavaScript中，undefined和null都表示“空”或“没有值”，但它们在语义、类型、使用场景和行为上有着本质的区别。

1. 类型不同

这是最直观的区别。使用typeof操作符检测它们，结果完全不同：

• typeof undefined 返回 "undefined"。undefined本身就是一个全局变量（在ES5之后是全局对象的只读属性），其类型就是它自己。
• typeof null 返回 "object"。这是一个著名的JavaScript设计缺陷，也是一个历史遗留问题。null本应是一种原始类型，但typeof错误地将其识别为对象。

2. 语义和定义不同

• undefined：表示“变量已声明，但尚未被赋值”，或者“对象中不存在的属性”、“函数没有返回值时的默认返回值”等。它是一个变量在“未定义”状态下的默认值。你可以把它理解为一个变量还没有主动赋予任何值。

  let a;
  console.log(a); // undefined (变量声明但未赋值)
  console.log(window.someNonExistentProp); // undefined (对象没有该属性)
  function foo() {}
  console.log(foo()); // undefined (函数无返回值)

• null：表示“空值”或“无对象”。它是一个主动赋值的结果，通常用来表示一个变量应该指向一个对象，但目前明确地指向“没有对象”。它是一个表示“空引用”的特定值。

  let b = null; // 主动赋值为空
  console.log(b); // null

3. 比较时的行为（== 与 ===）

• 宽松相等（==）：null == undefined 的结果是 true。因为JavaScript将这两者视为“相等”的空值（在某些模糊比较规则下）。null和undefined在逻辑上都代表“无”，所以宽松相等认为它们是一回事。
• 严格相等（===）：null === undefined 的结果是 false。因为它们的类型不同（一个是object，一个是undefined），严格相等要求类型和值都相同。

4. 默认值与使用场景

• undefined 通常是系统自动生成的，不建议开发者手动给变量赋值为undefined。它更多是用来检查变量是否存在或是否被赋值。
  • 场景：函数参数的默认值检查（使用typeof或=== undefined）、判断对象属性是否存在。
• null 是开发者用来主动“清空”或“重置”一个变量的值的推荐方式。它明确地告诉其他开发者：“这个变量是有意设置为空的”。
  • 场景：
    • 在API调用中，表示成功但是返回的数据为空（例如，查询数据库找不到记录，返回null）。
    • 在对象属性中，表示该属性存在但值为空对象引用（例如，user.spouse = null，表示该用户没有配偶）。
    • 在事件监听或定时器中，用来clearInterval或clearTimeout时作为返回值替代。
    • 在解构赋值或函数参数默认值中，undefined会触发默认值，而null不会触发默认值。

      function greet(name = "Guest") {
      console.log("Hello, " + name);
      }
      greet("Alice"); // "Hello, Alice"
      greet(undefined); // "Hello, Guest"  (undefined触发了默认值)
      greet(null);     // "Hello, null"    (null不会触发默认值，直接使用了null)

总结：

• 类型：undefined是"undefined"；null是"object"。
• 语义：undefined是“未定义”（系统默认）；null是“空对象引用”（主动赋值）。
• 比较：null == undefined 为 true；null === undefined 为 false。
• 使用：通常用null来主动清空一个变量或表示“没有对象”；用undefined来检测变量是否存在或是否已赋值。推荐的做法是：永远不要手动赋值undefined，而是用null来表示你自己设定的“无”。