js中map方法和forEach方法的区别

红宝书中的定义：

map():对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。

forEach():对数组的每一项运行给定函数，无返回值。

forEach()代码如下：

let arr = ['kebe','liyabin','wangmin'];
arr.forEach((item,index,array)=>{
    console.log( item);
    console.log(index);
    console.log(array);
})

forEach()最后运行结果如下：

kebe
0
[ 'kebe', 'liyabin', 'wangmin' ]
liyabin
1
[ 'kebe', 'liyabin', 'wangmin' ]
wangmin
2
[ 'kebe', 'liyabin', 'wangmin' ]

以上代码说明forEach()本质上与for循环迭代数组一样。

可以用map()实现同样的输出结果：

let  arr = ['kebe','liyabin','wangmin'];
 arr.map((item, index,arr) => {
     console.log(item);
     console.log(index);
     console.log(arr);
});

不过map()是有返回值的。

 item: 数组当前元素

let  arr = ['kebe','liyabin','wangmin'];
let mapResult =  arr.map((item, index,arr) => {
     return (item);
});
console.log(mapResult);

输出显示：

[ 'kebe', 'liyabin', 'wangmin' ]

index：数组当前元素的索引

let  arr = ['kebe','liyabin','wangmin'];
let mapResult =  arr.map((item, index,arr) => {
     return (index);
});
console.log(mapResult);

  输出显示：

[ 0, 1, 2 ]

arr:数组本身

let  arr = ['kebe','liyabin','wangmin'];
let mapResult =  arr.map((item, index,arr) => {
     return (arr);
});
console.log(mapResult);

输出显示：

[ [ 'kebe', 'liyabin', 'wangmin' ],
  [ 'kebe', 'liyabin', 'wangmin' ],
  [ 'kebe', 'liyabin', 'wangmin' ] ]

综上所述：

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或打印出来。

map()适用于你要改变数据值的时候。不仅在于它更快，而且返回一个新的数组。

核心要点

• 能用forEach()做到的，map()同样可以。反过来也是如此。
• map()会分配内存空间存储新数组并返回新数组，forEach()不会返回数据。
• forEach()允许callback更改原始数组的元素。