forEach和map的区别

js里关于数组有许多内置方法, forEach()和map()是对数组每个元素进行处理的常用方式, 前阵子加了一个前端技术群, 群主的入群问题就是forEach和map的区别。于是研究了一波。

forEach

特点：

• 1.可以改变数组本身（并不完全，下文会说），且没有返回值；
• 2.不能常规操作跳出循环；
• 3.无法进行链式操作;
• 4.每一次执行匿名函数的时候，还给其传递了三个参数值：数组中的当前项item,当前项的索引index,原始数组input

刚才说到forEach可以改变数组本身，但不完全，是因为只有元素是引用类型的情况下才可以改变，可以看下面的例子：

var personArr = [
   {name:'王工',age:26},
   {name:'张工',age:27},
   {name:'李工',age:30}
];
personArr.forEach(item => { 
  item.age = item.age + 1}
);
console.log(personArr)   //[{name:'王工',age:27},{name:'张工',age:28},{name:'李工',age:31}]

var salaryArr = [10000, 15000, 20000];
salaryArr.forEach(item => {
  item = item + 2000
})
console.log(salaryArr) //[10000, 15000, 20000]

上述代码表示，工作一年后，三位工程师的年龄都长了一岁， 但salaryArr并没有改变，也就是很遗憾，每个人涨薪2000的程序没有按照原有的预想进行变化：）原因就是forEach并不能改变值类型元素的数组。

map

特点：

• 1.会新建一个数组，需要承载对象，也就意味着原始数组调用它后不会发生变化
• 2.每一个元素都调用一个回调函数后返回结果
• 3.不管是forEach还是map，都支持2个参数：回调函数（item,index,list）和上下文。第二个参数的意思是把匿名回调函数中的this进行修改。

map的回调函数里必须有return，可以看一下下列代码

let newArr = [1,2,3,4,5].map(item => { if(item > 3) return item })
// => [undefined, undefined, undefined, 4, 5]