map和foreach循环的区别是什么？

Question

我看了好的好多资料，太绕了，求通俗易懂，立竿见效！

Answer 1

'map'这个单词，除了可以翻译为“地图”之外，有些场景下应当翻译为“ 映射 ”，也就是按一定转换规则，转换一个集合的每一项，得到另一个集合。
Array.prototype.map 的 'map' 应当译作“映射”，也就是 以一个数组的每一项为基础，构造出一个新数组。
而'for each'就很好理解了，也就是 对数组的每一项执行同样的操作，并不会返回新的数组。
打个比方说，现在村长让你给全村人做一个相册。
第一种方案，采用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 数组的部分内置迭代方法。

Answer 2

    let arr = [
      { a: 10 },
      { a: 11 },
      { a: 12 }
    ]
    let forEachArr = arr.forEach(item => {
      return item.a
    })
    let mapArr = arr.map(item => {
      return item.a
    })
    console.log(mapArr) // [10, 11, 12]
    console.log(forEachArr) // undefined

使用forEach目的是对数组的每一项都执行方法，没有返回值，所以forEach里的return并不会中断循环，只会跳出当前方法
map和forEach一样，return也不会中断循环，只是会返回一个数组，可以接收到
你自己写代码跑一下，会让你理解更深刻

Answer 3

求通俗易懂，立竿见效 哈哈，前端果然急功近利，浮躁的很啊。

1. 2个api的语法如下：

map:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {}[, thisArg])

forEach

arr.forEach(function callback(currentValue[, index[, array]]) {}[, thisArg]);

所以2者在使用的时候，api上没有区别；唯一的区别就是 map有返回值，forEach 没有返回值，同样和 @安昊 说的一样，都无法中断循环。

1. 从使用性能上

在chrome65 版本的浏览器测试，map的效率基本是forEach的 1/3; 也就是说 遍历数组的时候，forEach会更高。

但是其实，因为map 比 forEach 多干了事情。

所以严格意义上来说，map 是 forEach 的一个升级版本。 可以用 forEach 实现一个map。

Answer 4

在JSX种用map因为会返回一个数组, 也可以链式调用用, [1,2,3].map(x=> x).forEach(x=>x),
forEach适合无要返回值, 比如反复调用一个方法, [1,2,3].forEach(x => fn(x)).