1. 程式人生 > 實用技巧 >如何使用JavaScript檢查陣列是否為空?

如何使用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>

廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com

方法二:使用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>