如何使用JavaScript檢查物件是否為空?


在JavaScript中,物件是最重要的資料型別,我們在使用JavaScript框架開發應用程式時經常需要用到它。有時,我們需要檢查物件是否為空,並根據物件的值執行操作。

例如,您正在從資料庫中提取資料;如果找不到資料,您可能會得到一個空物件。當您對空物件執行某些操作或執行某些方法時,程式中會引發錯誤。因此,最好先檢查物件是否為空。

我們將學習三種使用JavaScript檢查物件是否為空的方法。

使用Object.keys()方法

我們可以使用Object.keys()方法將物件的鍵獲取到單個數組中。之後,我們可以使用陣列的length屬性檢查陣列的長度。如果鍵陣列的長度為0,則表示物件不包含任何鍵,物件為空。

語法

使用者可以按照以下語法使用Object.keys()方法檢查物件是否為空。

let obj1Len = Object.keys(obj1).length;
if (obj1Len == 0) {
   
   // object is empty
} else {
   
   // object is not empty
} 

在上面的語法中,Object.keys()返回obj1的所有鍵的陣列,我們使用length屬性獲取其長度。使用上述語法,我們可以使用Object.keys()方法獲取所有鍵的陣列,也可以使用length屬性檢查陣列的長度。

示例

在下面的示例中,我們建立了兩個不同的物件。obj1包含一些屬性,而obj2為空,不包含任何屬性。

之後,我們對這兩個物件都使用了Object.keys()方法來獲取鍵的陣列,並檢查陣列的長度以確保物件為空或至少包含一個屬性。

<html>
<body>
   <h3>Using the<i> object.keys() </i>method to check whether the object contains some value or not</h3>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let obj1 = {
         prop1: 10,
         prop2: "Hi",
      };
      let obj2 = {};
      
      // get the array of all keys using the Object.keys() method,
      
      // check the length of the array using the length property
      let obj1Len = Object.keys(obj1).length;
      if (obj1Len != 0) {
         output.innerHTML += "The value of obj1 is " + JSON.stringify(obj1) + "</br>";
      } else {
         output.innerHTML += "The obj1 object is empty! </br>";
      }
      let obj2Len = Object.keys(obj2).length;
      if (obj2Len != 0) {
         output.innerHTML += "The value of obj1 is " + obj2 + "</br>";
      } else {
         output.innerHTML += "The obj2 object is empty! </br>"; 
      }
   </script>
</body>
</html>

使用for-in迴圈

for-in迴圈允許我們迭代物件的鍵。我們可以使用for-in迴圈迭代物件的每個鍵。在這裡,我們將使用for-in迴圈並檢查:如果它對物件進行了一次迭代,則該物件至少包含一個屬性且不為空。

語法

使用者可以按照以下語法使用for-in迴圈檢查物件是否為空。

function isObjectEmpty(object) {
   for (ele in object) {
      
      // object is not empty
      return;
   }
   
   // if control comes here, the object is empty
} 

在上面的語法中,如果for迴圈進行了一次迭代,則表示我們已確保物件至少包含一個屬性。因此,我們在for-in迴圈的第一次迭代後使用return關鍵字終止函式。

示例

在下面的示例中,我們建立了兩個不同的物件。此外,我們建立了isObjectEmpty()函式,該函式根據物件是否為空列印不同的訊息。

我們使用不同的物件呼叫了isObjectEmpty()函式兩次,使用者可以觀察其輸出。

<html>
<body>
   <h3>Using the <i>for-in loop</i> to check whether the object contains some value.</h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      
      // creating the objects
      let obj1 = {
         prop1: false,
      };
      let obj2 = {};
      
      // creating a function to check object is empty or not
      function isObjectEmpty(object) {
         for (ele in object) {
            
            // if any single iteration occurs using a for-in loop, it means the object contains at least one property
            output.innerHTML += "The object " + JSON.stringify(object) + " is not empty! </br>";
            return;
         }
         output.innerHTML += "The object " + JSON.stringify(object) + " is empty! </br>";
      }
      
      // calling the isObjectEmpty() function by passing different objects as an argument
      isObjectEmpty(obj1);
      isObjectEmpty(obj2);
   </script> 
</body>
</html>

使用JSON.stringify()方法

JSON.stringify()方法將我們作為方法引數傳遞的任何值轉換為字串。空物件的語法類似於{},而stringify()方法始終為空物件返回“{}”。

因此,我們可以將stringify()方法的返回值與“{}”進行比較,以確保物件是否為空。

語法

使用者可以按照以下語法使用JSON.stringify()方法檢查物件是否為空。

if(JSON.stringify(education) == "{}") {
   
   // object is empty
} else {
   
   // object is not empty
}

在上面的語法中,如果education物件為空,則JSON.stringify()方法返回“{}”。

示例

在下面的示例中,我們建立了education物件,它包含一些屬性。因此,JSON.stringify()方法不會返回'{}',而是會返回education物件的字串值。因此,使用者可以觀察顯示education物件不為空的輸出。

<html>
<body> 
   <h3> Using the<i> JSON.stringify() method </i> to check whether object contains some value or not.</h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      
      // creating the objects
      let education = {
         totalYears: 12,
         school: "Online",
      };
      
      // convert object to string,
      
      // if object is empty, the JSON.stringify() method will return "{}"
      if (JSON.stringify(education) == "{}") {
         output.innerHTML += "Object is empty!";
      } else {
         output.innerHTML += "Education object is not empty!";
      }
   </script>
</body>
</html>

我們學習了三種檢查物件是否為空的方法。第一種和第三種方法只有一行程式碼;使用者需要寫3到4行程式碼才能使用第二種方法。因此,為了提高程式碼的可讀性,最好使用第一種或第三種方法。

更新於:2023年3月10日

3K+瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告