jquery中.map与each的区别?

JavaScript014

jquery中.map与each的区别?,第1张

一、功能不同

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。