[javascript]JS中数组方法map和ForEach的区别

一、定义

foreEach()方法:针对每一个元素执行提供的函数。
map()方法:创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来。

二、语法

foreEach

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

callback为数组中每个元素执行的函数,该函数接收一至三个参数:

currentValue
数组中正在处理的当前元素。
index 可选
数组中正在处理的当前元素的索引。
array 可选
forEach() 方法正在操作的数组。

thisArg 可选可选参数。当执行回调函数 callback 时,用作 this 的值。

map

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

callback生成新数组元素的函数,使用三个参数:

currentValue
callback 数组中正在处理的当前元素。
index可选
callback 数组中正在处理的当前元素的索引。
array可选
map 方法调用的数组。

thisArg可选执行 callback 函数时值被用作this

例子

制作一个数组的平方
有如下一个数组

let arr =[1,2,3,4,5,6]

下面分别用forEach()和Map()

forEach()

注意,forEach是不会返回有意义的值的。
我们在回调函数中直接修改arr的值。

arr.forEach((value, key) => {
 return arr[key] = value * value;
});

执行结果如下:

 

map()
let list = arr.map(value => {
 return value * value;
});

执行结果如下:

 

执行速度对比

forEach()的执行速度 < map()的执行速度

 

map()适用于你要改变数据值的时候。不仅仅在于它更快,而且返回一个新的数组。这样的优点在于你可以使用链式调用(map(), filter(), reduce()等组合使用)来玩出更多的花样。
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

我们首先使用map将每一个元素乘以它们自身,然后紧接着筛选出那些大于10的元素。最终结果赋值给arr2。

三、区别

1、map速度比foreach快

2、map会返回一个新数组,不对原数组产生影响,foreach不会产生新数组,foreach返回undefined

3、map因为返回数组所以可以链式操作,foreach不能

4, map里可以用return ,而foreach里用return不起作用,foreach不能用break,会直接报错

四、应用

1、反转字符串

var str = '12345';
Array.prototype.map.call(str, function(x) {   //同时利用了call()方法
  return x;
}).reverse().join('');

2、一个笔试题。

['1', '2', '3'].map(parseInt) what & why ?

['1', '2', '3'].map(parseInt) 的输出结果为 [1, NaN, NaN]。

因为 parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数, radix 为介于 2-36 之间的数。

在数组的 map 方法的回调函数中会传入 item(遍历项) 和 index(遍历下标) 作为前两个参数,所以这里的 parseInt 执行了对应的三次分别是

  • parseInt(1, 0)
  • parseInt(2, 1)
  • parseInt(3, 2)

对应的执行结果分别为 1、NaN、NaN

可改为:

['1', '2', '3'].map((item,index)=>{return parseInt(item,10)})// [1, 2, 3]

 参照:https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map

原文地址:https://www.cnblogs.com/vickylinj/p/14456142.html