一、原生JS forEach()和map()遍歷 共同點： 1.都是迴圈遍歷陣列中的每一項。 2.forEach() 和 map() 裡面每一次執行匿名函式都支援3個引數：陣列中的當前項item,當前項的索引index,原始陣列input。 3.匿名函式中的this都是指Window。 4.只能遍歷陣列。

二、jQuery $.each()和 $.map()遍歷 共同點： 即可遍歷陣列，又可遍歷物件。

each() 方法規定為每個匹配元素規定執行的函式。 提示：返回 false 可用於及早停止迴圈。

$(selector).each(function(index,element))

引數：

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

2.each處理一維陣列：

  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);      //輸出0，1，2
      alert(val); //輸出aaa，bbb，ccc
  });  
 

3.ecah處理dom元素 此處以一個input表單元素作為例子。

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

使用each如下

 $.each($("input:hidden"), function(i,val){  
     alert(val);     //輸出[object HTMLInputElement]，因為它是一個表單元素。   
     alert(i);       //輸出為0，1，2，3 
     alert(val.name);//輸出aaa,bbb,ccc,ddd，使用this.name將輸出同樣的結果
     alert(val.value);//輸出111,222,333,444，如果使用this.value將輸出同樣的結果
 });  
 

如果將以上面一段程式碼改變成如下的形式，輸出結果一樣

$("input:hidden").each(function(i,val){
    alert(i);
    alert(val.name);
    alert(val.value);       
});

forEach() 方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式。 注意: forEach() 對於空陣列是不會執行回撥函式的。

array.forEach(function(currentValue, index, arr), thisValue)

引數： function(currentValue, index, arr)：必需。 陣列中每個元素需要呼叫的函式。 thisValue ：可選。傳遞給函式的值一般用 “this” 值。如果這個引數為空， “undefined” 會傳遞給 “this” 值 函式引數描述： currentValue 必需。當前元素 index 可選。當前元素的索引值。 arr 可選。當前元素所屬的陣列物件。 例項：

var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
    array[index] == value;    //結果為true
    sum+=value;  
    });
console.log(sum);    //結果為 10

map() 方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。 map() 方法按照原始陣列元素順序依次處理元素。

注意： map() 不會對空陣列進行檢測。 注意： map() 不會改變原始陣列。

array.map(function(currentValue,index,arr), thisValue)

引數： function(currentValue, index,arr) 必須。函式，陣列中的每個元素都會執行； thisValue 可選。物件作為該執行回撥時使用，傳遞給函式，用作 “this” 的值。如果省略了 thisValue ，“this” 的值為 "undefined"這個函式； 函式引數描述： currentValue 必須。當前元素的值 index 可選。當前元素的索引值 arr 可選。當前元素屬於的陣列物件 map的回撥函式中支援return返回值；return的是啥，相當於把陣列中的這一項變為啥（並不影響原來的陣列，只是相當於把原陣列克隆一份，把克隆的這一份的陣列中的對應項改變了）； 例項：

arr[].map(function(value,index,array){
　　//do something
　　return XXX
})

map() 把每個元素通過函式傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 物件。

.map(callback(index,domElement))

引數: callback(index,domElement): 對當前集合中的每個元素呼叫的函式物件。 由於返回值是 jQuery 封裝的陣列，使用 get() 來處理返回的物件以得到基礎的陣列。 .map() 方法對於獲得或設定元素集的值特別有用。請思考下面這個帶有一系列複選框的表單：

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>
我們能夠獲得複選框 ID 組成的逗號分隔的列表：
$(':checkbox').map(function() {
  return this.id;
}).get().join(',');       //Values: two,four,six,eight