×

JavaScript检查数组是否为空的实例

作者:andy0012019.09.10来源:Web前端之家浏览:486评论:0
关键词:数组

下面介绍下使用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 class="output-empty"></span>
		</p>

		<p>
			数组nonExistantArray是否为空或存在:
			<span class="output-non"></span>
		</p>

		<p>
			数组fineArray是否为空或存在:
			<span class="output-ok"></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 class="output-empty"></span>
		</p>

		<p>
			数组nonExistantArray是否为空或存在:
			<span class="output-non"></span>
		</p>

		<p>
			数组fineArray是否为空或存在:
			<span class="output-ok"></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>

还不赶紧运行下。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/shuzu8234098fosipo.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    感谢反馈,这边Web前端文章很旧了,版面已修复....

  • 访客

    版面不美观,影响用户的体验...

  • 8j84

    LightningChart还是第一次听说,了解下。...

  • 动画制作

    很基础的技术知识点...

  • 今日新闻

    文章不错支持一下吧...

  • 头条

    文章不错非常喜欢...

  • 前端开发

    JS随机生成,很多地方用到。...

  • 访客

    盖楼...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero