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,参数可选用 ?
相关推荐
Setsuna_F_Seiei1 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲3 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙3 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan5 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen5 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理6 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒6 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche15006 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情6737 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具
SoonITer7 小时前
怎样构建一个 Agent-friendly 的网站
前端·agent