js、jquery遍历数组和对象

最新推荐文章于 2025-06-27 10:44:03 发布

原创最新推荐文章于 2025-06-27 10:44:03 发布 · 1.7w 阅读

4 ·

CC 4.0 BY-SA版权

大前端专栏收录该内容

77 篇文章

订阅专栏

本文介绍了使用原生JavaScript及jQuery进行数组与对象遍历的方法。对于数组，原生JS提供了for循环两种形式，而jQuery提供了each和map共四种方式；对于对象，原生JS可用for...in语句，jQuery同样提供了each和map方法。文中通过具体示例展示了不同遍历方法的特点及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结:

1.遍历数组

1.1 原生js有两种方法都可以使用[for(var i;i<arr.length;i++){},for(var i in arr){}]

1.2 jquery有两个函数共计四种方法都可以使用[$.each(arr,function(i,item){}),$(arr).each(function(i,item){}), $.map(arr,function(i,item){}), $(arr).map(function(i,item){})]

2.遍历对象

2.1 原生js有一种方法可以使用[for(var i in obj){}]

2.2 jquery有两个函数共计两种方法可以使用[$.each(obj,function(i,item){}),$.map(obj,function(i,item){})]

/*
jquery中的each是用来遍历数组的而map则是用来映射生成一个新数组的
each方法中的return false相当于循环中的break,return true相当于循环中的continue
map方法中的return 相当于个新数组映射成的一个元素，没有return就相当于新的数组中忽略掉了这个元素


*/

/*遍历数组*/
var arr=["a","b","c"];
console.log("js遍历数组1");
for(var i=0;i<arr.length;i++){
	console.log(i+"--"+arr[i]);
}
console.log("js遍历数组2");
for(var i in arr){
	console.log(i+"--"+arr[i]);
}
console.log("jquery.each遍历数组");
$.each(arr,function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.each遍历数组2");
$(arr).each(function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.map遍历数组1，注意这里回调函数中第一个参数是元素，第二个是索引");
$.map(arr,function(i,item){
	console.log(i+"--"+item);
});
console.log("jqery.map遍历数组2");
console.log($(arr).map(function(i,item){
	console.log(i+"--"+item);
}).length);

/*遍历对象*/
var obj={name:"xiaoming",age:20,addr:"tianminglu"};
console.log("js遍历对象")
for(var i in obj){
	console.log(i+"--"+obj[i]);
}

console.log("jquery.each遍历对象1");
$.each(obj,function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.each遍历对象2")
$(obj).each(function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.map遍历对象1，注意这里回调函数中第一个参数是元素，第二个是索引");

$.map(obj,function(i,item){
	console.log(i+"--"+item);
});	
console.log("jquery.map遍历对象2");
$(obj).map(function(i,item){
	console.log(i+"--"+item);
});