面试题 1. 简述JavaScript中map和foreach的区别？-小龙资源网

📌 温馨提示：
本文内容可能随时间变动而失效，请以页面显示的更新时间为准。
若内容已不准确或资源失效，欢迎留言或联系站长反馈修正。

⚠️ 免责声明：
本文仅供学习与参考，观点仅代表作者个人意见，与本站无关。
如有侵权问题，请立即联系我们处理，谢谢理解与支持。

在 JavaScript 里，map 和 forEach 都是数组的迭代方法，不过它们在功能、返回值和使用场景等方面存在差异：

1. 返回值

- map 方法：会返回一个新数组，新数组里的元素是原数组元素经过指定回调函数处理后的结果。

const numbers = [1, 2, 3];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // 输出: [1, 4, 9]

- forEach 方法：没有返回值，或者说返回 undefined，它主要用于对数组每个元素执行一次提供的函数。

const numbers = [1, 2, 3];
const result = numbers.forEach(num => console.log(num * num));
console.log(result); // 输出: undefined

2. 功能用途

- map 方法：重点在于对数组元素进行转换，生成一个新数组，该数组元素是原数组元素经过处理后的结果。

const names = ['Alice', 'Bob', 'Charlie'];
const nameLengths = names.map(name => name.length);
console.log(nameLengths); // 输出: [5, 3, 7]

- forEach 方法：主要用于执行一些副作用操作，比如修改数组元素、打印日志等，而不是创建新数组。

const numbers = [1, 2, 3];
numbers.forEach((num, index, arr) => {
    arr[index] = num * 2;
});
console.log(numbers); // 输出: [2, 4, 6]

3. 链式调用

- map 方法：由于返回新数组，所以可以进行链式调用，配合其他数组方法使用。

const numbers = [1, 2, 3];
const result = numbers.map(num => num * 2).filter(num => num > 3);
console.log(result); // 输出: [4, 6]

- forEach 方法：返回 undefined，不适合链式调用后续的数组方法。

const numbers = [1, 2, 3];
// 下面这行代码会出错，因为 forEach 返回 undefined，无法调用 filter 方法
// const result = numbers.forEach(num => num * 2).filter(num => num > 3);

4. 中断遍历

- map 方法：无法中途停止遍历，会处理数组中的每个元素。

- forEach 方法：同样不能使用常规的 break 或 continue 语句来中断遍历，但可以通过抛出异常的方式来停止遍历，不过这种做法不推荐。

const numbers = [1, 2, 3, 4, 5];
try {
    numbers.forEach(num => {
        if (num === 3) {
            throw new Error('Stop iteration');
        }
        console.log(num);
    });
} catch (e) {
    if (e.message === 'Stop iteration') {
        console.log('Iteration stopped');
    }
}

综上所述，当需要对数组元素进行转换并生成新数组时，应使用 map 方法；若只是要对数组元素执行操作，不关心返回值，则可以选择 forEach 方法。

THE END