null和undefined的区别

先有null后有undefined

核心区别

详细解析

1. 类型不同

javascript

typeof null      // "object" (历史遗留bug)
typeof undefined // "undefined"

这是一个著名的 JavaScript 设计错误，typeof null 返回 "object" 是语言早期实现的遗留问题。

2. 产生场景不同

undefined 出现的典型情况：

javascript

let x;          // 声明但未赋值的变量
console.log(x); // undefined

function foo() {} 
foo();          // 函数没有返回值，默认返回undefined

const obj = {};
obj.property;   // 访问不存在的属性

null 出现的典型情况：

javascript

const empty = null; // 开发者显式赋值为null

document.getElementById('not-exist'); // 获取不存在的DOM元素返回null

JSON.parse('{"x": null}'); // JSON中的null值

3. 相等性比较

javascript

null == undefined   // true (抽象相等)
null === undefined  // false (严格相等)

// 其他有趣比较
null == 0      // false
undefined == 0 // false

4. 数字转换行为

javascript

Number(null)      // 0
Number(undefined) // NaN

1 + null      // 1 (0 + 1)
1 + undefined // NaN (NaN + 1)

实际应用中的区别

1. 函数参数默认值

javascript

function foo(a = 'default') {
  console.log(a);
}

foo(undefined); // "default" (使用默认值)
foo(null);      // null (不触发默认值)

2. JSON 处理

javascript

JSON.stringify({a: undefined, b: null});
// 输出: '{"b":null}' (undefined属性被忽略)

3. 默认值赋值模式

javascript

const { a = 1, b = 1 } = { a: null };
console.log(a, b); // null 1 (null不触发默认值)

最佳实践

1. 主动使用 null：

   • 当你想要明确表示"无值"或"空值"时

   • 例如初始化一个稍后会被赋值的变量

2. 避免意外 undefined：

   javascript

   let obj = {
     prop: null // 比不定义prop更明确
   };

3. 检查存在性：

   javascript

   if (variable == null) {
     // 同时检查null和undefined
   }

4. 现代JavaScript的替代方案：

   • 使用默认参数：function(a = defaultValue) {}

   • 使用空值合并运算符：value ?? defaultValue

为什么需要两个空值？

1. 设计哲学：

   • undefined 表示系统级的、意外的空值

   • null 表示应用级的、预期的空值

2. 历史原因：

   • JavaScript 借鉴了 Java 的 null 概念

   • undefined 是 JavaScript 自己添加的机制

总结

• 当你主动设置一个空值时 → 使用 null

• 当值未被定义或初始化时 → 系统产生 undefined

• 在类型检查时要注意 typeof null 的特殊行为

• 现代代码中可以使用 ?? 运算符统一处理这两个值