一、功能不同
1、map:用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。
2、each:为每个匹配元素规定要运行的函数。
二、传递参数不同
1、map:会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。
2、each: 会为函数传入两个参数:其一是选择器的 index 位置。其二是当前的元素。
三、返回值不同
1、map:返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。
2、each:返回 false 可用于及早停止循环。
参考资料来源:百度百科-each
参考资料来源:百度百科-Map
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:
$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}
回调函数是可以传递参数,i就为遍历的索引。
对于遍历一个数组,用$.each()来处理,简直爽到了极点。例如:
$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name)
})
参数i为遍历索引值,n为当前的遍历对象.
var arr1 = [ “one”, “two”, “three”, “four”, “five” ]
$.each(arr1, function(){
alert(this)
})
输出:one two three four five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0])
})
输出:1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 }
$.each(obj, function(key, val) {
alert(obj[key])
})
输出:1 2 3 4 5
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
Js代码
function add(a,b)
{
alert(a+b)
}
function sub(a,b)
{
alert(a-b)
}
add.call(sub,3,1)
用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4)
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ “one”, “two”, “three”, “four”]
$.each(arr, function(){
alert(this)
})
//上面这个each输出的结果分别为:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0])
})
//其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为:1 4 7
var obj = { one:1, two:2, three:3, four:4}
$.each(obj, function(key, val) {
alert(obj[key])
})
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4
forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的。jQuery也有一个方法$.each(),长得和forEach()有点像,功能也类似。但是从本质上还是有很大的区别的,那么我们探探究竟。一、forEach和map语法
语法:
//forEach
array.forEach(callback(currentValue, index, array){
//do something
}, this)
//或者
array.forEach(callback(currentValue, index, array){
//do something
})
//map:
var new_array = arr.map(callback[, thisArg])
//$.each()
$(selector).each(function(index,element)) //注意参数的顺序
callback: 为数组中每个元素执行的函数,该函数接收三个参数,
参数一:当前数组中元素;参数二:索引; 参数三:当前数组。
this:可选,执行会掉时候,this的指向。
二、区别
2.1、forEach()返回值是undefined,不可以链式调用。
2.2、map()返回一个新数组,原数组不会改变。
2.3、没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的for循环实现,或者用Array.every()或者Array.some()
2.4、$.each()方法规定为每个匹配元素规定运行的函数,可以返回 false 可用于及早停止循环。
三、经典例子
3.1 在使用forEach()时候,如果数组在迭代的视乎被修改,
则其他元素会被跳过。因为 forEach()不会在迭代之前创建数组的副本。
3.2反转字符串
var str = '12345'
Array.prototype.map.call(str, function(x) { //同时利用了call()方法
return x
}).reverse().join('')
3.3一个笔试题。
1
["1", "2", "3"].map(parseInt) //结果 [1, NaN, NaN]
如果想得到[1, 2,3]应该这么做
function returnInt(element){
return parseInt(element,10)
}
["1", "2", "3"].map(returnInt)
这主要是因为 parseInt()默认有两个参数,第二个参数是进制数。当parsrInt没有传入参数的时候,而map()中的回调函数时候,会给它传三个参数,第二个参数就是索引,明显不正确,所以返回NaN了。
3.4....
四、兼容性
forEach()和map()是ECMA5新引入的,可能在标准的其他实现中不存在,在使用前可以要Ployfill一下。
具体网上很多吧,更多的是在ie9以下,如果你的项目无视这些,那么你可以不care。