jQuery 遍历数组

最新推荐文章于 2023-03-30 20:27:46 发布
最新推荐文章于 2023-03-30 20:27:46 发布
阅读量9.7k 收藏 18
点赞数 3
分类专栏： jQuery 学习笔记 文章标签： jQuery map forEach 遍历数组 伪数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27127385/article/details/86601426
版权

一、jQuery对象和伪数组

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>hhahah</title>
		<script src="jquery-1.12.4.min.js"></script>
		<script>
			$(function(){
				var $div = $("div");
				console.log($div);
				
				var arr = [1,3,5];
				console.log(arr);
			});
		</script>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</body>
</html>

输出结果为：

总结：
 1.什么是jQuery对象：
  jQuery对象是一个伪数组
 2.什么是伪数组：
    有0~length-1的属性，并且有length属性的对象


二、jQuery - each()静态方法

<script>
	var arr = [1,3,5,7,9];
	var obj = {0:1,1:3,2:5,3:7,4:9};
	/**
	*1.利用原生JS的forEach方法遍历
	*第一个参数：遍历到的元素
	*第二个参数：当前遍历到的索引
	*注意：原生的forEach方法只能遍历数组，而不能遍历伪数组
	*/
	arr.forEach(function(value,index){
		console.log("原生forEach遍历数组:",index,value);
	});
	/**
	obj.forEach(function(value,index){
		console.log("原生forEach遍历伪数组:",index,value);
		//Uncaught TypeError: obj.forEach is not a function
	});
	*/

	/**
	* 2.利用jQuery的each静态方法遍历
	* 第一个参数：当前遍历到的索引
	* 第二个元素：遍历到的元素
	* 注意：jQuery的each方法可以遍历伪数组
	*/
	$.each(arr,function(index,value){
		console.log("jQuery-each方法遍历数组：",index,value);
	})
	$.each(obj,function(index,value){
		console.log("jQuery-each方法遍历伪数组：",index,value);
	})
</script>

输出结果如下：

总结：
  1.原生的forEach方法只能遍历数组，而不能遍历伪数组
    2.jQuery的each方法可以遍历伪数组


三、jQuery - map()静态方法

<script>
	var arr = [1,3,5,7,9];
	var obj = {0:1,1:3,2:5,3:7,4:9};
	/**
	*1.利用原生JS的map方法遍历 
	*第一个参数：遍历到的元素
	*第二个参数：当前遍历到的索引
	*第三个参数：当前被遍历的数组
	*注意：和原生的forEach方法一样，不能遍历伪数组
	*/
	arr.map(function(value,index,array){
		console.log("原生map遍历数组:",index,value,array);
	});
	/**
	obj.map(function(value,index,array){
		console.log("原生map遍历伪数组:",index,value,array);
		//Uncaught TypeError: obj.forEach is not a function
	});
	*/

	/**
	* 2.利用jQuery的each静态方法遍历
	* 第一个参数：要遍历的数组
	* 每遍历一个元素之后执行的回调函数
	* 回调函数的参数：
	* 	第一个参数：遍历到的元素
	* 	第二个元素：当前遍历到的索引
	* 注意：和jQuery的each方法一样可以遍历伪数组
	*/
	$.map(arr,function(value,index){
		console.log("jQuery-map方法遍历数组：",index,value);
	})
	$.map(obj,function(value,index){
		console.log("jQuery-map方法遍历伪数组：",index,value);
	})
</script>


总结：
  1.原生的map方法只能遍历数组，而不能遍历伪数组
    2.jQuery的map方法可以遍历伪数组


四、each()方法 和 map()方法的区别

<script>
	var obj = {0:1,1:3,2:5,3:7,4:9};

	/**
	* jQuery中的each静态方法和map静态方法的区别
	* each 静态方法默认的返回值就是，遍历谁就返回谁
	* map 静态方法的返回值是，一个空数组

	* each方法静态方法不支持在回调函数中对遍历的数组进行处理
	* map 静态方法可以在回调函数中通过return对遍历的数组进行操作，生成一个新的数组返回
	*/
	var $res1 = $.each(obj,function(index,value){
	});
	var $res2 = $.each(obj,function(index,value){
		return index + value;
	});
	var $res3 = $.map(obj,function(value,index){
	});
	var $res4 = $.map(obj,function(value,index){
		return value + index;
	});

	console.log("each方法返回值：",$res1);
	console.log("map方法返回值：",$res3);
	console.log("map方法操作后返回值：",$res2);
	console.log("map方法操作后返回值：",$res4);
</script>

输出结果为：

总结：
 1、jQuery中的each静态方法和map静态方法的区别：
  1. each 静态方法默认的返回值就是，遍历谁就返回谁
    2. map 静态方法的返回值是，一个空数组
 2、是否支持在回调函数中对遍历的数组进行处理：
  1. each方法静态方法不支持在回调函数中对遍历的数组进行处理
    2. map 静态方法可以在回调函数中通过return对遍历的数组进行操作，生成一个新的数组返回

