JavaScript/TypeScript中null与undefined的正确使用规范

文
章
目
录

• 一、null与undefined的概念差异
• 二、实际使用规范
• （一）变量初始化
• （二）对象属性处理
• （三）函数参数与返回值
• （四）判断空值
• （五）清除引用优化垃圾回收
• 三、不符合规范的示例
• 四、TypeScript类型声明的建议
• 五、ESLint规则建议（可选）
• 六、总结使用原则

JavaScript和TypeScript中，null和undefined这两个看似简单的概念，要是使用不当，很容易给代码带来混乱和隐患。为了让团队开发的代码更具一致性，读起来更清晰，后期维护也更轻松，咱们很有必要统一一下null和undefined的使用规则。下面就来详细讲讲它们的使用规范。

一、null与undefined的概念差异

在深入探讨使用规范之前，先得搞清楚null和undefined的区别。简单来说，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\"
  }
}

这些规则可以在代码编写过程中及时提醒开发者，避免出现不符合规范的代码。

六、总结使用原则

1. 当程序员主动给变量赋值表示“空”或“无值”时，请使用null 。
2. 系统默认的缺省状态就是undefined，不需要我们手动赋值。
3. 在清除对象引用以优化垃圾回收时，用null能起到很好的效果。
4. 判断空值时，== null是个不错的选择，它能同时判断null和undefined。
5. 在进行类型声明时，优先使用| null ，函数参数如果可选，就用? 。

通过遵循这些规范，能让我们的JavaScript和TypeScript代码更加规范、易读，减少潜在的错误，提高开发效率，大家尽量都要遵循规范进行开发，这样后期维护也会方便很多。