通俗易懂一對一的介紹map和foreach循環的區別，並列舉兩個相關應用。

一：map和foreach的區別：
map:'map'這個單詞，除了能夠翻譯爲「地圖」以外，有些場景下應當翻譯爲「 映射 」，也就是按必定轉換規則，轉換一個集合的每一項，獲得另外一個集合。
Array.prototype.map 的 'map' 應當譯做「映射」，也就是 以一個數組的每一項爲基礎，構造出一個新數組。

forEach:而'for each'就很好理解了，也就是 對數組的每一項執行一樣的操做，並不會返回新的數組。

二：map和foreach的應用舉例：
打個比方說，如今村長讓你給全村人作一個相冊。

方案一：採用forEach:

const people = ['小明', '小吳', '小敏'];  // 村裏人
const tempAlbum = [];  // 去買一個空相冊
function takePhoto(person){
    return person + "的照片";
}
// 挨家挨戶拍照，並把照片存入相冊
const album = people.forEach(function(person){
    const photo = takePhoto(person);
    tempAlbum.push(photo);
    return photo;
});
console.log('tempAlbum is now:', tempAlbum);
console.log('album is now:',album);

方案二：採用map:

const people = ['小明', '小吳', '小敏'];  // 村裏人
function takePhoto(person){
    return person + "的照片";
}
// 挨個拍照後，自動生成了影集
const album = people.map(function(person){
    return takePhoto(person);
});
console.log('album is now:', album);

總結話語：

運行上面兩個例子，就能夠看出 map 的設計意圖和方便之處——在須要基於一個數組生成另外一個數組的時候，能夠不手動建立中間變量。

至因而否會影響原數組的問題，遍歷操做均可以影響原數組，也能夠不影響，這是有關原始類型和引用類型的知識，搞明白這兩個知識點以後，對影響與否這個問題的疑惑就會迎刃而解了。

Array.prototype.map 在 jsx 中非常方便，能夠很方便地將須要渲染的列表轉爲 jsx 標籤，而無需建立中間變量。
貼一個私貨，裏面有 JS 實現的類 map 函數，雖然實際用不上:使用 for 語法模擬實現 js 數組的部份內置迭代方法。

如對你有幫助的話，請給個贊鼓勵一下吧 ！