js中forEach和map的区别：forEach不会改变原数组，而map会改变数组？错了错了

1.提出思考？forEach不会改变原数组，而map会改变数组？

看到掘金上一篇文章觉得很有意思：大致是描述一般面试官问js中forEach和map的区别？都会回答forEach不会改变原数组，而map会改变，我也一直对百度来的答案当作参考答案。事实证明这个答案是错的

面试：问js的forEach和map的区别 - 掘金

2.forEach()没有返回值，如果使用return会返回undefined；map会返回新数组

 

 3.数组中数据为基本数据类型时，forEach和map都不会改变原数组

// 1、数组为基本数据类型时，forEach和map都不会改变原数组；使用return 返回时，forEach返回undefined,map返回一个处理后的新数组
        let arr = [1, 2, 3, 4, 5];
        let arrforEach = arr.forEach((item) => {
            return item * 2;
        });
        console.log(arr);//[1, 2, 3, 4, 5]
        console.log(arrforEach);//undefined

        let arr1 = [1, 2, 3, 4, 5];
        let arrMap = arr1.map(item => {
            return item * 2;
        });
        console.log(arr1);// [1, 2, 3, 4, 5]
        console.log(arrMap);// [2, 4, 6, 8, 10]

4.数据为引用数据类型时，map和forEach都会改变原数组

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

// 2、数组为引用数据类型时,forEach和map都会改变原数组上的对象；使用return时，forEach返回undefined，map返回处理后的数据，未返回的元素返回undefined
        // 这是因为在使用 forEach 和 map 方法时，对引用类型元素的修改会直接反映在原始数组中。这是因为引用类型的元素实际上存储的是引用（内存地址），而非值本身。因此，通过引用可以访问和修改原始数组中的元素。
        // 而number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值

        let arrObj1 = [{
            username: 'lmf',
            age: 20
        },
        {
            username: 'yl',
            age: 30
        }];
        let arrObj1ForEach = arrObj1.forEach(item => {
            if (item.username === 'lmf') return item.age = 100;
        });
        console.log(arrObj1);//{username: 'lmf', age: 100} , {username: 'yl', age: 30}
        console.log(arrObj1ForEach);//undefined


        let arrObj2 = [{
            username: 'lmf',
            age: 50
        },
        {
            username: 'yl',
            age: 60
        }];
        let arrObj2Map = arrObj2.map(item => {
            if (item.username === 'lmf') return item.age = 200;
        });
        console.log(arrObj2);//{username: 'lmf', age: 200} , {username: 'yl', age: 60}
        console.log(arrObj2Map);// [200, undefined]

5.map和forEach循环体内return时影响

return本身就是表示跳出本次循环，进入下次循环。博主说的观点“foreach可以跳出本次循环，return 语句可以在当前回调函数中返回，而map不能，只能遍历完整个数组。”这句话有歧义。

如下例：

其实无论是forEach还是map在return以后本次循环体中，return后的语句都不会执行。sum1和sum2都打印12，区别还是在于return后，map返回新数组的值由return的值决定，而forEach永远只会返回undefined。

• 如果有return且直接return会返回undefined，如果返回其他值会返回其值；
• 而forEach返回值永远会返回undefined

// 3、（错误）foreach可以跳出本次循环，return 语句可以在当前回调函数中返回，而map不能，只能遍历完整个数组。
        // return其实就是跳出本次循环，进行下次循环，区别其实和前面一样的，都是对最后返回的新数组产生影响，如果都定义sum在循环里操作，返回值都会相等
        const array1 = [1, 2, 3, 4, 5];
        let sum1 = 0;
        array1.forEach((element) => {
            if (element === 3) {
                return;//这句后面的代码此次循环都不会执行，所以对sum1不会有影响，如果返回'23',那么返回的新数组此元素也会返回'23'
            }
            console.log(element); //1,2,4,5
            sum1 += element;
        });
     console.log(newArray1);//undefined
        console.log(sum1); // 输出: 12
        console.log("2222222");

        const array2 = [1, 2, 3, 4, 5];
        let sum2 = 0;
        const newArray = array2.map((element) => {
            if (element === 3) {
                return;这句后面的代码此次循环都不会执行，所以对sum2不会有影响
            }
            console.log(element);// 1,2,4,5
            sum2 += element;
            return element * 2;
        });
        console.log(sum2);// 12
        console.log(newArray); // 输出: [2, 4, undefined, 8, 10]

6.map 方法支持链式调用；forEach不支持因为返回的是undefined

        const array3 = [1, 2, 3, 4, 5];
        const doubledSum = array3
            .map((element) => element * 2)
            .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
        console.log(doubledSum); // 输出: 30

7.总结

forEach区别：

1. forEach无返回值，具体得说是return会返回undefined；map会返回新数组
2. 数组类型为基本数据类型时，forEach()和map()都不会改变原数组；
3. 数组类型为引用数据类型时，forEach()和map()都会改变原数组；
4. 循环体中使用return时，return后的代码都不会执行，只会对循环后的返回值有影响，forEach永远返回undefined，map()会返回return的值；
5. forEach()不支持链式操作；map()支持链式操作；