forEach是ECMA5中Array新方法中最基本的一個，就是遍歷，循環(huán)。例如下面這個例子：

[1, 2 ,3, 4].forEach(alert);

等同于下面這個for循環(huán)

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

[].forEach(function(value, index, array) {
  // ...
});

對比jQuery中的$.each方法：

$.each([], function(index, value, array) {
  // ...
});

會發(fā)現(xiàn)，第1個和第2個參數(shù)正好是相反的，大家要注意了，不要記錯了。后面類似的方法，例如$.map也是如此。

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

map

這里的map不是“地圖”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法類似：

array.map(callback,[ thisObject]);

callback的參數(shù)也類似：

[].map(function(value, index, array) {
  // ...
});

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

注意：由于forEach、map都是ECMA5新增數(shù)組的方法，所以ie9以下的瀏覽器還不支持（萬惡的IE啊），不過呢，可以從Array原型擴(kuò)展可以實現(xiàn)以上全部功能，例如forEach方法:

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 實現(xiàn) */
  };
}

forEach是ES5中操作數(shù)組的一種方法，主要功能是遍歷數(shù)組，例如：

var arr = [1,2,3,4];
arr.forEach(alert);

等價于：

var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
alert(array[k]);
}

forEach方法中的function回調(diào)有三個參數(shù)：第一個參數(shù)是遍歷的數(shù)組內(nèi)容，第二個參數(shù)是對應(yīng)的數(shù)組索引，第三個參數(shù)是數(shù)組本身

因此：

　　[].forEach(function(value,index,array){

　　　　//code something

　　});

等價于：

　$.each([],function(index,value,array){

　　　//code something

　})

寫一個例子；

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

map：map即是 “映射”的意思 用法與 forEach 相似，用法即：

[].map(function(value,index,array){

　　//code

})

一、原生JS forEach()和map()遍歷

共同點：

    1.都是循環(huán)遍歷數(shù)組中的每一項。

    2.forEach() 和 map() 里面每一次執(zhí)行匿名函數(shù)都支持3個參數(shù)：數(shù)組中的當(dāng)前項item,當(dāng)前項的索引index,原始數(shù)組input。

    3.匿名函數(shù)中的this都是指Window。

    4.只能遍歷數(shù)組。

1.forEach()

   沒有返回值。

arr[].forEach(function(value,index,array){

　　//do something

})

參數(shù)：value數(shù)組中的當(dāng)前項, index當(dāng)前項的索引, array原始數(shù)組；
數(shù)組中有幾項，那么傳遞進(jìn)去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次；
理論上這個方法是沒有返回值的，僅僅是遍歷數(shù)組中的每一項，不對原來數(shù)組進(jìn)行修改；但是可以自己通過數(shù)組的索引來修改原來的數(shù)組；

var ary = [12,23,24,42,1]; 
var res = ary.forEach(function (item,index,input) { 
       input[index] = item*10; 
}) 
console.log(res);//--> undefined; 
console.log(ary);//--> 通過數(shù)組索引改變了原數(shù)組； 

2.map()

有返回值，可以return 出來。

arr[].map(function(value,index,array){

　　//do something

　　return XXX

})

參數(shù)：value數(shù)組中的當(dāng)前項,index當(dāng)前項的索引,array原始數(shù)組；
區(qū)別：map的回調(diào)函數(shù)中支持return返回值；return的是啥，相當(dāng)于把數(shù)組中的這一項變?yōu)樯叮ú⒉挥绊懺瓉淼臄?shù)組，只是相當(dāng)于把原數(shù)組克隆一份，把克隆的這一份的數(shù)組中的對應(yīng)項改變了）；

var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,input) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原數(shù)組拷貝了一份，并進(jìn)行了修改
console.log(ary);//-->[12,23,24,42,1]；  原數(shù)組并未發(fā)生變化

兼容寫法：



不管是forEach還是map在IE6-8下都不兼容（不兼容的情況下在Array.prototype上沒有這兩個方法）,那么需要我們自己封裝一個都兼容的方法，代碼如下：

/**
* forEach遍歷數(shù)組
* @param callback [function] 回調(diào)函數(shù)；
* @param context [object] 上下文；
*/ 
Array.prototype.myForEach = function myForEach(callback,context){ 
    context = context || window; 
    if('forEach' in Array.prototye) { 
        this.forEach(callback,context); 
        return; 
    } 
    //IE6-8下自己編寫回調(diào)函數(shù)執(zhí)行的邏輯 
    for(var i = 0,len = this.length; i < len;i++) { 
        callback && callback.call(context,this[i],i,this); 
    } 
} 

/**
* map遍歷數(shù)組
* @param callback [function] 回調(diào)函數(shù)；
* @param context [object] 上下文；
*/ 
Array.prototype.myMap = function myMap(callback,context){ 
    context = context || window; 
    if('map' in Array.prototye) { 
        return this.map(callback,context); 
    } 
    //IE6-8下自己編寫回調(diào)函數(shù)執(zhí)行的邏輯 
    var newAry = []; 
    for(var i = 0,len = this.length; i < len;i++) { 
        if(typeof  callback === 'function') { 
            var val = callback.call(context,this[i],i,this); 
            newAry[newAry.length] = val; 
        } 
    } 
    return newAry; 
} 

二、jQuery $.each()和$.map()遍歷

共同點：

即可遍歷數(shù)組，又可遍歷對象。



1.$.each()

沒有返回值。$.each()里面的匿名函數(shù)支持2個參數(shù)：當(dāng)前項的索引i，數(shù)組中的當(dāng)前項v。如果遍歷的是對象，k 是鍵，v 是值。

$.each(arr, function(index,value){

　　//do something

})

參數(shù)：arr要遍歷的數(shù)組,index當(dāng)前項的索引,value數(shù)組中的當(dāng)前項
第1個和第2個參數(shù)正好和以上兩個函數(shù)是相反的，注意不要記錯了

$.each( ["a","b","c"], function(i, v){ 
     alert( i + ": " + v ); 
}); 
[javascript] view plain copy

$("span").each(function(i, v){ 
     alert( i + ": " + v ); 
}); 

$.each( { name: "John", lang: "JS" }, function(k, v){ 
     alert( "Name: " + k + ", Value: " + v ); 
}); 

2.$.map()

有返回值，可以return 出來。$.map()里面的匿名函數(shù)支持2個參數(shù)和$.each()里的參數(shù)位置相反：數(shù)組中的當(dāng)前項v，當(dāng)前項的索引 i。如果遍歷的是對象，k 是鍵，v 是值。如果是$("span").map()形式，參數(shù)順序和$.each()  $("span").each()一樣。

$.map(arr, function(value, index){

　　//do something

　　return XXX

})

 

var arr=$.map( [0,1,2], function(v){ 
     return v + 4; 
}); 
console.log(arr); 

$.map({"name":"Jim","age":17},function(k, v){ 
     console.log( k+":"+v ); 
}); 

• javascript