全面解析JavaScript中null

這篇文章為大家帶來了關於javascript的相關知識，null是一種原始類型，表示有意不包含任何物件值，下面就來看一下JavaScript 中的null 的一切:它的意義，如何檢測它，null 和undefined 之間的區別，以及為什麼大量使用null 會造成程式碼維護困難等，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##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 == 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?

【相关推荐：javascript视频教程、web前端】

以上是全面解析JavaScript中null的詳細內容。更多資訊請關注PHP中文網其他相關文章！