快捷導(dǎo)航

JavaScript中null和undefined區(qū)別小結(jié)

更新時(shí)間：2026年03月05日 09:40:54 作者：Smilezyl

本文主要介紹了JavaScript中null和undefined區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

核心答案

undefined 表示"未定義"，是變量聲明后但未賦值時(shí)的默認(rèn)值，代表系統(tǒng)級別的、意料之外的空值。

null 表示"空值"，是一個(gè)被顯式賦予的值，代表程序級別的、意料之中的空值。

特性	undefined	null
含義	未定義、缺失	空、無
來源	系統(tǒng)自動(dòng)賦予	程序員主動(dòng)賦值
typeof	"undefined"	"object" (歷史bug)
轉(zhuǎn)為數(shù)字	NaN	0

深入解析

1. 產(chǎn)生 undefined 的場景

// 1. 變量聲明未賦值
let a;
console.log(a); // undefined

// 2. 訪問對象不存在的屬性
let obj = {};
console.log(obj.name); // undefined

// 3. 函數(shù)沒有返回值
function fn() {}
console.log(fn()); // undefined

// 4. 函數(shù)參數(shù)未傳遞
function greet(name) {
  console.log(name); // undefined
}
greet();

// 5. 數(shù)組空位
let arr = [1, , 3];
console.log(arr[1]); // undefined

2. 使用 null 的場景

// 1. 顯式表示"空"或"無"
let selectedUser = null; // 當(dāng)前沒有選中用戶

// 2. 作為函數(shù)參數(shù)表示空值
document.getElementById('not-exist'); // 返回 null

// 3. 原型鏈的終點(diǎn)
Object.getPrototypeOf(Object.prototype); // null

// 4. 釋放對象引用（幫助垃圾回收）
let bigData = { /* 大量數(shù)據(jù) */ };
bigData = null; // 顯式釋放

3. 類型轉(zhuǎn)換差異

// 轉(zhuǎn)為布爾值 - 都是 false
Boolean(undefined); // false
Boolean(null);      // false

// 轉(zhuǎn)為數(shù)字 - 差異明顯
Number(undefined);  // NaN
Number(null);       // 0

// 這導(dǎo)致運(yùn)算結(jié)果不同
undefined + 1;  // NaN
null + 1;       // 1

4. 相等性比較

// 寬松相等
null == undefined;   // true（特殊規(guī)則）
null == 0;           // false
undefined == 0;      // false

// 嚴(yán)格相等
null === undefined;  // false
null === null;       // true
undefined === undefined; // true

5. 常見誤區(qū)

誤區(qū)一：typeof null 返回 "object"

typeof null; // "object" — 這是 JS 誕生之初的 bug，至今未修復(fù)
// 正確判斷 null 的方式
value === null

誤區(qū)二：認(rèn)為 undefined 和 null 可以隨意互換

// JSON 序列化時(shí)行為不同
JSON.stringify({ a: undefined, b: null });
// '{"b":null}' — undefined 屬性被忽略！

誤區(qū)三：用 == null 檢測兩者

// 這是個(gè)技巧，可以同時(shí)檢測 null 和 undefined
function isNullish(value) {
  return value == null; // 等同于 value === null || value === undefined
}

代碼示例

默認(rèn)參數(shù)處理

// undefined 會(huì)觸發(fā)默認(rèn)值，null 不會(huì)
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet();          // "Hello, Guest!"
greet(undefined); // "Hello, Guest!"
greet(null);      // "Hello, null!" — null 不觸發(fā)默認(rèn)值

解構(gòu)賦值的默認(rèn)值

const { a = 10, b = 20 } = { a: undefined, b: null };
console.log(a); // 10 — undefined 觸發(fā)默認(rèn)值
console.log(b); // null — null 不觸發(fā)默認(rèn)值

可選鏈與空值合并

const user = { profile: null };

// 可選鏈 - null 和 undefined 都會(huì)短路
user.profile?.name;  // undefined

// 空值合并 - 僅對 null/undefined 生效
const name = null ?? 'Anonymous';  // 'Anonymous'
const age = 0 ?? 18;               // 0（不是 18?。?

// 對比 || 運(yùn)算符
const name2 = null || 'Anonymous'; // 'Anonymous'
const age2 = 0 || 18;              // 18（falsy 值都會(huì)觸發(fā)）

TypeScript 中的區(qū)別

// TypeScript 中可以明確區(qū)分
let a: string | undefined;  // 可能未賦值
let b: string | null;       // 可能為空

// strictNullChecks 開啟后
interface User {
  name: string;
  nickname?: string;        // string | undefined
  deletedAt: Date | null;   // 顯式可為空
}

面試技巧

面試官可能的追問方向

為什么 typeof null 是 "object"？
- JS 最初版本中，值以 32 位存儲，低 3 位表示類型
- 對象的類型標(biāo)志是 000，而 null 的機(jī)器碼全是 0
- 所以 null 被錯(cuò)誤識別為對象

如何準(zhǔn)確判斷 null 和 undefined？

value === null
value === undefined
// 或者
value == null // 同時(shí)判斷兩者

ES6+ 中處理空值的新特性？
- 可選鏈 ?.
- 空值合并 ??
- 邏輯賦值 ??=
在 API 設(shè)計(jì)中如何選擇使用 null 還是 undefined？

展示深度的方式

提到 void 0 生成 undefined 的慣用法（用于壓縮和防止 undefined 被重寫）
解釋為什么 null 是 JavaScript 的"十億美元錯(cuò)誤"（來自 Null Reference 的發(fā)明者 Tony Hoare）
討論 TypeScript 的 strictNullChecks 如何增強(qiáng)類型安全

一句話總結(jié)

undefined 是系統(tǒng)給的"未定義"，null 是程序員給的"空值"；檢測時(shí)用 === null 或 === undefined，同時(shí)檢測用 == null；轉(zhuǎn)數(shù)字時(shí) undefined 變 NaN、null 變 0。

到此這篇關(guān)于JavaScript中null和undefined區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript null undefined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: