$.each()、$.map()區別淺談
阿新 • • 發佈:2018-09-01
false 語言 style obj 操作 遍歷 索引 uppercase func
遍歷應該是各種語言中常會用到的操作了,實現的方法也很多,例如使用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()區別淺談