2024年面试：问js的forEach和map的区别(1)，2024年最新面试杀面试官

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

> 
> 那么这个时候，有人可能会想，那我使用`forEach`的时候，加个`return`不就得了，咱们先不说能不能实现，就是真实现了，我觉得是没什么实际意义的，尽管你可以在回调函数中添加返回语句，但这个返回值不会被 `forEach` 方法捕获或使用
> 
> 
> 


那接下来咱们看看能不能实现吧

    const array = [1, 2, 3]

    const result = array.forEach((element) => {
        return element * 2; // 这个返回值不会被 forEach 捕获或使用
    });

    console.log(result); // 输出: undefined

那么咱们使用`map`呢

    const array = [1, 2, 3]

    const result = array.map((element) => {
        return element * 2; // 这个返回值会被 map 捕获或使用
    });

    console.log(result); // 输出: [2, 4, 6]

到这里，我相信大家就能明白了


#### map和forEach会不会改变原数组


这需要看我们面对的数据类型，会分为`基础数据类型`和`引用类型`


##### 基础数据类型


`forEach`

    const array = [1, 2, 3, 4];
    array.forEach(item => {
        item = item + 1
    })
    console.log(array); // [1,2,3,4]

`map`

    const array = [1, 2, 3, 4];
    array.map(item => {
        item = item + 1
    })
    console.log(array); // [1,2,3,4]

我们发现是不会进行改变的


##### 引用类型

    const arr = [{
        name: 'shaka',
        age: 23
    }, {
        name: 'virgo',
        age: 18
    }]
    arr.forEach(item => {
        if (item.name === 'shaka') {
            item.age = 100
        }
    })
    console.log(arr); //[{name: 'shaka', age: 100}, {name: 'virgo', age: 18}]

`map`就不再写了，也是会改变的


所以重点来了，我们回到这个问题：`问js的forEach和map的区别`，显而易见`一个会改变原数组，一个不会`这个答案毫无疑问是错误的



> 
> 这里我们其实应该思考的是，为什么基础数据类型不会更改，引用类型会更改
> 
> 
> 


这是因为在使用 `forEach` 和 `map` 方法时，对`引用类型`元素的修改会直接反映在`原始数组`中。这是因为引用类型的元素实际上存储的是`引用（内存地址`），`而非值本身`。因此，通过`引用`可以访问和修改`原始数组`中的元素。


而`number,string,Boolean,null,undefined`它们在栈内存中直接存储变量与值


我们再回头看这个![](https://img-blog.csdnimg.cn/direct/fb04ebcbf25048499c5b062ccbcd1cb0.png)为什么他这个修改了呢



> 
> 因为使用的是`arr[index]`。相当于你平常的 `数组名[第几项] = 值`。这样自然是可以修改的。
> 
> 
> 


#### 还有哪些区别呢


* foreach可以跳出循环，`return` 语句可以当前回调函数中返回，而map不能，只能遍历完整个数组。
* foreach不支持链式调用，而map支持链式调用，可以继续对返回的新数组进行操作。


这里注意：`forEach` 方法无法通过使用 `break` 语句来中断循环。 `break` 语句用于中断循环的功能只适用于 `for` 循环或 `while` 循环


这里给大家点例子吧，一下就能看懂了

// 使用 forEach 跳出当前循环
const array1 = [1, 2, 3, 4, 5];
let sum1 = 0;

    array1.forEach((element) => {
        if (element === 3) {
            return; // 使用 return 跳出循环
        }
        console.log(element); //1,2,4,5
        sum1 += element;
    });

    console.log(sum1); // 输出: 12


    // 使用 map 无法中断循环
    const array2 = [1, 2, 3, 4, 5];

    const newArray = array2.map((element) => {
        if (element === 3) {
            // 使用 return 语句无法中断 map 循环
            return;
        }
        return element * 2;
    });

    console.log(newArray); // 输出: [2, 4, undefined, 8, 10]


    // map 方法支持链式调用
    const array3 = [1, 2, 3, 4, 5];

    const doubledSum = array3
        .map((element) => element * 2)
        .reduce((accumulator, currentValue) => accumulator + currentValue, 0);

    console.log(doubledSum); // 输出: 30

    const array = [1, 2, 3, 4, 5];
    let sum = 0;

    array.forEach((element) => {
        if (element === 3) {
            break; // 使用 break 无法中断 forEach 循环
        }
        sum += element;
    });

    console.log(sum); // 此行代码不会执行，因为上面的代码会抛出错误

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

rums/4304bb5a486d4c3ab8389e65ecb71ac0)**