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的指向。

區別：

一、forEach()返回值是undefined，不能夠鏈式調用。

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

三、沒有辦法終止或者跳出forEach()循環，除非拋出異常，因此想執行一個數組是否知足什麼條件，返回布爾值，能夠用通常的for循環實現，或者用Array.every()或者Array.some();

四、$.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: ""}
]