2种检查JavaScript数组是否为空的方法

最新推荐文章于 2024-07-03 00:30:00 发布

web前端开发V

最新推荐文章于 2024-07-03 00:30:00 发布

阅读量1w

点赞数 2

文章标签： js javascript html java css

本文介绍了两种JavaScript中检查数组是否存在且不为空的方法。方法一是结合Array.isArray()和array.length属性，方法二是使用typeof运算符和array.length。通过示例代码详细解释了这两种方法的实现，并展示了在HTML环境中如何应用这些方法进行检查。

摘要由CSDN通过智能技术生成

方法一：使用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>

本文完~