“這裡是雲端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

你想要生活的那一刻，

生命的火花就已經點亮了。

- 2024.01.26 -

在開發 JavaScript 應用程式時，經常需要檢查對象是否為空。這是因為在處理和操作對象資料時，我們需要確定對象包含有效的值或屬性。

在本文中，我們将讨論如何檢查對象是否為空，其中包括 JavaScript 中檢查對象是否為空的不同方法以及如何檢查對象是否為空、未定義或為 null。

一、什麼情況下需要檢查對象是否為空

以下是一些常見情況，我們需要檢查 JavaScript 對象是否為空：

1.防止空引用錯誤：

當我們嘗試通路或使用一個空對象時，可能會導緻空引用錯誤（如 TypeError: Cannot read property ‘x’ of null）。通過檢查對象是否為空，我們可以避免這些錯誤的發生，并采取相應的處理措施。

2.資料驗證和表單送出：

在表單送出之前，通常需要驗證使用者輸入的資料是否有效。如果對象為空，表示使用者未提供必要的資料或未填寫表單字段，我們可以顯示錯誤消息或阻止表單送出。

3.條件邏輯和流程控制：

根據對象是否為空，可以根據不同的條件邏輯執行不同的操作或采取不同的分支。例如，如果對象為空，可以執行備用的預設操作或傳回預設值。

4.資料處理和轉換：

在處理對象資料之前，可能需要對其進行處理或轉換。如果對象為空，可以提前終止或跳過資料處理邏輯，以避免不必要的計算或錯誤發生。

5.使用者界面互動和顯示：

在使用者界面中，可能需要根據對象的存在與否來顯示或隐藏特定的界面元素、更改樣式或呈現不同的内容。

通過檢查 JavaScript 對象是否為空，可以增加應用程式的健壯性、提升使用者體驗，并避免潛在的錯誤和異常情況。是以，檢查對象是否為空是編寫高品質代碼的重要部分。

下面将分享一些常見的檢查對象是否為空的方法：

二、使用Object.keys()

使用Object.keys()方法可以檢查對象是否為空。Object.keys(obj)傳回一個包含給定對象所有可枚舉屬性的數組。

利用這個特性，我們可以通過檢查傳回的數組長度來确定對象是否為空。如果數組長度為0，則表示對象沒有任何屬性，即為空。

優點：簡單易用，不需要依賴第三方庫。

缺點：無法處理非原始類型的屬性，如函數、undefined 等。

以下是一個示例代碼：

