章
目
录
JavaScript和TypeScript中，null和undefined这两个看似简单的概念，要是使用不当，很容易给代码带来混乱和隐患。为了让团队开发的代码更具一致性，读起来更清晰，后期维护也更轻松，咱们很有必要统一一下null和undefined的使用规则。下面就来详细讲讲它们的使用规范。
一、null与undefined的概念差异
在深入探讨使用规范之前，先得搞清楚null和undefined的区别。简单来说，undefined是系统默认的“未赋值”状态，就像是一个刚建好的空房子，还没来得及放东西，通常由JavaScript引擎自动赋予。而null则是明确表示“空”或者“没有值”的意思，这是程序员主动给变量设置的，用来表明这个变量处于“空”或者“无效”的状态，就好比你主动把房子里的东西都清空了。下面用表格来更直观地展示一下：
| 类型 | 含义 | 说明 |
|---|---|---|
undefined |
系统默认的“未赋值”状态 | 通常由JavaScript引擎自动赋值 |
null |
明确表示“空”或“无值” | 由程序员主动赋值，表达“空”或“无效”状态 |
二、实际使用规范
（一）变量初始化
在初始化非基本类型变量（像对象、数组或者引用这些）的时候，推荐用null。例如：
let user: User | null = null;
let items: Item[] | null = null;
这么做可以清楚地表明这个变量在初始化时没有实际的值。而对于未初始化的变量，它本身就默认是undefined，所以千万不要手动把变量赋值为undefined 。
（二）对象属性处理
在处理对象属性时，如果这个属性可能暂时没有值，可以将其初始化为null，表示“暂时为空”的状态。比如：
interface Profile {
avatarUrl: string | null;
}
但要注意，不要把对象属性赋值为undefined，用null来代替就好。
（三）函数参数与返回值
当函数的返回值为空的时候，最好返回null，尽量别用undefined。看下面这个例子：
function findUser(id: number): User | null {
return users[id] ?? null;
}
对于函数的可选参数，使用?来声明，而不是| undefined。像这样：
function greet(name?: string) {
const realName = name ?? 'Guest';
}
（四）判断空值
在判断一个变量是否为空的时候，建议使用宽松等于== null 。例如：
if (value == null) {
// 相当于 value === null || value === undefined
}
这种方式可以同时判断变量是null还是undefined。不过，只有在处理全局变量或者window属性的时候，才使用typeof value === 'undefined' ，其他情况下尽量避免。
（五）清除引用优化垃圾回收
如果想要清除某个对象的引用，帮助浏览器更好地回收内存，可以使用null。比如：
largeObject = null;
这里不推荐使用delete obj.prop，用obj.prop = null会更好一些。
三、不符合规范的示例
下面这些写法是不符合我们制定的规范的：
// 不推荐
let data = undefined;
obj.value = undefined;
return undefined;
// 推荐
let data: SomeType | null = null;
obj.value = null;
return null;
从这些示例中可以更清楚地看到规范和不规范写法的区别，方便大家在实际编码中进行对照。
四、TypeScript类型声明的建议
在TypeScript里，对于那些可能不存在值的变量或者返回值，最好用| null明确标注出来。例如：
let token: string | null = null;
要是函数的参数是可选的，同样使用?来声明，而不是| undefined ，就像这样：
function load(id?: number) { ... }
五、ESLint规则建议（可选）
如果想在团队开发中更好地遵守这些规范，可以借助ESLint配置一些规则。下面是相关的配置示例：
{
"rules": {
"no-undefined": "error", // 禁止手动使用undefined
"@typescript-eslint/strict-boolean-expressions": "warn",
"@typescript-eslint/no-unnecessary-condition": "warn"
}
}
这些规则可以在代码编写过程中及时提醒开发者，避免出现不符合规范的代码。
六、总结使用原则
- 当程序员主动给变量赋值表示“空”或“无值”时，请使用
null。 - 系统默认的缺省状态就是
undefined，不需要我们手动赋值。 - 在清除对象引用以优化垃圾回收时，用
null能起到很好的效果。 - 判断空值时，
== null是个不错的选择，它能同时判断null和undefined。 - 在进行类型声明时，优先使用
| null，函数参数如果可选，就用?。
通过遵循这些规范，能让我们的JavaScript和TypeScript代码更加规范、易读，减少潜在的错误，提高开发效率，大家尽量都要遵循规范进行开发，这样后期维护也会方便很多。
