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

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

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

$.each()this

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

上栗子:prototype

//遍历数组
$(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()code

$.map()方法能够在遍历数组或对象成员的同时,通过回调函数的调用,而后转换到另外一个新的数组中(这也是和$.each()的最大区别)。对象

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

看栗子:索引

//遍历数组
$(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()是否也会生成新的数组,眼见为实:get

继续栗子:

$(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]
因此说明返回的只是原数组,而不是生成新数组*/
相关文章
相关标签/搜索