JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript:檢查變量是否未定義或為空

簡介

undefinednull 值一直潛入代碼流。無論我們是因為副作用而丟失了引用,忘記將引用變量分配給內存中的對象,還是我們從另一個資源、數據庫或 API 獲得空響應 - 我們都必須處理 undefinednull 一直以來的價值觀。

undefined之間的區別 和 null

undefinednull 變量通常是齊頭並進的,有些變量可以互換使用。不過,它們之間還是有區別的:

  • 未定義 是一個變量,它引用了不存在的東西,並且該變量沒有被定義為任何東西。
  • 是一個定義的變量 但缺少一個值。

兩者的區別或許通過代碼能更清楚一點:

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

a 是未定義的——它沒有分配給任何東西,也沒有明確的定義來說明它到底是什麼。 b定義 作為 空值 .

是否b 直接定義為 null 或定義為函數的返回值(結果只是返回一個 null 值)無關緊要 - 它是定義的 作為某物 .

另一方面,a 從字面上看是什麼都沒有 .沒有完成任何任務,完全不清楚它應該或可能是什麼。

在實踐中,大多數 nullundefined 值源於編程過程中的人為錯誤,在大多數情況下,這兩者是一起出現的。在檢查一個時 - 我們通常也會檢查另一個。

檢查變量是否為未定義null

檢查變量是否為 undefined 時,您可以選擇兩種方法 或 null 在原生 JavaScript 中。

==和 ===運算符

Loose Equality Operator 之間存在差異 (== ) 和 嚴格等式運算符 (=== ) 在 JavaScript 中。鬆散的平等可能 導致意想不到的結果,並且在這種情況下的行為與嚴格相等運算符不同:

console.log(null == undefined);  // true
console.log(null === undefined); // false

注意: 這不應被視為證明nullundefined 是相同的。 鬆散相等運算符 使用真/假值的“口語”定義。 0 , ""[] 被評估為 false 因為它們表示缺少數據,即使它們實際上並不等於布爾值。

話雖這麼說 - 因為鬆散相等運算符處理 nullundefined 同樣 - 您可以將其用作 速記 檢查兩者的版本:

// Undefined variable
let a;

if (a == null) {
  console.log('Null or undefined value!');
} else {
  console.log(a);
}

這將檢查是否 anullundefined .從 aundefined ,這導致:

Null or undefined value!

雖然,我們真的不知道其中哪一個是它。如果我們使用嚴格的操作符,它會檢查 anull ,如果遇到 undefined,我們會感到非常意外 console.log() 中的值 聲明:

let a;

if (a === null) {
  console.log('Null or undefined value!');
} else {
  console.log(a); // undefined
}

a 真的不是 null ,但它 undefined .在這種情況下,我們希望單獨檢查它們,但可以靈活地了解流的真正原因:

let a;

if (a === null || a === undefined) { // true
  console.log('Null or undefined value!');
} else {
  console.log(a);
}

在這裡,我們將它們與異或組合在一起 - 儘管您也可以將它們分開以進行不同的恢復操作:

let a;

if (a === null) {
  console.log('Null value!');
} else if (a === undefined) { // true
  console.log('Undefined value!');
}

注意: 值得注意的是,如果引用不存在,則 ReferenceError 將被拋出。這可以通過使用 typeof 來避免 運算符,儘管從代碼設計的角度來看,它可能不是最佳選擇。如果您使用的是不存在的 引用變量 - 通過使用 typeof 默默地忽略該問題 可能會導致靜默失敗。

typeof 運算符

typeof 運算符還可以與 === 一起使用 運算符檢查變量的類型是否等於 'undefined''null'

let a;

if (typeof a === 'undefined') {
    console.log('Undefined variable');
} else if (typeof a === 'null') {
    console.log('Null-value');
}

這導致:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

Undefined variable

然而,值得注意的是,如果你插入一個 不存在的 參考變量 - typeof 很樂意使用它,將其視為 undefined

if (typeof someVar === 'undefined') {
    console.log('Undefined variable');
} else if (typeof someVar === 'null') {
    console.log('Null-value');
}

