在javascript中，map()和forEach()有什么不同？

本文结合了自己的理解进行了意译，如有需要，可查看原文，附址：medium.com/front-end-w…

正文

js的数组是我们最常用的数据结构之一，我们经常需要用它处理数组中的元素，并对数组进行迭代。javascript提供的函数中最受我们欢迎的可能就是map和forEach了。

它们在ES5中被引入。

它们看起来几乎相同，但它们之间又有一些不同，但在跳过之前，让我们先了解map()和forEach()。

forEach()

这个方法可以通过遍历数据的每个元素来执行回调函数。记住，它不会返回任何东西，如果你尝试获取它的值，它将会返回undefined。

let numberArray = [1, 2, 3, 4, 5]

let returnValue = numberArray.forEach(num => console.log(num * num)) // 打印每个元素

// numberArray数组没有改变
console.log(numberArray) // [1, 2, 3, 4, 5]
console.log(returnValue) // undefined

// forEach()：不可链式调用

map() 它几乎与forEach方法相同，并执行一个回调函数来轻松遍历数组。但不同的是它会返回一个新的数组，所以这意味着不会改变我们的源数组，因此它是一个不可变的操作。

map的一个优点是它也是可链式的，这意味着你在一行中调用多个map操作。

let numberArray = [1, 2, 3, 4, 5]

let returnValue = newArray
    .map(num => num * 2)
    .map(num => num.toString())
    .map(string => '$' + string)
    
console.log(numberArray) // [1, 2, 3, 4, 5]
console.log(returnValue) // ['$2', '$4', '$6', '$8', '$10']

// map()可链式调用

forEach和map的不同与总结

两者都可以帮助我们遍历数组，至于选择map还是forEach取决于你的具体情况。

forEach	map
返回值：undefined	返回值：新数组基于你的回调函数创建
源数组：不会被改变	源数组：不会被改变
方法调用结束后不会生成新数组	方法调用结束后不会生成新数组
forEach不可链式调用	map可链式调用

如果你打算改变数组，我们应该使用map函数，它不会改变原来的数组并且会返回一个新的数组。但是，如果你不需要返回数组，只是想循环数组中的每一个元素，可以使用forEach甚至是for循环