JavaScript / TypeScript 中 `null` 与 `undefined` 使用规范

一、目的

为了提升代码一致性、可读性和可维护性,统一团队中 nullundefined 的使用场景与规则,避免混乱与隐患。

二、概念区分

类型 含义 说明
undefined 系统默认的"未赋值"状态 通常由 JavaScript 引擎自动赋值
null 明确表示"空"或"无值" 由程序员主动赋值,表达"空"或"无效"状态

三、使用规范

1. 变量初始化

  • 使用 null 初始化非基本类型变量(对象、数组、引用):

    ini 复制代码
    let user: User | null = null;
    let items: Item[] | null = null;
  • 禁止手动将变量赋为 undefined,未初始化变量默认为 undefined 即可。

2. 对象属性缺省/清空

  • 对象属性可初始化为 null,表示"暂时为空":

    csharp 复制代码
    interface Profile {
      avatarUrl: string | null;
    }
  • 禁止将对象属性赋为 undefined,使用 null 代替。

3. 函数参数与返回值

  • 返回值为空时建议返回 null,避免使用 undefined

    bash 复制代码
    function findUser(id: number): User | null {
      return users[id] ?? null;
    }
  • 函数可选参数应使用 ? 来声明,而非 | undefined

    php 复制代码
    function greet(name?: string) {
      const realName = name ?? 'Guest';
    }

4. 判断空值

  • 判断变量是否为"空"时,使用宽松等于 == null

    ini 复制代码
    if (value == null) {
      // 相当于 value === null || value === undefined
    }
  • 避免使用 typeof value === 'undefined',除非在处理全局变量或 window 属性。

5. 清除引用(优化垃圾回收)

  • 使用 null 显式清除引用,有助于垃圾回收:

    ini 复制代码
    largeObject = null;
  • 不推荐使用 delete obj.prop,可使用 obj.prop = null

四、禁止示例

以下写法不符合规范:

ini 复制代码
// 不推荐
let data = undefined;
obj.value = undefined;
return undefined;

// 推荐
let data: SomeType | null = null;
obj.value = null;
return null;

五、TypeScript 类型声明建议

  • 对于可能缺省的变量或返回值,使用 | null 明确标注:

    csharp 复制代码
    let token: string | null = null;
  • 函数参数若为可选项,应使用 ? 而非 | undefined

    bash 复制代码
    function load(id?: number) { ... }

六、配套 ESLint 规则建议(可选)

perl 复制代码
{
  "rules": {
    "no-undefined": "error", // 禁止手动使用 undefined
    "@typescript-eslint/strict-boolean-expressions": "warn",
    "@typescript-eslint/no-unnecessary-condition": "warn"
  }
}

七、总结原则

  • 程序员主动赋值请使用 null
  • 系统默认缺省状态使用 undefined,无需手动赋值。
  • 清除对象引用时使用 null,有助于垃圾回收。
  • 判断空值时使用 == null,可同时判断 nullundefined
  • 类型声明中建议优先使用 | null,参数可选用 ?
相关推荐
rocky1912 分钟前
谷歌浏览器插件 录制动态 DOM 元素
前端
谁还不是一个打工人5 分钟前
css解决边框四个角有颜色
前端·css
海晨忆1 小时前
【Vue】v-if和v-show的区别
前端·javascript·vue.js·v-show·v-if
JiangJiang1 小时前
🚀 Vue人看React useRef:它不只是替代 ref
javascript·react.js·面试
1024小神1 小时前
在GitHub action中使用添加项目中配置文件的值为环境变量
前端·javascript
龙骑utr1 小时前
qiankun微应用动态设置静态资源访问路径
javascript
Jasmin Tin Wei1 小时前
css易混淆的知识点
开发语言·javascript·ecmascript
齐尹秦1 小时前
CSS 列表样式学习笔记
前端
wsz77772 小时前
js封装系列(一)
javascript
Mnxj2 小时前
渐变边框设计
前端