此代碼還導致:

Undefined variable

從技術上講,some_var 一個未定義的變量,因為它沒有賦值。另一方面,這可以使 typeof 默默地失敗並發出信號,傳入 value 可能有問題,而不是引發錯誤以表明您正在處理一個不存在的變量。

例如 - 假設你打錯字了,不小心輸入了 somevariable 而不是 someVariableif 子句:

let someVariable = 'Hello!'

if (typeof somevariable === 'undefined') {
    console.log('Undefined variable');
} else if (typeof somevariable === 'null') {
    console.log('Null-value');
} else {
    console.log(somevariable);
}

在這裡,我們試圖檢查 someVariablenullundefined ,但事實並非如此。但是,由於拼寫錯誤,somevariable 而是檢查,結果是:

Undefined variable

在更複雜的情況下 - 發現這個錯字可能比這個更難。我們經歷了一次無聲的失敗,可能會花時間在錯誤的線索上。另一方面,只使用 ===== 這裡的操作符會提醒我們不存在的引用變量:

let someVariable = 'Hello!'

if (somevariable === 'undefined') {
    console.log('Undefined variable');
} else if (somevariable === 'null') {
    console.log('Null-value');
} else {
    console.log(somevariable);
}

此代碼導致:

error: Uncaught ReferenceError: somevariable is not defined

注意: 這並不是說 typeof 本質上是一個糟糕的選擇 - 但它也確實包含這種含義。

使用 Lodash 檢查變量是否為 null , 未定義

最後 - 您可以選擇除了內置運算符之外的外部庫。雖然導入外部庫是不合理的只是 執行此檢查 - 在這種情況下,您最好只使用運算符。

然而,Lodash 已經存在於許多項目中——它是一個廣泛使用的庫,當它已經存在時,使用它提供的幾種方法不會降低效率。最值得注意的是,Lodash 提供了幾種有用的方法來檢查變量是否為 null , 未定義 .

安裝和導入 Lodash

您可以通過 CDN 導入 Lodash:

https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js

.js 本地導入 文件:

<script src="lodash.js"></script>

或者通過 NPM 安裝:

$ npm install lodash

此外,它可以作為 ES6 模塊導入或通過 require() 導入 語法:

import _ from 'lodash';
// OR
const _ = require('lodash');

注意: 將 Lodash 實例命名為 _ 是慣例 ,雖然名稱暗示了,但您不必這樣做。

現在,我們可以使用該庫來檢查變量是否為 null , undefined - 指前兩種煩惱。它可以作為檢查兩者的簡寫版本:

let a = null;

console.log(_.isNull(a));       // true
console.log(_.isUndefined(a));  // false
console.log(_.isNil(a));        // true

結論

在這個簡短的指南中,我們了解瞭如何檢查變量是否為 null、未定義或 nil 在 JavaScript 中,使用 == , ===typeof 操作員,注意每種方法的優缺點。最後,我們快速了解瞭如何使用 Lodash - 一個流行的便利實用程序庫來執行相同的檢查。


Tutorial JavaScript 教程
  1. 我制定了冠狀病毒傳播時間表

  2. 每個 Web 開發人員都應該知道的 JavaScript 區域設置感知日期時間格式

  3. 表單故事 - 驗證

  4. 如何在 JavaScript 中遍歷任意深度的對象

  5. 如何使用畫布元素為月亮設置動畫

  6. 根據內容調整 iframe 的大小

  7. 2022 年最佳 JavaScript UI 組件庫

  1. Javascript - 如何刪除單詞之間的所有額外間距

  2. 顯示帶有動畫的隱藏 div

  3. 如何在狀態變量中添加所有過濾元素

  4. WEBPACK(非常)初學者指南

  5. 檢測不支持 HTML5 <canvas> 的最佳方法

  6. 啟動 deepwork.today

  7. 調用堆棧是什麼?

  1. useDocumentation - useState 回調

  2. 滾動框陰影 :) - VueJS 滾動事件以獲取頁面的位置。

  3. 看看 Node.js 中的實驗特性

  4. 測試記錄