forEach和map方法的區別

forEach()和map()兩個方法都是ECMA5中Array引進的新方法，主要作用是對數組的每個元素執行一次提供的函數，但是它們之間還是有區別的。jQuery也有一個方法$.each(),長得和forEach()有點像，功能也類似。但是從本質上還是有很大的區別的，那么我們探探究竟。

//forEach
array.forEach(callback(currentValue, index, array){
    //do something
}, this)
 
//或者
array.forEach(callback(currentValue, index, array){
    //do something
})　　
 
//map:
var new_array = arr.map(callback[, thisArg])　
 
//$.each()
$(selector).each(function(index,element))  //注意參數的順序

callback: 為數組中每個元素執行的函數,該函數接收三個參數，

參數一：當前數組中元素；參數二：索引； 參數三：當前數組。

this：可選，執行會掉時候，this的指向。

區別：

1、forEach()返回值是undefined，不可以鏈式調用。

2、map()返回一個新數組，原數組不會改變。

3、沒有辦法終止或者跳出forEach()循環，除非拋出異常，所以想執行一個數組是否滿足什么條件，返回布爾值，可以用一般的for循環實現，或者用Array.every()或者Array.some();

4、$.each()方法規定為每個匹配元素規定運行的函數，可以返回 false 可用於及早停止循環。

下面寫一些例子和項目中用到的：

forEach用法:

var data = [1, 2, 3, 4];

data.forEach((item,index) => {
    console.log(data,index);
    if(item === 2){
        data.shift()    // 刪除數組的第一個元素
    }
})

輸出結果

 [1, 2, 3, 4] 0
 [1, 2, 3, 4] 1
 [2, 3, 4] 2

map用法：

var data = [1, 2, 3, 4];

var arr = data.map((item,index)=>{
    console.log(data,index);
    if(item === 2){
        data.shift()
    }
})
console.log(arr)

輸出：

 [1, 2, 3, 4] 0
 [1, 2, 3, 4] 1
 [2, 3, 4] 2
 [undefined, undefined, undefined, empty]

可以看出兩者的區別
當然vue項目也常用到

let data = [1,2,3,4];
let arr = data.map(item => {
   return {
        label: item,
        value: ''        
    } 
})
console.log(arr)

輸出：

[
    {label: 1, value: ""},
    {label: 2, value: ""},
    {label: 3, value: ""},
    {label: 4, value: ""}
]