為什么會有兩個“空”？

在很多語言（如 Java、C#）中，通常只有一個 null 來表示“無”。但在 JavaScript 中，Brendan Eich（JS 之父）設計了兩個：

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

通俗比喻：
想象你去餐廳點餐：

• undefined：你坐在座位上，服務員還沒給你菜單。狀態(tài)是“未定義”，你不知道有什么菜，因為流程還沒走到那一步。這是系統(tǒng)/環(huán)境造成的。
• null：服務員給了你菜單，你看了一圈說：“我什么都不想要，給我來個空盤子。” 狀態(tài)是“空”，是你主動選擇的結果。

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

2. 深度解析：undefined的場景

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

場景 1：變量聲明但未賦值

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

場景 2：訪問對象不存在的屬性

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

場景 3：函數(shù)沒有返回值

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

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

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

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

3. 深度解析：null的場景

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

場景 1：初始化一個將來會存放對象的變量

let currentUser = null; // 明確表示當前沒有用戶

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

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

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

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

場景 3：API 返回“無結果”

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

關鍵點：null 代表**“意料之中的空”或“主動清空”**。

4. 類型檢測的“歷史遺留問題”

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

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

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

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

由于修復這個 Bug 會導致大量舊網(wǎng)站崩潰，所以 Brendan Eich 決定將錯就錯，保留至今。

如何正確判斷null？

不要只用 typeof，要結合嚴格相等判斷：

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

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

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

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

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

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

當你希望只有在值為 null 或 undefined 時才使用默認值，而保留 0、''、false 時使用：

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

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

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

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

安全地訪問深層嵌套屬性，避免 Cannot read property of undefined 報錯。

const user = {
  address: null,
};

// ? 傳統(tǒng)寫法，如果 address 是 null，會報錯
// console.log(user.address.street.length);

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

6. 總結

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

最佳實踐原則：

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

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

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

最新評論