1、$(selecter).each与$.each方法
$.each(demoArr|demoObj, function(e, ele))
$(selecter).each
可以看作专门用来遍历DOMList的,如多个li标签,或者多个div标签,$.each
可以用来遍历数组和对象,其中e表示索引值或者key值,ele表示value值
<body>
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div>test5</div>
</body>
下面要遍历上面的几个DIV
var $div=$("div");
//each方法遍历
$("div").each(function(i,e){
console.log(i);//i是索引
console.log(this);//这里的是DOM对象,this也可以换成参数e
});
//也可以使用下面的方法
$.each($div,function(i,e){
console.log(i+" : "+e);
});
下面重点说一下遍历集合与数组:
首先我们可以使用$.each()方法进行遍历,如下:
var a=['a','b','c'];
$.each(a,function(e,ele){
console.log("a[e]:"+a[e]);//a,b,c
console.log("ele:"+ele);//a,b,c
});
我们在遍历数组和集合的时候,Array可以使用下标,Map和Set不能使用下标,ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for…of循环来遍历:
for…of与for…in的区别:for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,输出的时候会一起被输出。
即for(var item in arr|obj){}
可以用于遍历数组和对象,其实在js中数组也被定义为对象,在JS中,除了原生值其他都可以被称为对象。我的理解数组只不过它的属性是连续递增的数字。
遍历数组时,item表示索引值, arr表示当前索引值对应的元素 arr[item]
遍历对象时,item表示key值,arr表示key值对应的value值 obj[item]
使用for…in 遍历一个数组:
var a=['a','b','c'];
a.name='v';
for(var x in a){
console.log(x);
}
控制台输出如下:
使用for…in遍历一个对象
var m = {};
m[1]='x';
m['name']='duJian';
m['age']=23;
for(var i in m){
console.log(i+":"+m[i]);//1:x,name:duJian,age:23
}
使用for…of 遍历一个数组:
for(var x of a){
console.log(x);//输出a,b,c
}
更好的方式:iterable内置的forEach方法:
//遍历一个数组:
var a=['a','b','c'];
a.forEach(function(element,index,array){
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(index+":"+element);//0:a,1:b,2:c
console.log("array:"+array);//a,b,c
});
//遍历一个set集合
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log("参数1="+element+",参数2="+sameElement);
});
//参数1=A,参数2=A
//参数1=B,参数2=B
//参数1=C,参数2=C
//遍历一个map
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log("参数1="+value+",参数2="+key);
});
//参数1=x,参数2=1
//参数1=y,参数2=2
//参数1=z,参数2=3
本文主要参考:壁立千仞无欲则刚博主的网站:http://blog.csdn.net/wzj0808/article/details/51392060
学习中,如文章有错误,欢迎批评指正!