邪人君子
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery 数组遍历，数组高级操作find、findIndex、map、reduce、filter、forEach详解
qq_41046662的博客
04-24 6550
// 通过for循环可以获取到数组中的每一个元素，即是利用的for循环产生的i作为数组中的元素的索引值 // 该文章不利用for循环进行数组的遍历 1. 先定义两个数组： var arr=[2,3,5,6,8]; var newArr=[] 2.forEach 可以遍历数组中的每一项 arr.forEach(function(item,ind...
jquery遍历数组的方式
weixin_34283445的博客
09-27 793
1，for循环： var arr = new Array(13.5,3,4,5,6); for(var i=0;i&lt;arr.length;i++){ arr[i] = arr[i]/2.0; } 2，for,in循环： var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "...
jquery数组的遍历
水巷石子的博客
09-18 3450
jquery数组的遍历 原始遍历（普通for） jquery对象函数遍历（对象.each） $(“div”).each(function(index,element){ }); jquery全局函数遍历（$.each） 重点!!! $.each(数组的对象,function(index,elemen){}) jquery3.0新特性(增强for) 重点!!! //快捷键：iter for(li of liEles){ } <!DOCTYPE html> &lt
js、jq遍历数组和对象
不甜呐的博客
09-12 815
js遍历数组 1.普通for循环 var arr = [1,4,45,34,12,45,56,8]; for ( var i = 0; i <arr.length; i++){ console.log(arr[i]); }; 2.优化的for循环：将数组的长度存储起来，避免重复获取长度，数组越大时优化效果越明显 var arr = [1,4,45,34,12,45,56,8]; var len = arr.length; for ( var i = 0; i <len; i+
jquery 数组
weixin_34199405的博客
08-25 232
1.认识数组 数组就是某类数据的集合，数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象），所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码代码如下: var a = new Array(10); 此时为a已经开辟了内存空间，包含10个元素，用数组名称加 ...
Jquery基础之遍历和循环
m0_56420338的博客
03-30 434
parent()返回被选元素的直接父元素parents()返回被选元素的所有祖先，一直向上直到（html）parentsUntil()返回被选元素和参数祖先元素之间的所有元素。
jquery 遍历数组 each 方法详解
10-22
下面小编就为大家带来一篇jquery 遍历数组 each 方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQuery遍历json数组的3种方法
10-25
主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each、for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下
jquery遍历数组与筛选数组的方法
12-10
grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array：待过滤数组;callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即...
php 便利jq,jquery怎样遍历数组？jquery遍历数组常用的两种方式
weixin_39585070的博客
04-02 318
在jquery中，我们常用$().each和$.each()这两个方法来进行数组的遍历，$().each和$.each()这两种方法表面看起来好像差不多，但是，实际上这两个方法是有区别的，两个方法在针对不同的操作上，都显示了各自的特点。接下来的这篇文章就来给大家介绍一下jquery用$().each和$.each()这两个方法实现遍历数组。我们话不多说，下面直接进入正文~1、jquery遍历数组的...
JavaScript jQuery 中定义数组与操作及jquery数组操作
10-23
主要介绍了JavaScript jQuery 中定义数组与操作及jquery数组操作的相关资料,需要的朋友可以参考下
JQ遍历
云飞扬°的博客
05-19 1223
JQ遍历 each(function(i,n)：第一个参数i表示索引，第二个参数是数组中具体的值 var cities = ["深圳市","广州市","东莞市","惠州市"]; //方法一：JQ对象遍历 $(cities).each(function(i,n){ //第一个参数i表示索引，第二个参数是数组中具体的值 console.log(i+"---"+...
jquery怎样遍历数组
10-11 598
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
jq：$.map()遍历对象或数组，将回调函数的返回值组成一个新的数组返回
weixin_38098192的博客
06-15 3424
推荐--jQuery使用手册 dom 三
zfmsa--装疯卖傻
05-08 133
remove() 删除匹配对象注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象wrap(htm) 将匹配对象包含在给出的html代码内 &lt;p&gt;Test Paragraph.&lt;/p&gt; &lt;a href="#" onClick="jq()"&gt;jQuery&lt;/a&gt; jQuery代码及功能： function jq()...
jQuery使用each方法与for语句遍历数组示例
AinUser的博客
08-29 813
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
jq循环数组
pengone的博客
11-16 5893
$().ready(     function(){         var anObject = {one:1,two:2,three:3};//对json数组each         $.each(anObject,function(name,value) {             alert(name);             alert(value);         })
php函数fetchall 不遍历取数组值的例子
最新发布
04-18
可以使用PHP的foreach循环语句来遍历取数组值，示例代码如下： ``` $result = $pdo->query("SELECT * FROM user"); // 获取查询结果集 $data = $result->fetchAll(PDO::FETCH_ASSOC); // 获取查询结果集中的所有数据 // 遍历取数组值 foreach ($data as $row) { echo $row['id'] . ': ' . $row['name'] . '<br>'; } ``` 此示例代码中，先通过`query()`方法获取查询结果集，然后通过`fetchAll()`方法获取查询结果集中的所有数据，并将数据存储在数组中。最后使用foreach循环语句遍历取数组值，并输出到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值