JavaScript中關(guān)于null的一切
本文已經(jīng)作者@Dmitri Pavluti授權(quán)翻譯
JavaScript有2種類型：基本類型(string, booleans number, symbol)和對(duì)象。
對(duì)象是復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，JS 中最簡(jiǎn)單的對(duì)象是普通對(duì)象：一組鍵和關(guān)聯(lián)值：
- let myObject = {
- name: '前端小智'
- }
但是在某些情況下無法創(chuàng)建對(duì)象。 在這種情況下，JS 提供一個(gè)特殊值null —表示缺少對(duì)象。
- let myObject = null
在本文中，我們將了解到有關(guān)JavaScript中null的所有知識(shí)：它的含義，如何檢測(cè)它，null與undefined之間的區(qū)別以及為什么使用null造成代碼維護(hù)困難。
1. null的概念
JS 規(guī)范說明了有關(guān)null的信息：
值 null 特指對(duì)象的值未設(shè)置，它是 JS 基本類型 之一，在布爾運(yùn)算中被認(rèn)為是falsy。
例如，函數(shù)greetObject()創(chuàng)建對(duì)象，但是在無法創(chuàng)建對(duì)象時(shí)也可以返回null：
- function greetObject(who) {
- if (!who) {
- return null;
- }
- return { message: `Hello, ${who}!` };
- }
- greetObject('Eric'); // => { message: 'Hello, Eric!' }
- greetObject(); // => null
但是，在不帶參數(shù)的情況下調(diào)用函數(shù)greetObject()時(shí)，該函數(shù)返回null。 返回null是合理的，因?yàn)閣ho參數(shù)沒有值。
2. 如何檢查null
檢查null值的好方法是使用嚴(yán)格相等運(yùn)算符：
- const missingObject = null;
- const existingObject = { message: 'Hello!' };
- missingObject === null; // => true
- existingObject === null; // => false
missingObject === null的結(jié)果為true，因?yàn)閙issingObject變量包含一個(gè)null 值。
如果變量包含非空值(例如對(duì)象)，則表達(dá)式existObject === null的計(jì)算結(jié)果為false。
2.1 null 是虛值
null與false、0、''、undefined、NaN都是虛值。如果在條件語(yǔ)句中遇到虛值，那么 JS 將把虛值強(qiáng)制為false。
- Boolean(null); // => false
- if (null) {
- console.log('null is truthy')
- } else {
- console.log('null is falsy')
- }
2.2 typeof null
typeof value運(yùn)算符確定值的類型。 例如，typeof 15是'number'，typeof {prop：'Value'}的計(jì)算結(jié)果是'object'。
有趣的是，type null的結(jié)果是什么
- typeof null; // => 'object'
為什么是'object'，typoef null為object是早期 JS 實(shí)現(xiàn)中的一個(gè)錯(cuò)誤。
要使用typeof運(yùn)算符檢測(cè)null值。 如前所述，使用嚴(yán)格等于運(yùn)算符myVar === null。
如果我們想使用typeof運(yùn)算符檢查變量是否是對(duì)象，還需要排除null值：
- function isObject(object) {
- return typeof object === 'object' && object !== null;
- }
- isObject({ prop: 'Value' }); // => true
- isObject(15); // => false
- isObject(null); // => false
3. null 的陷阱
null經(jīng)常會(huì)在我們認(rèn)為該變量是對(duì)象的情況下意外出現(xiàn)。然后，如果從null中提取屬性，JS 會(huì)拋出一個(gè)錯(cuò)誤。
再次使用greetObject()函數(shù)，并嘗試從返回的對(duì)象訪問message屬性：
- let who = '';
- greetObject(who).message;
- // throws "TypeError: greetObject() is null"
因?yàn)閣ho變量是一個(gè)空字符串，所以該函數(shù)返回null。 從null訪問message屬性時(shí)，將引發(fā)TypeError錯(cuò)誤。
可以通過使用帶有空值合并的可選鏈接來處理null:
- let who = ''
- greetObject(who)?.message ?? 'Hello, Stranger!'
- // => 'Hello, Stranger!'
4. null 的替代方法
當(dāng)無法構(gòu)造對(duì)象時(shí)，我們通常的做法是返回null，但是這種做法有缺點(diǎn)。在執(zhí)行堆棧中出現(xiàn)null時(shí)，剛必須進(jìn)行檢查。
嘗試避免返回 null 的做法：
- 返回默認(rèn)對(duì)象而不是null
- 拋出錯(cuò)誤而不是返回null
回到開始返回greeting對(duì)象的greetObject()函數(shù)。缺少參數(shù)時(shí)，可以返回一個(gè)默認(rèn)對(duì)象，而不是返回null：
- function greetObject(who) {
- if (!who) {
- who = 'Stranger';
- }
- return { message: `Hello, ${who}!` };
- }
- greetObject('Eric'); // => { message: 'Hello, Eric!' }
- greetObject(); // => { message: 'Hello, Stranger!' }
或者拋出一個(gè)錯(cuò)誤：
- 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是未初始化的變量或?qū)ο髮傩缘闹?，undefined是未初始化的變量或?qū)ο髮傩缘闹怠?/p>
- let myVariable;
- myVariable; // => undefined
null和undefined之間的主要區(qū)別是，null表示丟失的對(duì)象，而undefined表示未初始化的狀態(tài)。
嚴(yán)格的相等運(yùn)算符===區(qū)分null和undefined :
- null === undefined // => false
而雙等運(yùn)算符==則認(rèn)為null和undefined 相等
- null == undefined // => true
我使用雙等相等運(yùn)算符檢查變量是否為null 或undefined:
- function isEmpty(value) {
- return value == null;
- }
- isEmpty(42); // => false
- isEmpty({ prop: 'Value' }); // => false
- isEmpty(null); // => true
- isEmpty(undefined); // => true
6. 總結(jié)
null是JavaScript中的一個(gè)特殊值，表示丟失的對(duì)象，嚴(yán)格相等運(yùn)算符確定變量是否為空:variable === null。
typoef運(yùn)算符對(duì)于確定變量的類型(number, string, boolean)很有用。 但是，如果為null，則typeof會(huì)產(chǎn)生誤導(dǎo)：typeof null的值為'object'。
null和undefined在某種程度上是等價(jià)的，但null表示缺少對(duì)象，而undefined未初始化狀態(tài)。
作者：Dmitri Pavluti 譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/javascript-null/#comments
本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。
