技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

在JS中檢查數(shù)組是否存在或為空的兩種方法[示例]

作者:admin    時間:2022-6-1 17:9:5    瀏覽:

在 JavaScript 中檢查數(shù)組是否存在或為空,本文將通過兩種方法來進行介紹,每種方法都有詳細示例演示。

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

可以通過 Array.isArray() 方法檢查數(shù)組是否真的是一個數(shù)組,是否存在。如果作為參數(shù)傳遞的 Object 是數(shù)組,則此方法返回 true。如果數(shù)組未定義或為空,它還會檢查大小寫。

可以使用 array.length 屬性檢查數(shù)組是否為空。此屬性返回數(shù)組中元素的數(shù)量。如果數(shù)字大于 0,則計算結果為 true

該方法和屬性都可以與 AND(&&) 運算符一起使用,以確定數(shù)組是否存在且不為空。

句法:

Array.isArray(emptyArray) && emptyArray.length

例子:

<!DOCTYPE html>
<html>

<head>
    <title> 檢查一個數(shù)組是否為空或存在 </title>
</head>

<body>
    <h1 style="color: green">
WebKaka.com
</h1> <b>
檢查一個數(shù)組是否為空或存在
</b>
    <p style="border-left:3px solid #ccc;width:300px;background:#f1f1f1;padding:10px;">emptyArray = []
        <br> nonExistantArray = undefined
        <br> fineArray = [1, 2, 3, 4, 5]</p>
    <br>
    <p>輸出:</p>
    <p> <span style="float:left;">emptyArray:</span> <span class="output-empty" style="float:left;width:80px;height:22px;border-bottom:1px solid #666;padding-left:10px;"></span> </p>
    <br>
    <p> <span style="float:left;">nonExistantArray:</span> <span class="output-non" style="float:left;width:80px;height:22px;border-bottom:1px solid #666;padding-left:10px;"></span> </p>
    <br>
    <p> <span style="float:left;">fineArray:</span> <span class="output-ok" style="float:left;width:80px;height:22px;border-bottom:1px solid #666;padding-left:10px;"></span> </p>
    <br>
    <br>
    <p> 點擊按鈕檢查數(shù)組是否存在和非空 </p>
    <button onclick="checkArray()"> 檢查數(shù)組 </button>
    <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>

demodownload

輸出:

點擊按鈕前

 

點擊按鈕后

 

 方法2:檢查數(shù)組的類型和長度

可以通過typeof運算符檢查數(shù)組的類型是否為“undefined”來檢查數(shù)組是否存在。還檢查數(shù)組是否為“null”。這兩件事驗證了數(shù)組是否存在。

可以使用 array.length 屬性檢查數(shù)組是否為空。通過檢查屬性是否存在,可以確定它是一個數(shù)組,通過檢查返回的長度是否大于0,可以確定該數(shù)組不為空。

然后可以將這些屬性與 AND(&&) 運算符一起使用,以確定數(shù)組是否存在且不為空。

句法:

typeof emptyArray != "undefined" && emptyArray != null && emptyArray.length != null
&& emptyArray.length > 0

例子:

<!DOCTYPE html>
<html>

<head>
    <title> 檢查一個數(shù)組是否為空或存在 </title>
</head>

<body>
    <h1 style="color: green">
WebKaka.com
</h1> <b>
檢查一個數(shù)組是否為空或存在
</b>
    <p style="border-left:3px solid #ccc;width:300px;background:#f1f1f1;padding:10px;">emptyArray = []
        <br> nonExistantArray = undefined
        <br> fineArray = [1, 2, 3, 4, 5]</p>
    <br>
    <p>輸出:</p>
    <p> <span style="float:left;">emptyArray:</span> <span class="output-empty" style="float:left;width:80px;height:22px;border-bottom:1px solid #666;padding-left:10px;"></span> </p>
    <br>
    <p> <span style="float:left;">nonExistantArray:</span> <span class="output-non" style="float:left;width:80px;height:22px;border-bottom:1px solid #666;padding-left:10px;"></span> </p>
    <br>
    <p> <span style="float:left;">fineArray:</span> <span class="output-ok" style="float:left;width:80px;height:22px;border-bottom:1px solid #666;padding-left:10px;"></span> </p>
    <br>
    <br>
    <p> 點擊按鈕檢查數(shù)組是否存在和非空 </p>
    <button onclick="checkArray()"> 檢查數(shù)組 </button>
    <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>

demodownload

輸出:

點擊按鈕前

 

點擊按鈕后

 

總結

本文通過示例演示,介紹了 在JavaScript中檢查數(shù)組是否存在或為空的兩種方法。哪種方法更好?從代碼量來看,第一種使用的人可能會多些,但編寫代碼大家一般有自己的喜好和習慣。

您可能對以下文章也感興趣

標簽: 數(shù)組  
x
  • 站長推薦
/* 左側顯示文章內(nèi)容目錄 */