JS 中 null 和 undefined 的区别

在平常写代码的时候，一直搞混 null 和 undefined 的概念，所以还是写一篇来记录一下吧~

MDN给的定义

null

值 null 是一个字面量 —— 是 JS 的基本数据类型，它不是全局对象的一个属性。null 表示缺少的标识，指示变量未指向任何对象。把 null 作为尚未创建的对象，也许更好理解

直接记录重点👇

• 声明式 —— 代表了空值
• 这个值有定义，但没有指向任何内存中的任何对象

undefined

undefined 是 全局对象 的一个属性。也就是说，它是全局作用域的一个变量。 undefined 的最初值就是原始数据类型 undefined 。

重点 👇

• 隐藏式 —— 代表了空值
• 这个值没有定义

这里放一张经典的照片吧~

易错点

1️⃣ typeof null 为什么是 object ?

console.log(typeof null); // object

上面这行代码的结果是 object，所以 object 是对象么？

答案肯定是否，null 是 Javascript 里的一种基本类型，其它几种基本类型还有 string，number 等，而 object 是引用类型，也称为对象类型

之所以会出现这个结果，是因为 typeof 判断基于的是底层，JS 中不同的数据类型在底层都表示为二进制 👇

• 000 —— 对象，数据是对象的引用
• 1 —— 整型，数据是 31 位带符号整数
• 010 —— 双精度类型，数据是双精度数字
• 100 —— 字符串，数据是字符串
• 110 —— 布尔类型，数据是布尔值

可以看到二进制的前三位为 0 会被 typeof 判定为 object 类型。

上面说了 null 是个空值，二进制表示全是 0，所以 typeof 看到前三位是 0 之后，就会将其判断为 object 返回

所以想要判断数据类型还是使用 Object.prototype.toString.call() 吧

2️⃣ 为什么 == 和 === 对比会出现 true 和 false ？

ECMA 上是这么写的👇

• If x is null and y is undefined, return true.
• If x is undefined and y is null, return true.

因为 === 的是强等，它的比较规则如下

1. 如果类型不同，那就直接返回 false
2. 如果类型相同，则进行值比较，如果值不同就是 false，如果值相同则 true
3. 特殊情况 —— NaN 互相比较或者有一个是 NaN 时，则返回 false

而 == 是弱等，它的比较规则如下

1. 如果两个值类型相同，进行 === 比较，比较规则同上

2. 如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较👇

3. 如果一个是 null、一个是 undefined ，那么相等。

4. 如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。

5. 如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。

6. 如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的 toString 或者valueOf方法。

3️⃣ 为什么 null + 1 和 undefined + 1 表现不同？

这就涉及到 JS 中的隐式类型转换 —— JS 的一个设计模式，在执行 加法运算 前，隐式类型转换会尝试将表达式中的变量转换为 number 类型

• null 转化为 number 时，会转换成 0
• undefined 转换为 number 时，会转换为 NaN

所以 null + 1 的结果为 1，undefined + 1 的结果是 NaN

总结

建议在日常开发中使用 null 来返回空的情况，而不要不写返回值或返回 undefined

而且在使用 undefined 时， 建议也不要使用下面这种方式

let a = undefined;

⭐️ 使用 void 这个 API

let a = void 0;