javascriptCopy Codefunction isObjectEmpty(obj) {
  return Object.keys(obj).length === 0;
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，我們定義了一個isObjectEmpty()函數，它接受一個對象作為參數。函數内部使用Object.keys(obj)擷取對象的所有可枚舉屬性，并檢查傳回的數組長度是否為0。根據傳回結果，判斷對象是否為空。

三、使用Object.values()

使用Object.values()方法來檢查對象是否為空，Object.values(obj)方法傳回一個包含給定對象所有可枚舉屬性值的數組。如果傳回的數組長度為0，則表示對象沒有任何屬性值，即為空。

優點：能夠将對象的屬性值組成一個數組，可以通過判斷該數組的長度來判斷對象是否為空。

缺點：無法直接判斷對象是否為空，隻提供了屬性值的數組。

以下是使用Object.values()方法來檢查對象是否為空的示例代碼：

function isObjectEmpty(obj) {
  return Object.values(obj).length === 0;
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，我們定義了一個isObjectEmpty()函數，它接受一個對象作為參數。函數内部使用Object.values(obj)擷取對象的所有可枚舉屬性值，并檢查傳回的數組長度是否為0。根據傳回結果，判斷對象是否為空。

注意，Object.values()方法是ES2017（ES8）引入的新方法，是以在一些舊版本的JavaScript引擎中可能不被支援。在使用之前，請確定你的環境支援該方法或使用适當的polyfill來提供支援。

四、使用 for…in 循環

使用 for…in 循環方法是通過周遊對象的屬性來判斷對象是否為空。

優點：可以處理非原始類型的屬性。

缺點：代碼較為冗長，需要手動判斷每個屬性是否為對象自身屬性。

以下是一個示例代碼：

javascriptCopy Codefunction isObjectEmpty(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false; // 隻要有一個屬性存在，就傳回false表示不為空
    }
  }
  return true; // 如果周遊完所有屬性後仍然沒有傳回false，表示對象為空
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，isObjectEmpty()函數接受一個對象作為參數。函數内部使用 for…in 循環周遊對象的屬性，如果發現任何屬性，則傳回false表示對象不為空；如果循環結束後仍然沒有傳回false，則表示對象為空，并傳回true。

雖然使用 for…in 循環可以達到同樣的目的，但相比起使用 Object.keys() 或 Object.values() 方法，它的實作稍顯繁瑣。是以，通常情況下，推薦使用 Object.keys() 或 Object.values() 方法來檢查對象是否為空，因為它們提供了更簡潔和直覺的方式。

五、使用 Object.entries()

Object.entries()方法傳回一個給定對象自身可枚舉屬性的鍵值對數組。如果傳回的數組長度為0，則表示對象沒有任何屬性，即為空。

優點：能夠将對象的鍵值對組成一個數組，可以通過判斷該數組的長度來判斷對象是否為空。

缺點：同樣無法直接判斷對象是否為空，隻提供了鍵值對數組。

以下是使用Object.entries()方法來檢查對象是否為空的示例代碼：

function isObjectEmpty(obj) {
  return Object.entries(obj).length === 0;
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，isObjectEmpty()函數接受一個對象作為參數。函數内部使用Object.entries(obj)擷取對象的鍵值對數組，并檢查傳回的數組長度是否為0。如果數組長度為0，則表示對象沒有任何屬性，即為空。

六、使用 JSON.stringify()

使用 JSON.stringify() 方法來檢查對象是否為空的方法是将對象轉換為 JSON 字元串，然後檢查字元串的長度是否為 2。當對象為空時，轉換後的字元串為 “{}”，長度為 2。如果對象不為空，則轉換後的字元串長度會大于 2。

優點：可以處理非原始類型的屬性，并且轉換後的字元串長度為 2 表示對象為空。

缺點：當對象包含循環引用時，将抛出異常。

以下是使用 JSON.stringify() 方法來檢查對象是否為空的示例代碼：

function isObjectEmpty(obj) {
  return JSON.stringify(obj) === "{}";
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(isObjectEmpty(obj2)); // false

在上述示例中，isObjectEmpty() 函數接受一個對象作為參數。函數内部使用 JSON.stringify(obj) 将對象轉換為 JSON 字元串，然後将轉換後的字元串與 “{}” 進行比較。如果相等，則表示對象為空。

需要注意的是，這種方式隻适用于純粹的對象，并且不包含任何非原始類型屬性（如函數、undefined 等）。如果對象中包含了非原始類型的屬性，那麼轉換後的 JSON 字元串可能不為空，即使對象實際上是空的。

在這裡給大家分享一下【雲端源想】學習平台，無論你是初學者還是有經驗的開發者，這裡都有你需要的一切。包含課程視訊、知識庫、微實戰、雲實驗室、一對一咨詢等等，現在功能全部是免費的，點選這裡，立即開始你的學習之旅！雲端源想

七、Object.getOwnPropertyNames()

在ES6中，你可以使用Object.getOwnPropertyNames()方法來檢查對象是否為空，但需要注意的是，該方法傳回一個數組，其包含給定對象中所有自有屬性（包括不可枚舉屬性，但不包括使用 symbol 值作為名稱的屬性）。

優點：能夠傳回對象自身的所有屬性名組成的數組，包括可枚舉和不可枚舉的屬性，可以通過判斷該數組的長度來判斷對象是否為空。

缺點：同樣無法直接判斷對象是否為空，隻提供了屬性名數組。

以下是使用Object.getOwnPropertyNames()方法來檢查對象是否為空的示例代碼：

function isObjectEmpty(obj) {
  return Object.getOwnPropertyNames(obj).length === 0;
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，isObjectEmpty()函數接受一個對象作為參數。函數内部使用Object.getOwnPropertyNames(obj)擷取對象的所有屬性名，并檢查傳回的數組長度是否為0。如果數組長度為0，則表示對象沒有任何屬性，即為空。

注意，Object.getOwnPropertyNames()方法傳回的數組隻包含對象自身的屬性，不包括繼承的屬性。如果你需要檢查繼承的屬性，請使用for…in循環或其他方法。

同樣，Object.getOwnPropertyNames()方法在ES5中引入，是以在一些舊版本的JavaScript引擎中可能不被支援。

八、Object.getOwnPropertySymbols()

在ES6中，可以使用Object.getOwnPropertySymbols()方法來檢查對象是否為空。該方法傳回一個數組，其中包含了給定對象自身的所有符号屬性。

優點：能夠傳回對象自身的所有 Symbol 類型的屬性組成的數組，可以通過判斷該數組的長度來判斷對象是否為空。

缺點：僅針對 Symbol 類型的屬性，無法判斷其他類型的屬性是否為空。

以下是使用Object.getOwnPropertySymbols()方法來檢查對象是否為空的示例代碼：

function isObjectEmpty(obj) {
  const symbols = Object.getOwnPropertySymbols(obj);
  const hasSymbols = symbols.length > 0;
  return !hasSymbols;
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const symbol = Symbol("key");
const obj2 = { [symbol]: "value" };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，isObjectEmpty()函數接受一個對象作為參數。函數内部使用Object.getOwnPropertySymbols(obj)擷取對象的所有符号屬性，并将它們存儲在symbols數組中。

然後，通過檢查symbols數組的長度是否大于0來判斷對象是否具有符号屬性。如果symbols數組的長度為0，則表示對象沒有任何符号屬性，即為空。

注意，Object.getOwnPropertySymbols()方法隻傳回對象自身的符号屬性，不包括其他類型的屬性，例如字元串屬性。

如果你想同時檢查對象的字元串屬性和符号屬性，可以結合使用Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()方法。

九、ES6使用Reflect.ownKeys()

在ES6中，你可以使用Reflect.ownKeys()方法來檢查對象是否為空。Reflect.ownKeys()傳回一個包含了指定對象自身所有屬性（包括字元串鍵和符号鍵）的數組。

優點：能夠傳回對象自身的所有屬性（包括字元串鍵和 Symbol 鍵）組成的數組，包括可枚舉和不可枚舉的屬性，可以通過判斷該數組的長度來判斷對象是否為空。

缺點：同樣無法直接判斷對象是否為空，隻提供了所有鍵的數組。

以下是使用Reflect.ownKeys()方法來檢查對象是否為空的示例代碼：

function isObjectEmpty(obj) {
  return Reflect.ownKeys(obj).length === 0;
}

// 測試對象是否為空
const obj1 = {};
console.log(isObjectEmpty(obj1)); // true

const symbol = Symbol("key");
const obj2 = { [symbol]: "value" };
console.log(isObjectEmpty(obj2)); // false

在上面的示例中，isObjectEmpty()函數接受一個對象作為參數。函數内部使用Reflect.ownKeys(obj)擷取對象的所有自身屬性名（包括字元串鍵和符号鍵），并檢查傳回的數組長度是否為0。如果數組長度為0，則表示對象沒有任何屬性，即為空。

Reflect.ownKeys()方法提供了一種統一的方式來擷取對象的所有鍵，包括字元串鍵和符号鍵。是以，使用Reflect.ownKeys()方法可以更全面地檢查對象是否為空。

十、使用lodash庫的isEmpty()函數

如果您使用了lodash庫，可以使用其提供的isEmpty()函數來直接判斷對象是否為空。

優點：可以處理各種情況，包括非原始類型的屬性、數組、字元串等。

缺點：需要依賴第三方庫。

以下是使用 Lodash 的 isEmpty() 函數進行對象空檢查的示例代碼：

// 導入Lodash庫
const _ = require('lodash');

// 檢查對象是否為空
const obj1 = {};
console.log(_.isEmpty(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log(_.isEmpty(obj2)); // false

在上述示例中，_.isEmpty() 函數接受一個對象作為參數，并傳回一個布爾值表示對象是否為空。如果對象為空，則傳回 true；否則傳回 false。

使用 Lodash 的 isEmpty() 函數可以更友善地進行對象空檢查，同時處理了各種情況，包括非原始類型的屬性、數組、字元串等。

十一、使用jQuery庫的$.isEmptyObject()函數

要使用 jQuery 庫中的 $.isEmptyObject() 函數來檢查 JavaScript 對象是否為空，首先確定已經安裝了 jQuery 庫，并将其導入到你的項目中。

優點：可以處理各種情況，包括非原始類型的屬性、數組、字元串等。

缺點：需要依賴第三方庫。

以下是使用 jQuery 的 $.isEmptyObject() 函數進行對象空檢查的示例代碼：

// 導入jQuery庫
const $ = require('jquery');

// 檢查對象是否為空
const obj1 = {};
console.log($.isEmptyObject(obj1)); // true

const obj2 = { name: "John", age: 25 };
console.log($.isEmptyObject(obj2)); // false

在上述示例中，$.isEmptyObject() 函數接受一個對象作為參數，并傳回一個布爾值表示對象是否為空。如果對象為空，則傳回 true；否則傳回 false。

使用 jQuery 的 $.isEmptyObject() 函數可以更友善地進行對象空檢查，同時處理了各種情況，包括非原始類型的屬性、數組、字元串等。

十二、檢查對象是否為空、未定義或為 null

要同時檢查對象是否為空、未定義或為 null，你可以使用以下函數來進行判斷：

function isObjectEmptyOrNull(obj) {
  return obj === undefined || obj === null || Object.getOwnPropertyNames(obj).length === 0;
}

在上述代碼中，isObjectEmptyOrNull函數接收一個對象作為參數。它首先檢查對象是否為 undefined 或者 null，如果是，則直接傳回 true 表示對象為空或者未定義。

如果對象不是 undefined 或者 null，則使用 Object.getOwnPropertyNames() 方法擷取對象的所有自身屬性名，然後判斷屬性名數組的長度是否為 0。如果屬性名數組長度為 0，則表示對象沒有任何屬性，即為空。

下面是一個示例用法：

const obj1 = {};
console.log(isObjectEmptyOrNull(obj1)); // true

const obj2 = null;
console.log(isObjectEmptyOrNull(obj2)); // true

const obj3 = { name: "John", age: 25 };
console.log(isObjectEmptyOrNull(obj3)); // false

const obj4 = undefined;
console.log(isObjectEmptyOrNull(obj4)); // true

總體來說，這些方法都提供了一種間接判斷對象是否為空的方式，即通過擷取對象的屬性、屬性值或鍵值對的數組，并判斷該數組的長度。

然而，它們并不能直接告訴我們對象是否為空，因為它們隻提供了屬性、屬性值或鍵值對的資訊。是以，在使用這些方法判斷對象是否為空時，需要結合其他判斷條件來綜合考慮。

我們下期再見！

END

文案編輯|雲端學長

文案配圖|雲端學長

内容由：雲端源想分享

【幹貨】一文掌握JavaScript檢查對象空值的N種技巧！

一、什麼情況下需要檢查對象是否為空

二、使用Object.keys()

三、使用Object.values()

四、使用 for…in 循環

五、使用 Object.entries()

六、使用 JSON.stringify()

七、Object.getOwnPropertyNames()

八、Object.getOwnPropertySymbols()

九、ES6使用Reflect.ownKeys()

十、使用lodash庫的isEmpty()函數

十一、使用jQuery庫的$.isEmptyObject()函數

十二、檢查對象是否為空、未定義或為 null

繼續閱讀

幹貨分享！新版危廢暫存場所設定規範

幹貨推薦丨SOLIDWORKS十條實用技巧

可進入腦脊液的抗菌藥物彙總（幹貨）！

奇經八脈之生理功能，幹貨分享！

辦公室白領實用幹貨，Excel快捷鍵大全

刻在基因裡的松馳感，穿搭幹貨喝技巧，慵懶感不費了穿搭！

解讀18個計算機專業的就業前景！幹貨必收藏

轉載--幹貨-壓縮空氣系統知識大全

代理資訊怎麼寫？30分鐘的講座充滿“幹貨資訊”

除了大盤雞，你還知道雞肉的哪些做法，這8道好用幹貨一定要學會

家裡有綠豆的要注意了，幸虧幹貨店老闆告知，我也剛知道，真實用

#女性智慧#女生必看#幹貨分享#認知#提升自己

每天不是在趕稿，就是在趕稿的路上#原創#寫作#幹貨分享#創業日記#文案

機動車交通事故糾紛傷情鑒定指引#普法# #幹貨分享#

今天沒有什麼幹貨，主要教大家如何摸魚？（職場必備AI工具分享）

觀夏是如何做營銷的？附2024觀夏品牌手冊-廣告人幹貨庫