jQuery的each，map和javascript的forEach, map方法

一、原生JS forEach()和map()遍历
共同点：
1.都是循环遍历数组中的每一项。
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。
3.匿名函数中的this都是指Window。
4.只能遍历数组。

二、jQuery $.each()和 $.map()遍历
共同点：
即可遍历数组，又可遍历对象。

jQuery 遍历 - each() 方法

each() 方法规定为每个匹配元素规定运行的函数。
提示：返回 false 可用于及早停止循环。

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

参数：
function(index,element) ：必需。为每个匹配元素规定运行的函数。
描述：
index - 选择器的 index 位置
element - 当前的元素（也可使用 “this” 选择器）
实例
1.输出每个 li 元素的文本：

$("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);       
});

JavaScript forEach() 方法

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

JavaScript Array map() 方法

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
})

jQuery 遍历 - map() 方法

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