$.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]
因此說明返回的只是原數組,而不是生成新數組*/
相關文章
相關標籤/搜索