JavaScript基础：typeof, null, 和undefined
编程小白也能懂的JavaScript核心概念详解 – 用大白话解释typeof运算符、null和undefined的区别与用法
👉 typeof 运算符
typeof 是JavaScript中的一个运算符，用来检测变量的数据类型。它会返回一个表示数据类型的字符串。
大白话解释
可以把 typeof 想象成一个”数据类型的检测仪”：你给它一个值，它就告诉你这个值是什么类型的。
基本用法
使用typeof有两种方式：
1. typeof x（作为运算符使用）
2. typeof(x)（作为函数使用，但实际不是函数）
返回结果
typeof返回的结果有7种可能：
- “undefined” – 未定义
- “boolean” – 布尔值
- “number” – 数字
- “string” – 字符串
- “symbol” – 符号（ES6新增）
- “function” – 函数
- “object” – 对象或null
注意： 数组、null和普通对象都会被typeof识别为”object”，这是JavaScript的一个历史遗留特性。
代码示例
typeof 42; // 返回 “number”
typeof “hello”; // 返回 “string”
typeof true; // 返回 “boolean”
typeof undefined; // 返回 “undefined”
typeof null; // 返回 “object” (这是历史遗留问题)
typeof [1, 2, 3]; // 返回 “object” (数组也是对象)
typeof {name: ‘John’}; // 返回 “object”
typeof function() {}; // 返回 “function”
typeof console.log; // 返回 “function”
👉 undefined
undefined 表示一个变量已经声明但尚未赋值，或者函数没有返回值时的默认返回值。
大白话解释
想象你买了一栋房子但还没搬家具进去，这时候房子就是”undefined”状态 – 它存在，但里面什么都没有。
常见场景
1. 声明变量但未赋值：
let name; // name 是 undefined
2. 访问对象不存在的属性：
let person = {}; person.age // 是 undefined
3. 函数没有return语句时：
function test() {}
let result = test(); // result 是 undefined
4. 函数参数没有传递：
function greet(name) {}
greet(); // name 在函数内是 undefined
注意事项
• undefined 是全局对象的一个属性
• 在ES5之前，undefined可以被重新赋值（现在不能了）
• typeof undefined 返回 “undefined”
代码示例
let address;
console.log(address); // 输出 undefined
console.log(typeof address); // 输出 “undefined”
function sayHello() {
// 没有return语句
}
let message = sayHello();
console.log(message); // 输出 undefined
let person = {
name: ‘Lucy’
};
console.log(person.age); // 输出 undefined
👉 null
null 表示一个空值或者”无”的对象，通常用于表示变量没有指向任何对象。
大白话解释
null就像是一个空盒子：你知道这个盒子存在，但里面什么都没有，而且是特地把它清空的。
关键点
• null 是一个表示”无”的特殊值
• 它是一个原始值，但 typeof null 返回 “object”（历史遗留问题）
• 通常由程序员明确赋值，表示变量没有指向任何对象
• 在数值运算中被当作0处理
常见场景
1. 初始化一个将来会保存对象的变量：
let car = null; // 稍后car会被赋值为一个汽车对象
2. 清空一个对象引用：
let myObj = {data: "example"};
myObj = null; // 释放对象引用
3. 作为函数的返回值，表示没有对象可以返回
注意事项
• null == undefined 为 true（非严格相等）
• null === undefined 为 false（严格相等）
• 不要用null来检测未初始化的变量（应该用undefined）
• 在DOM操作中，获取不存在的元素返回null
代码示例
let user = null; // 表示”没有用户对象”
console.log(user); // 输出 null
console.log(typeof user); // 输出 “object”
let bigData = { /* 很大的数据对象 */ };
// 使用后释放内存
bigData = null;
console.log(null == undefined); // true (非严格相等)
console.log(null === undefined); // false (类型不同)
📊 null vs undefined 对照表
| 特性 | undefined | null |
|---|---|---|
| 含义 | 变量声明了但未赋值 | 表示一个为空的对象引用 |
| 类型 | Undefined（基本类型） | Null（基本类型） |
| typeof结果 | “undefined” | “object”（历史遗留问题） |
| 如何产生 | 系统自动赋给未初始化的变量 | 程序员手动赋值 |
| 数值转换 | NaN（不是一个数字） | 0 |
| 相等比较 (==) | null == undefined 为 true | |
| 严格相等 (===) | null === undefined 为 false | |
| 典型使用场景 | 检测变量是否已初始化 | 清空对象引用或表示值不存在 |
最佳实践： 在JavaScript中，通常使用undefined表示系统级、意外的空值，而使用null表示应用级、预期的空值。
💡 关键知识点总结
typeof 要点
• 用于检测变量类型，返回类型字符串
• 特殊点：null会被识别为”object”
• 函数会被识别为”function”
• 数组和普通对象都返回”object”
undefined 要点
• 表示”未定义”或”未赋值”
• 系统自动赋值的默认状态
• 使用严格相等(===)检测undefined
• 避免直接给变量赋undefined值
null 要点
• 表示”空对象引用”
• 需要程序员显式赋值
• 使用严格相等(===)检测null
• 用于释放对象引用
记忆技巧： 把undefined看作是”还没放东西的抽屉”，把null看作是”特意清空的抽屉”。typeof则是你识别抽屉里物品类型的工具。