一：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 數組的部分內置迭代方法。

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