JavaScript中null的介紹以及用法是怎樣的

本篇文章給大家分享的是有關JavaScript中null的介紹以及用法是怎樣的，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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未初始化狀態。

以上就是JavaScript中null的介紹以及用法是怎樣的，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。