网站
JavaScript Null 和 Undefined - W3School
引入
JS 中有两个值都表示”没有”，一个是 null，一个是 undefined。
它们看起来很像，但出现的场景不一样。搞清楚它们的区别，才能正确判断数据状态，避免写出意料之外的逻辑。
正文
定义
定义
undefined表示变量已声明但还没有赋值，null表示主动把值设置为空。
undefined
undefined 是 JS 自动给的默认值。
let name;
console.log(name);
console.log(typeof name);输出结果：
undefined
"undefined"变量声明了但没有赋值，JS 就自动给一个 undefined。
以下场景也会出现 undefined：
函数没有返回值
function sayHello() {
let message = "hello";
}
let result = sayHello();
console.log(result);输出结果：
undefined函数参数没有传
function greet(name) {
console.log(name);
}
greet();输出结果：
undefined对象属性不存在
let person = { name: "Tom" };
console.log(person.age);输出结果：
undefined数组下标越界
let list = [1, 2, 3];
console.log(list[10]);输出结果：
undefinednull
null 是主动设置的空值，表示”这里有意为空”。
let selectedUser = null;
console.log(selectedUser);
console.log(typeof selectedUser);输出结果：
null
"object"typeof null 返回 "object" 是 JS 的一个已知 bug，从 JS 诞生时就存在。null 实际上不是对象。
常见使用 null 的场景：
清空一个变量
let user = { name: "Tom", age: 18 };
user = null;
console.log(user);表示没有找到数据
function findUser(id) {
let users = [{ id: 1, name: "Tom" }];
for (let user of users) {
if (user.id === id) {
return user;
}
}
return null;
}
let result = findUser(2);
console.log(result);输出结果：
nullnull 和 undefined 的区别
| 对比 | null | undefined |
|---|---|---|
| 含义 | 主动设置为空 | 还没有值 |
| 赋值方式 | 自己手动赋值 | JS 自动给的默认值 |
typeof 结果 | "object" | "undefined" |
| 常见场景 | 清空变量、表示没有找到 | 未赋值的变量、未传的参数 |
null 和 undefined 的比较
使用 == 时，null 和 undefined 被认为相等：
console.log(null == undefined);输出结果：
true使用 === 时，它们不相等：
console.log(null === undefined);输出结果：
false这是因为 == 会做类型转换，而 === 不会。
实际开发中，如果想同时判断 null 和 undefined，可以这样写：
let value = null;
if (value == null) {
console.log("值为空或未定义");
}value == null 可以同时匹配 null 和 undefined，这是 == 少数推荐的用法。
它们在条件判断中的表现
null 和 undefined 在条件判断中都会被当成 false。
let a = null;
let b;
if (!a) {
console.log("a 为空");
}
if (!b) {
console.log("b 未定义");
}输出结果：
a 为空
b 未定义它们在运算中的表现
console.log(null + 1);
console.log(undefined + 1);输出结果：
1
NaNnull 在数字运算中会被当成 0，undefined 会被当成 NaN。
console.log(Number(null));
console.log(Number(undefined));输出结果：
0
NaN它们在转字符串时的表现
console.log(String(null));
console.log(String(undefined));输出结果：
"null"
"undefined"console.log(null + "");
console.log(undefined + "");输出结果：
"null"
"undefined"判断方式
判断 null：
let value = null;
console.log(value === null);判断 undefined：
let value;
console.log(value === undefined);
console.log(typeof value === "undefined");同时判断 null 和 undefined：
let value = null;
console.log(value == null);常见写法
| 写法 | 作用 |
|---|---|
let a; | 声明不赋值，值为 undefined |
let a = null; | 主动设置为空 |
value === null | 判断是否为 null |
value === undefined | 判断是否为 undefined |
value == null | 同时判断 null 和 undefined |
typeof value === "undefined" | 判断是否为 undefined |
例子
函数默认参数
function greet(name) {
if (name === undefined) {
name = "访客";
}
console.log("你好，" + name);
}
greet();
greet("Tom");输出结果：
你好，访客
你好，Tom清空对象引用
let data = { list: [1, 2, 3], total: 3 };
data = null;
console.log(data);输出结果：
null把 data 设为 null，表示不再使用这个数据。
安全获取嵌套属性
let response = {
code: 200,
data: null
};
let userList = response.data;
if (userList === null) {
console.log("没有返回用户数据");
}特点
undefined是 JS 自动给的默认值，表示还没有赋值null是主动设置的空值，表示有意为空typeof undefined返回"undefined"typeof null返回"object"，这是已知 bugnull == undefined为true，null === undefined为false- 两者在条件判断中都会被当成
false null参与数字运算时当0，undefined参与数字运算时得到NaN- 判断
null用=== null，同时判断两者用== null
理解
可以把 undefined 理解成”还没放东西进去”。盒子已经在了，但里面是空的，系统给你贴了个”未设置”的标签。
null 可以理解为”我主动把东西拿走了”。盒子里原来可能有东西，但我特意清空了，贴了个”已清空”的标签。
两个值都表示”没有”，但一个是被动的，一个是主动的。typeof null 返回 "object" 是历史 bug，知道就行，不用纠结。
实际开发中，null 用得更多，因为主动设空比让系统给默认值更有明确含义。
引出
理解了 null 和 undefined 后，可以继续学习 JS Symbol，它是值类型中比较特殊的一种。
也可以学习 JS 类型转换，了解 null 和 undefined 在不同类型转换中的表现。