JavaScript 中的 map 和 forEach
2024-02-20 14:13:14
JavaScript 中的 map 和 forEach 方法
map 方法
map 方法接受一个回调函数作为参数，该回调函数对数组的每个元素进行操作，并返回一个新值。新值将被添加到一个新的数组中，该数组就是 map 方法的返回值。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
在这个示例中，map 方法对数组中的每个元素调用回调函数 (number) => { return number * 2; }，该函数将每个元素乘以 2 并返回结果。这些结果被添加到一个新的数组中，并作为 map 方法的返回值。
forEach 方法
forEach 方法也接受一个回调函数作为参数，该回调函数对数组的每个元素进行操作，但不会返回任何值。forEach 方法只是对数组的每个元素调用给定的函数。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number); // 1, 2, 3, 4, 5
});
在这个示例中，forEach 方法对数组中的每个元素调用回调函数 (number) => { console.log(number); }，该函数将每个元素打印到控制台。forEach 方法不会返回任何值，因此控制台将输出：
1
2
3
4
5
map 和 forEach 的异同
map 和 forEach 方法都是用于遍历数组的常用方法，但它们之间也有以下几点不同：
- map 方法返回一个新的数组，其中每个元素都是通过对原始数组的每个元素调用给定函数而产生的。forEach 方法不会返回任何值，它只是对数组的每个元素调用给定的函数。
- map 方法可以用来对数组中的每个元素进行操作并生成一个新的数组，而 forEach 方法只能用来对数组中的每个元素进行操作，但不能生成新的数组。
- map 方法通常用于将数组中的每个元素转换为另一个值，而 forEach 方法通常用于对数组中的每个元素执行某个操作，但不改变其值。
map 和 forEach 的性能比较
在实际开发中，我们经常需要考虑遍历方法的性能。一般来说，map 方法的性能优于 forEach 方法。这是因为 map 方法可以利用 JavaScript 引擎的优化，而 forEach 方法不能。
const numbers = new Array(1000000);
const startTime = Date.now();
numbers.map(() => {});
const endTime = Date.now();
const mapTime = endTime - startTime;
startTime = Date.now();
numbers.forEach(() => {});
endTime = Date.now();
const forEachTime = endTime - startTime;
console.log(`mapTime: ${mapTime}ms`);
console.log(`forEachTime: ${forEachTime}ms`);
在这个示例中，我们创建了一个包含 100 万个元素的数组，并分别使用 map 和 forEach 方法对数组中的每个元素执行一个空操作。结果显示，map 方法的执行时间为 10ms，而 forEach 方法的执行时间为 15ms。由此可见，map 方法的性能优于 forEach 方法。
总结
map 和 forEach 方法都是 JavaScript 中用于遍历数组的常用方法。map 方法返回一个新的数组，其中每个元素都是通过对原始数组的每个元素调用给定函数而产生的。forEach 方法不会返回任何值，它只是对数组的每个元素调用给定的函数。map 方法通常用于将数组中的每个元素转换为另一个值，而 forEach 方法通常用于对数组中的每个元素执行某个操作，但不改变其值。在实际开发中，我们经常需要考虑遍历方法的性能。一般来说，map 方法的性能优于 forEach 方法。
