jQuery 如何检查一个数组是否为空
概述
在jQuery中,我们可以通过使用多种方法轻松地检查一个数组是否为空。集体方法包括长度属性,在JavaScript中数组是对象,所以使用jQuery的别名符号.isEmptyObject(objName)。一个数组是一个元素的集合。因此,为了实现我们的目标,我们应该事先对jQuery的语法和如何操作HTML有一些了解。
有必要用isEmptyObject()方法编写” “,因为”$ “是jQuery的主要库,它包含各种方法,如isEmptyObject()、isArray()、isFunction()等等。在所有这些方法中,一个对象的引用被作为一个参数传递,它检查特定的方法。
范围
在这篇文章中,我们讨论了
- 各种jQuery方法,如length和isEmptyObject()。
-
对象作为参数中的引用传递。
-
在jQuery函数里面初始化一个空数组。
语法
在这个领域使用的主要语法是:
- 使用长度属性
arr.length
- 使用isEmptyObject
$.isEmptyObject(object Name)
在用HTML写jQuery函数之前,我们应该在HTML的
标签中添加jQuery的cdn链接。<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
方法1:在这里,我们将使用长度属性来检查数组是否为空。
数组的长度属性将检查数组的长度并返回一个数字值。数组的索引从0开始,但长度是从1开始计算的,所以数组的长度是索引的+1。当数组不包含任何元素时,它将返回0,否则它将返回数组的长度。
算法
- 第1步 – 在HTML的body标签中创建一个HTML
-
第2步 – 在jQuery语法中传递一个选择器作为按钮,在选择的标签上添加一个click()事件方法动作。
-
第 3步 -创建一个空数组为arr[ ]。
-
第4步 – 在if-else条件下使用length方法检查数组[ ] 的长度。
-
第 5步 -如果数组[ ]的长度等于零,那么它将返回一个空数组,否则如果数组的长度大于零,那么它将返回一个空数组。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check array empty or not using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<p>
<strong>Output: </strong>
<span id="outputVal" style="padding: 4px;"></span>
</p>
<button>Check Array</button>
<script>
$("button").click(() =>
var arr = [];
if(arr.length==0){
document.getElementById("outputVal").innerText="Array is empty";
document.getElementById("outputVal").style.background="tomato";
} else {
document.getElementById("outputVal").innerText="Array is not empty";
document.getElementById("outputVal").style.background="lightgreen";
}
})
</script>
</body>
</html>
方法2:使用isEmptyObject()属性
isEmptyObject()方法检查一个对象的属性。由于数组是JavaScript中的对象,所以通过isEmptyObject(Object Name)作为参数传递数组。isEmptyObject的返回类型是布尔值,所以它将返回真或假。如果传递给它的对象是空的,它将返回真,否则,它将返回假。
算法
- 第1步 - 在HTML的body标签中创建一个HTML
-
第2步 - 在jQuery语法中传递一个选择器作为按钮,在选定的标签上添加一个click()事件方法动作。
-
第 3步 - 创建一个空数组为arr[ ]。
-
第 4 步 – 使用isEmptyObject()方法,并在其内部传递一个参数作为数组isEmptyObject(arr) 将返回值存储在一个变量中。
-
第5步 - 在if-else中传递该变量作为一个条件。如果它返回true,那么输出将是Array is empty,否则如果它返回false,那么输出将是Array is not empty。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check array empty or not using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<p>
<strong>Output: </strong>
<span id="outputVal" style="padding: 4px;"></span>
</p>
<button>Check Array</button>
<script>
// jQuery starts from here
// It is necessary to write the “” with isEmptyObject() as “” is the main library of the jQuery which contains this method.
("button").click(() => {
var arr = [];
var res =.isEmptyObject(arr);
if (res) {
document.getElementById("outputVal").innerText = "Array is empty";
document.getElementById("outputVal").style.background = "tomato";
} else {
document.getElementById("outputVal").innerText = "Array is not empty";
document.getElementById("outputVal").style.background = "lightgreen";
}
})
</script>
</body>
</html>
上述两种方法的输出是相同的
- 当一个数组为空时
<script>
("button").click(() => {
var arr = [];
var res =.isEmptyObject(arr);
if (res) {
document.getElementById("outputVal").innerText = "Array is empty";
document.getElementById("outputVal").style.background = "tomato";
} else {
document.getElementById("outputVal").innerText = "Array is not empty";
document.getElementById("outputVal").style.background = "lightgreen";
}
})
</script>
- 当数组被填满时
<script>
("button").click(() => {
var arr = [1,2,3,4];
var res =.isEmptyObject(arr);
if (res) {
document.getElementById("outputVal").innerText = "Array is empty";
document.getElementById("outputVal").style.background = "tomato";
} else {
document.getElementById("outputVal").innerText = "Array is not empty";
document.getElementById("outputVal").style.background = "lightgreen";
}
})
</script>
总结
jQuery简化了对HTML文档对象模型(D.O.M.)的操作,因为它有预制的属性,可以与数组一起使用,jQuery使编写的代码更短更简单。”isEmptyObject “存储了对象的引用,从中检查是否空虚。取代基本的if-else语句,我们也可以使用三元操作符。
($.isEmptyObject(arr))? alert(“array is empty”) : alert(“array is not empty”);
这提供了一个单线解决方案,而不是多线。