$.each()、$.map()區別淺談

那片星空，那片海發表於2018-08-31

　　遍歷應該是各種語言中常會用到的操作了，實現的方法也很多，例如使用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]
所以說明返回的只是原陣列，而不是生成新陣列*/

 

相關文章