今天简单谈下循环遍历之each(),forEach()的区别:
1.each()是jQuery的遍历方法,forEach()是原生js遍历数组的方法
我们知道在遍历通过getElementsBy..的方法得到的元素集合(或称为伪数组)时,使用for-in循环遍历时会出现报错,同理,forEach()用于数组的遍历,对伪数组的遍历会出现报错,但是each()既可以遍历数组也可以遍历伪数组!
2.关于回调函数的传参
如:$(obj).each(function(){//执行的反码块});
arr.forEach(function(){//执行的代码块});
1)当回调函数不带任何参数或者只带一个参数时:
each()默认的是obj的索引值(index),我们可以通过$(this)来找到当前遍历的对象;
forEach()默认的是arr的子元素(item);
2)当回调函数带两个参数时:
$(obj).each(function(index,item){//执行的反码块});
arr.forEach(function(item,index){//执行的代码块});
我们发现二者的参数顺序正好是相反的!
3)forEach()可以带第三个参数!
事实上forEach(function(child,index,parent){//执行的代码块});
如上可以看出forEach的第三个参数可以表示为需要遍历的整个数组(parent),驻足中的每一个值item可以看成是数组的子元素(child),从而我们在数组的操作上会有更多的方式,如下例子:
需求:将数组中的值乘以2倍后放回数组
var num=[1,2,3];
num.forEach(function(item,index,arr){
arr[index]=item*2;
})
console.log(num);//[2,4,6]
4)each()方法中对数据处理的妙用:
首先我们知道有$.each(json,function(){})方法
此方法可以不用纠结each前面的遍历元素,而是直接写上jQuery,在方法里面写上需要遍历的参数,此时回调函数里面的参数还是和前面说的一样(可以有index和item),拿个简单的例子解释下:
//用字面量创建对象的方法定义一个json对象
var json={
name:"小明",age:20,
sex:"女"
}
//使用$.each(json,function(){})方法遍历
$.each(json,function(index,item){console.log(index,item); //name 小明/age 20/sex 女
})
我们可以发现,上述的例子中,index即为json对象的键(key),item即为值(value);
所以在使用该方法处理数据时,写成$.each(json,function(key,value){})会更好理解一些!
在ajax请求后台数据时可酌情使用此方法...
3.return false终止遍历
在forEach中不支持return false终止遍历;但是在each中可以使用return false立即终止遍历,语法可简单表示为:
$(obj).each(function(){
if(遍历停止的条件){return false}
})
简单的例子:
var arr=["one","two","three"];
$(arr).each(function(index){
console.log(this);
if(index>=1)return false;
})
如上执行后得到的结果://"one" "two"
return false终止遍历的案例还是很常见的,例如电商楼梯导航等...
补充~
如上由于forEach没有终止遍历的便捷方法,可以在for循环里面使用break语句嘛,不过for循环不能像函数一样可以返回想要的对象或者值,但是可以解决终止循环嘛,若实在是需要返回值或者对象,再用现有知识封装个函数....
emmm...皮一下很开心,后面再补充一个用for循环终止遍历的栗子...
若有问题欢迎指正~~