原文地址：Everything about null in JavaScript
原文作者：Dmitri Pavlutin
譯者：Gopal
JavaScript 有兩種型別：原始型別（strings, booleans, numbers, symbols）和物件
物件是一個復雜的資料結構，最簡單的 JavaScript 物件是普通物件 —— 鍵和相關值的集合
let myObject = {
name: 'Eric Cartman'
};
但是很多情況下不能創建一個物件，在這種情況下，JavaScript 提供了一個特殊的值 null —— 表示缺少物件
let myObject = null;
在這篇文章中，你將學習關于 JavaScript 中的 null 的一切: 它的含義，如何檢測它，null 和 undefined 之間的區別，以及為什么大量使用 null 會造成代碼維護困難等
1.null 的概念
JavaScript 規范中這么描述 null
null 是一種原始型別，表示有意不包含任何物件值
如果您看到 null(分配給變數或由函式回傳)，那么在那個位置原本應該是一個物件，但由于某種原因，一個物件沒有創建
比如，函式 greetObject() 創建物件，但也可以在無法創建物件時回傳 null:
function greetObject(who) {
if (!who) {
return null;
}
return { message: `Hello, ${who}!` };
}
greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject(); // => null
當上面的函式中傳入一個字串引數時，如預期的，函式回傳一個物件 { message: 'Hello, Eric!' }
但是，函式中不傳任何引數時，該函式回傳 null，回傳 null 是合理的，因為 who 引數沒有值，導致 greeting 物件無法創建
1.1 null 的一個比較貼切的比喻
考慮關于 null 的一個比較貼切的比喻，你可以把變數想象成一個盒子，就像變數可以容納物件一樣，盒子也可以容納像茶壺等的物品
但一旦你收到一個盒子，打開它，什么也沒有!有人弄錯了，給了你一個空盒子，該盒子不包含任何內容，或者換句話說，它包含一個 null 值
2. 如何去檢測 null
檢查 null 好方法是使用嚴格相等運算子
const missingObject = null;
const existingObject = { message: 'Hello!' };
missingObject === null; // => true
existingObject === null; // => false
missingObject === null 的結果為 true，因為 missingObject 變數包含一個 null 值，如果變數包含非空值，比如物件，則運算式 existingObject === null 的結果為 false
2.1 null 是一個假值
null 與 false、0、"、undefined、NaN 都是假值，如果在條件陳述句中遇到它們，那么 JavaScript 將把它們強制為 false
Boolean(null); // => false
if (null) {
console.log('null is truthy');
} else {
console.log('null is falsy'); // logs 'null is falsy'
}
2.2 typeof null
typeof value 型別運算子可以確定值的型別，例如，型別為 15 的是 number，typeof { prop: 'Value' } 等于 object，
有趣的是，null 值型別的結果是什么
typeof null; // => 'object'
一個缺失的物件型別怎么被判斷為 object? 原來 typoef null 作為 object 是早期 JavaScript 實作中的一個錯誤
不要使用 typeof 運算子檢測 null 值，如前所述，使用嚴格的相等運算子 myVar === null
如果你想使用 typeof 去檢查一個變數是否是一個物件，你必須排除掉 null 的情況
function isObject(object) {
return typeof object === 'object' && object !== null;
}
isObject({ prop: 'Value' }); // => true
isObject(15); // => false
isObject(null); // => false
3. null 的陷阱
null 通常會在你希望使用物件的情況下意外出現，然后，如果嘗試從 null 中提取屬性，JavaScript 會拋出一個錯誤
讓我們再次使用 greetObject() 函式并嘗試從回傳的物件中訪問 message 屬性
let who = '';
greetObject(who).message;
// throws "TypeError: greetObject() is null"
因為 who 變數是一個空字串，所以函式回傳 null，當從 null 訪問 message 屬性時，將拋出型別錯誤錯誤
你可以通過使用 可選鏈運算子 來處理 null
let who = '';
greetObject(who)?.message ?? 'Hello, Stranger!';
// => 'Hello, Stranger!'
或者使用下一節中描述的兩種選擇，
4. null 的替代方案
當你不能構造一個物件時，很容易回傳 null，但這種做法也有缺點
一旦 null 出現在執行堆疊中，你總是必須檢查它
我們盡量避免回傳 null：
- 回傳默認物件而不是
null - 拋出錯誤而不是回傳
null
讓我們回憶一下 greetObject() 函式回傳 greeting 物件
當缺少引數時，可以回傳一個默認物件，而不是回傳 null
function greetObject(who) {
if (!who) {
who = 'Stranger';
}
return { message: `Hello, ${who}!` };
}
greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject(); // => { message: 'Hello, Stranger!' }
或者拋出一個錯誤
function greetObject(who) {
if (!who) {
throw new Error('"who" argument is missing');
}
return { message: `Hello, ${who}!` };
}
greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject(); // => throws an error
這些實踐可以讓你完全避免處理 null
5. null vs undefined
undefined 就是未初始化的變數或物件屬性的值
例如，如果在宣告變數時沒有賦初值，那么訪問該變數的結果為 undefined
let myVariable;
myVariable; // => undefined
null 和 undefined 之間的主要區別是，null 表示丟失了的物件，而 undefined 表示未初始化的狀態
嚴格相等運算子 === 區分 null 和 undefined
null === undefined; // => false
而松散相等運算子 == 則認為 null 和 undefined 相等
null == undefined; // => true
我使用松散相等運算子檢查變數是否為 null 或 undefined
function isEmpty(value) {
return value =https://www.cnblogs.com/gopal/archive/2022/09/10/= null;
}
isEmpty(42); // => false
isEmpty({ prop:'Value' }); // => false
isEmpty(null); // => true
isEmpty(undefined); // => true
6. 總結
null 是 JavaScript 中的一個特殊值，表示丟失的物件
嚴格相等運算子判斷變數是否為空: variable === null，
typoef 運算子用于確定變數的型別(number, string, boolean)，但是，typeof 在 null 情況下會引起誤解: typeof null 結果為 object
null 和 undefined 在某種程度上是等價的，但null 表示一個丟失的物件，而 undefined 表示未初始化狀態
盡可能避免回傳 null 或將變數設定為 null，因為這種做法會導致 null 值的擴展和需要對 null 的驗證，相反，嘗試使用具有默認屬性的物件，或者甚至拋出錯誤會是更好的實踐
你會使用什么方法來檢查 null?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/506056.html
標籤：其他