《前端八股文》—— map()和foreach()对比

110 阅读1分钟

一、总结:

1. 两者功能相同,都是对数组内的元素进行操作,参数都是一个函数
2. map()不会修改原数组,而是返回一个修改后的新数组;foreach()会修改原数组,即没有返回值
3.导致foreach()的执行速度一般比map()快

二、语法:

1.foreach()

array.forEach(callbackFn(currentValue, index, arr), thisValue)

2.map()

array.map(function(currentValue,index,arr), thisValue)

实例

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

arr.forEach((num, index) => {    
    return arr[index] = num * 2;  // arr = [2, 4, 6, 8, 10]
   }
);

let doubled = arr.map(num => {
    return num * 2;  // doubled = [2, 4, 6, 8, 10]
});

三、哪个更好

取决于你想要做什么。

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

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d

map()适用于你要改变数据值的时候。不仅仅在于它更快,而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]