JavaScript中關於null的一切

做者：Dmitri Pavluti
譯者：前端小智
來源：dmitripavlutin

本文已通過做者@Dmitri Pavluti受權翻譯

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

送 5 本書，祝你們好運！

JavaScript有2種類型：基本類型（string, booleans number, symbol）和對象。

對象是複雜的數據結構，JS 中最簡單的對象是普通對象：一組鍵和關聯值：

let myObject = {
  name: '前端小智'
}

可是在某些狀況下沒法建立對象。 在這種狀況下，JS 提供一個特殊值null —表示缺乏對象。

let myObject = null

在本文中，咱們將瞭解到有關JavaScript中null的全部知識：它的含義，如何檢測它，null與undefined之間的區別以及爲何使用null形成代碼維護困難。

1. null的概念

JS 規範說明了有關null的信息：

值 null 特指對象的值未設置，它是 JS 基本類型 之一，在布爾運算中被認爲是 falsy。

例如，函數greetObject()建立對象，可是在沒法建立對象時也能夠返回null：

function greetObject(who) {
  if (!who) {
    return null;
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => null

可是，在不帶參數的狀況下調用函數greetObject() 時，該函數返回null。 返回null是合理的，由於who參數沒有值。

2. 如何檢查null

檢查null值的好方法是使用嚴格相等運算符：

const missingObject = null;
const existingObject = { message: 'Hello!' };

missingObject  === null; // => true
existingObject === null; // => false

missingObject === null的結果爲true，由於missingObject變量包含一個null 值。

若是變量包含非空值（例如對象），則表達式existObject === null的計算結果爲false。

2.1 null 是虛值

null與false、0、''、undefined、NaN都是虛值。若是在條件語句中遇到虛值，那麼 JS 將把虛值強制爲false。

Boolean(null); // => false

if (null) {
  console.log('null is truthy')
} else {
  console.log('null is falsy')
}

2.2 typeof null

typeof value運算符肯定值的類型。 例如，typeof 15是'number'，typeof {prop：'Value'}的計算結果是'object'。

有趣的是，type null的結果是什麼

typeof null; // => 'object'

爲何是'object'，typoef null爲object是早期 JS 實現中的一個錯誤。

要使用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中提取屬性，JS 會拋出一個錯誤。

再次使用greetObject() 函數，並嘗試從返回的對象訪問message屬性：

let who = '';

greetObject(who).message; 
// throws "TypeError: greetObject() is null"

由於who變量是一個空字符串，因此該函數返回null。 從null訪問message屬性時，將引起TypeError錯誤。

能夠經過使用帶有空值合併的可選連接來處理null:

let who = ''

greetObject(who)?.message ?? 'Hello, Stranger!'
// => 'Hello, Stranger!'

4. null 的替代方法

當沒法構造對象時，咱們一般的作法是返回null，可是這種作法有缺點。在執行堆棧中出現null時，剛必須進行檢查。

嘗試避免返回 null 的作法：

• 返回默認對象而不是null
• 拋出錯誤而不是返回null

回到開始返回greeting對象的greetObject()函數。缺乏參數時，能夠返回一個默認對象，而不是返回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 == null;
}

isEmpty(42);                // => false
isEmpty({ prop: 'Value' }); // => false
isEmpty(null);              // => true
isEmpty(undefined);         // => true

6. 總結

null是JavaScript中的一個特殊值，表示丟失的對象，嚴格相等運算符肯定變量是否爲空:variable === null。

typoef運算符對於肯定變量的類型（number, string, boolean）頗有用。 可是，若是爲null，則typeof會產生誤導：typeof null的值爲'object'。

null和undefined在某種程度上是等價的，但null表示缺乏對象，而undefined未初始化狀態。

---

原文：https://dmitripavlutin.com/ja...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。