為什么會(huì)有兩個(gè)“空”？

在很多語(yǔ)言（如 Java、C#）中，通常只有一個(gè) null 來(lái)表示“無(wú)”。但在 JavaScript 中，Brendan Eich（JS 之父）設(shè)計(jì)了兩個(gè)：

1. undefined：表示**“缺失”**。系統(tǒng)自動(dòng)分配的，意思是“這里應(yīng)該有個(gè)值，但現(xiàn)在還沒(méi)給”。
2. null：表示**“空無(wú)”**。開(kāi)發(fā)者手動(dòng)設(shè)置的，意思是“這里本來(lái)可以有值，但我特意把它清空了”。

通俗比喻：
想象你去餐廳點(diǎn)餐：

• undefined：你坐在座位上，服務(wù)員還沒(méi)給你菜單。狀態(tài)是“未定義”，你不知道有什么菜，因?yàn)榱鞒踢€沒(méi)走到那一步。這是系統(tǒng)/環(huán)境造成的。
• null：服務(wù)員給了你菜單，你看了一圈說(shuō)：“我什么都不想要，給我來(lái)個(gè)空盤子。” 狀態(tài)是“空”，是你主動(dòng)選擇的結(jié)果。

1. 核心區(qū)別對(duì)比表

2. 深度解析：undefined的場(chǎng)景

undefined 通常出現(xiàn)在以下幾種“被動(dòng)”場(chǎng)景中：

場(chǎng)景 1：變量聲明但未賦值

let name;
console.log(name); // undefined

場(chǎng)景 2：訪問(wèn)對(duì)象不存在的屬性

const user = { name: "Alice" };
console.log(user.age); // undefined (屬性不存在)

場(chǎng)景 3：函數(shù)沒(méi)有返回值

function doNothing() {}
console.log(doNothing()); // undefined

場(chǎng)景 4：函數(shù)參數(shù)未傳遞

function sayHi(name) {
  console.log(name);
}
sayHi(); // undefined

關(guān)鍵點(diǎn)：undefined 代表**“意料之外的缺失”或“初始狀態(tài)”**。

3. 深度解析：null的場(chǎng)景

null 通常出現(xiàn)在以下“主動(dòng)”場(chǎng)景中：

場(chǎng)景 1：初始化一個(gè)將來(lái)會(huì)存放對(duì)象的變量

let currentUser = null; // 明確表示當(dāng)前沒(méi)有用戶

// ... 后續(xù)邏輯 ...
if (loginSuccess) {
  currentUser = { id: 1, name: "Bob" };
}

場(chǎng)景 2：釋放內(nèi)存引用（垃圾回收提示）

當(dāng)一個(gè)對(duì)象不再需要時(shí)，將其引用設(shè)為 null，有助于 GC（垃圾回收器）識(shí)別并回收內(nèi)存。

let largeData = new Array(1000000).fill("data");
// 使用完畢...
largeData = null; // 斷開(kāi)引用，幫助內(nèi)存回收

場(chǎng)景 3：API 返回“無(wú)結(jié)果”

后端接口查詢數(shù)據(jù)庫(kù)，如果沒(méi)有找到記錄，通常返回 null 而不是 undefined，因?yàn)?null 是一種明確的業(yè)務(wù)狀態(tài)（“查了，但沒(méi)有”）。

關(guān)鍵點(diǎn)：null 代表**“意料之中的空”或“主動(dòng)清空”**。

4. 類型檢測(cè)的“歷史遺留問(wèn)題”

為什么typeof null === 'object'？

這是一個(gè)著名的 JavaScript Bug，源自 JS 誕生的早期版本。
在底層實(shí)現(xiàn)中，JS 變量的類型標(biāo)簽存儲(chǔ)在低位比特中：

• 000: 對(duì)象 (object)
• 001: 整數(shù) (int)
• 010: 浮點(diǎn) (double)
• 100: 字符串 (string)
• 110: 布爾 (boolean)

而 null 的機(jī)器碼全為 0 (000000)。因此，它的類型標(biāo)簽也是 000，被誤判為 object。

由于修復(fù)這個(gè) Bug 會(huì)導(dǎo)致大量舊網(wǎng)站崩潰，所以 Brendan Eich 決定將錯(cuò)就錯(cuò)，保留至今。

如何正確判斷null？

不要只用 typeof，要結(jié)合嚴(yán)格相等判斷：

function isNull(value) {
  return value === null;
}

function isUndefined(value) {
  return value === undefined;
}

// 或者判斷是否為“空值”（null 或 undefined）
function isNil(value) {
  return value == null; // 利用 == 的特性：null == undefined 為 true
}

5. 實(shí)戰(zhàn)：如何優(yōu)雅地處理空值？

在現(xiàn)代 JavaScript (ES2020+) 中，我們有更優(yōu)雅的工具來(lái)處理這兩個(gè)家伙。

技巧 1：空值合并運(yùn)算符 (??)

當(dāng)你希望只有在值為 null 或 undefined 時(shí)才使用默認(rèn)值，而保留 0、''、false 時(shí)使用：

const config = {
  count: 0,
  name: null,
};

// ? 使用 || (邏輯或) 的陷阱：0 會(huì)被當(dāng)成 false
console.log(config.count || 10); // 10 (錯(cuò)誤！我們想要 0)

// ? 使用 ?? (空值合并)
console.log(config.count ?? 10); // 0 (正確！只有 null/undefined 才替換)
console.log(config.name ?? "Guest"); // "Guest"

技巧 2：可選鏈操作符 (?.)

安全地訪問(wèn)深層嵌套屬性，避免 Cannot read property of undefined 報(bào)錯(cuò)。

const user = {
  address: null,
};

// ? 傳統(tǒng)寫法，如果 address 是 null，會(huì)報(bào)錯(cuò)
// console.log(user.address.street.length);

// ? 可選鏈：如果中間任何一環(huán)是 null/undefined，直接返回 undefined
console.log(user.address?.street); // undefined (不會(huì)報(bào)錯(cuò))
console.log(user.profile?.name); // undefined (profile 不存在)

6. 總結(jié)

?? 博主寄語(yǔ)：
雖然 null == undefined 為 true，但在代碼規(guī)范中，建議嚴(yán)格區(qū)分它們。

最佳實(shí)踐原則：

1. 默認(rèn)值檢查：使用 ?? 操作符。
2. 安全訪問(wèn)：使用 ?. 操作符。
3. 變量初始化：如果變量將來(lái)要存對(duì)象，初始化為 null；如果只是聲明，讓它保持 undefined。
4. API 設(shè)計(jì)：后端返回“無(wú)數(shù)據(jù)”時(shí)用 null，前端判斷時(shí)用 == null 同時(shí)捕獲兩者。

理解這兩個(gè)“空”，能讓你寫出更健壯、更少 Bug 的代碼。

到此這篇關(guān)于JS中兩個(gè)空之null和undefined的文章就介紹到這了,更多相關(guān)JS空null和undefined內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論