天天看點

2種檢查JavaScript數組是否為空的方法

2種檢查JavaScript數組是否為空的方法

方法一:使用Array.isArray()方法和array.length屬性

可以通過array.isarray()方法檢查該數組是否确實是一個數組。如果作為參數傳遞的對象是數組,則此方法傳回true。它還檢查數組是否為“undefined”或為“null”。

使用array.length屬性檢查數組是否為空;此屬性傳回數組中的元素數量。如果這個數大于0,它的值為true。

數組的isArray()方法和length屬性可與(&&)操作符一起使用,以确定數組是否存在且是否為空。

文法:

Array.isArray(emptyArray) && emptyArray.length      

例:​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>檢查數組是否為空或存在</title>
  </head>
  <body>
    <b>檢查數組是否為空或存在</b> 
    <p>emptyArray = []</p>
    <p>nonExistantArray = undefined</p>
    <p>fineArray = [1, 2, 3, 4, 5]</p>
    <p>單擊按鈕,檢查數組是否存在且不為空</p>
    <button onclick="checkArray()">檢查數組</button>
    <p>
      數組emptyArray是否為空或存在:
      <span></span>
    </p>
    <p>
      數組nonExistantArray是否為空或存在:
      <span></span>
    </p>
    <p>
      數組fineArray是否為空或存在:
      <span></span>
    </p>
    <script type="text/JavaScript">
      function checkArray() {
        let emptyArray = [];
        let nonExistantArray = undefined;
        let fineArray = [1, 2, 3, 4, 5];


        if(Array.isArray(emptyArray) && emptyArray.length)
          output = true;
        else
          output = false;


        document.querySelector('.output-empty').textContent = output;


        if(Array.isArray(nonExistantArray) && nonExistantArray.length)
          output = true;
        else
          output = false;


        document.querySelector('.output-non').textContent = output;


        if(Array.isArray(fineArray) && fineArray.length)
          output = true;
        else
          output = false;


        document.querySelector('.output-ok').textContent = output;
      }
</script>
  </body>


</html>      

方法二:使用typeof運算符和array.length

通過使用typeof運算符檢查數組的類型是否為“undefined”,數組是否為'null',來檢查數組是否存在。

通過使用array.length屬性,可以檢查數組是否為空;通過檢查傳回的長度是否大于0,可以確定數組不為空。

然後,可以将這些屬性與(&&)運算符一起使用,以确定數組是否存在且不為空。

例:​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>檢查數組是否為空或存在</title>
  </head>
  <body>
    <b>檢查數組是否為空或存在</b>
    
    <p>emptyArray = []</p>
    <p>nonExistantArray = undefined</p>
    <p>fineArray = [1, 2, 3, 4, 5]</p>
    <p>單擊按鈕,檢查數組是否存在且不為空</p>
    <button onclick="checkArray()">檢查數組</button>
    <p>
      數組emptyArray是否為空或存在:
      <span></span>
    </p>


    <p>
      數組nonExistantArray是否為空或存在:
      <span></span>
    </p>


    <p>
      數組fineArray是否為空或存在:
      <span></span>
    </p>


    


    <script type="text/JavaScript">
      function checkArray() { 
            let emptyArray = []; 
            let nonExistantArray = undefined; 
            let fineArray = [1, 2, 3, 4, 5]; 
  
            if (typeof emptyArray != "undefined"  
                        && emptyArray != null  
                        && emptyArray.length != null  
                        && emptyArray.length > 0) 
                output = true; 
            else 
                output = false; 
  
            document.querySelector('.output-empty').textContent 
                    = output; 
  
            if (typeof nonExistantArray != "undefined"  
                        && nonExistantArray != null  
                        && nonExistantArray.length != null  
                        && nonExistantArray.length > 0) 
                output = true; 
            else 
                output = false; 
  
            document.querySelector('.output-non').textContent 
                    = output; 
  
            if (typeof fineArray != "undefined"  
                        && fineArray != null  
                        && fineArray.length != null  
                        && fineArray.length > 0) 
                output = true; 
            else 
                output = false; 
  
            document.querySelector('.output-ok').textContent 
                    = output; 
        } 
</script>
  </body>


</html>      

本文完~