forEach()和map()的差別和了解

1、在文章的開始先給大家介紹一下這兩者的共同點，我們通常前者用的次數多一點，比較常見

• 都是循環周遊數組中的每一項
• 每一次執行匿名函數都支援三個參數，數組中的目前項item，目前項的索引index，原始數組input
• 匿名函數中的this都是指window
• 隻能周遊數組

2、關于forEach()

敲黑闆：沒有傳回值！！！！

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

• 參數：value數組中的目前項，index目前項的索引，array原始數組；
• 數組中有幾項，那麼傳遞進去的匿名回調函數就需要執行幾次
• 理論上這個方式是沒有傳回值的，隻是周遊數組中的每一項，不對原來數組進行修改，但是可以自己通過數組的索引來修改原來的數組

舉例：

var array = [10,34,57,43,76];  
var res = array.forEach(function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res);//--> undefined;  
console.log(array);//--> 通過數組索引改變了原數組； 
           

[100,340,570,430,760]
           

3、關于map()

敲黑闆：有傳回值，可以return出來！！！！

arr[].map(function(value,index,array){
	xxx
	return xxx
});
           

• 參數：value數組中的目前項，index目前項的索引，array原始數組
• 差別：map的回調函數中支援return傳回值，return的是啥，相當于把數組中的這一項變為啥（并不影響原來的數組，隻是相當于把原數組克隆了一份，把克隆這一份的數組中的對應項改變了 ）；

var array = [10,34,57,43,76];  
var res = array.map(function (item,index,input) {  
       return item*10;   
})  
console.log(res);
console.log(array);不變
           

4、在jQuery中周遊

4.1  共同點：即可周遊數組，又可周遊對象

4.2 $.each()

敲黑闆：沒有傳回值，裡面的匿名函數支援兩個參數：目前項的索引i，數組中的目前項v，如果周遊的是對象，k是鍵，v是值

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

• 參數：arr要周遊的數組，index目前的索引，value數組中的目前項
• 第一個和第二個參數正好和以上連個函數是相反的，注意不要記錯了

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

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

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

4.3 $.map()

敲黑闆：

有傳回值，可以return出來，裡面的匿名函數支援2個參數和$.each()裡的參數位置想發，數組中的目前項v，目前項的索引i。如果周遊的是對象，k是鍵，v是值.

特殊情況：

$("span").map()形式 ，參數順序和each的是一樣的

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

　　xxx

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

這是目前我所吸收了解了的，後續如果還要更多的應用，我會繼續将這篇文章更新，希望能夠幫助到你~~~