$.each()、$.map()区别浅谈

　　遍历应该是各种语言中常会用到的操作了，实现的方法也很多，例如使用for、while等循环语句就可以很轻松的做到对数组或对象的遍历，今天想讲的不是它们，而是简单方便的遍历方法。

　　大致的整理了一下，经常用到的大概有Jquery的$.each、$.map、each()、map()、get()、toArray()以及js原生的forEach()吧，当然肯定还有一些我不知道的，今天就先谈谈$.each()和$.map()区别。

$.each()

$.each()方法可用于遍历任何对象(包括数组)，结构为：$.each(array/object,function(index/key,value){ code })。index指遍历对象成员的索引，value指成员的内容。如果需要退出循环可使回调函数返回 false，其它返回值将被忽略。

上栗子：

//遍历数组

$(function(){

var arr = ["a","b","c","d"];

$.each(arr,function(index,value){

    console.log(value+" "+index);

});

});

结果依次输出

a0

b1

c2

d3

如果你在循环中放入console.log(this)，结果会依次输出string{a}。。。也就是表明返回值为对象。

//遍历对象

$(function(){

var obj = {name:"tony",age:18,job:"adc"}

$.each(obj,function(key,value){

    console.log(key+" "+value);

});

});

结果依次输出

name tony

age 18

job adc

$.map()

$.map()方法可以在遍历数组或对象成员的同时，经过回调函数的调用，然后转换到另一个新的数组中（这也是和$.each()的最大区别）。

结构：$.map(array/object,function(value,index/key){ code })，index指遍历对象成员的索引，value指成员的内容。如果需要退出循环可使回调函数返回 false，其它返回值将被忽略。

看栗子：

//遍历数组

$(function(){

var arr = ["a","b","c","d"];

var arr1 = $.map(arr,function(value,index){  //注意回调函数的参数位置和$.each()的不一致

    console.log(index+value);

    var val = value.toUpperCase();//可以在回调函数中对成员进行操作，然后将其返回到新的数组中。toUpperCase()方法转换字符为大写。

    return val;//一定要使用return返回值，否则新数组接受不到

});

console.log(arr1);

　var res = Object.prototype.toString.call(obj1);//使用Object.prototype.toString.call()方法返回传入变量的类型

　console.log(res);

});

首先依次输出遍历的结果

a0

b1

c2

d3

输出arr1的结果（可以看出是返回值组成的新数组）

[A,B,C,D]
输出res结果为
Object Array

（遍历对象可以参照$.each()方法，只不过返回的仍然是数组）

在这里有的同学可能就会疑问$.each()是否也会生成新的数组，眼见为实：

继续栗子：

$(function(){

var arr = ["a","b","c","d"];

var arr1 = $.each(arr,function(index,value){

    var val = value.toUpperCase();

    return val;

});

    console.log(arr1);

});

/*输出的结果仍然为

[a,b,c,d]

所以说明返回的只是原数组，而不是生成新数组*/

巴特西

$.each()、$.map()区别浅谈

最新文章

热门文章