数组操作forEach和map

forEach和map的相同点

1、都是循环遍历数组中的每一项
2、入参匿名函数都支持三个参数，当前项item，当前项索引index，原始数组arr；匿名函数中的this都指向window
3、都可以通过return跳过本次循环
4、都无法通过使用 break 语句来中断循环。 break 语句用于中断循环的功能只适用于 for 循环或 while 循环
5、可以用try catch包裹实现跳出循环

第3点代码实现

const array1 = [1, 2, 3, 4, 5];
        let sum1 = 0;

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

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

const array1 = [1, 2, 3, 4, 5];
let arr4 =array1.map((element) => {
     if (element === 3) {
         return //跳过本次循环
     }
     console.log(element); //1,2,4,5
     return element+1
 });

 console.log(arr4); // 输出: [2,3,undefined,5,6]

第5点代码实现

let arr2 = [0, 1, "stop", 3, 4];
try {
    arr2.forEach(element => {
        if (element === "stop") {
            throw new Error("forEachBreak");
        }
        console.log(element); // 输出 0 1 后面不输出
    });
} catch (e) {
    console.log(e.message); // forEachBreak
};

let arr2 = [0, 1, "stop", 3, 4];
try {
    arr2.map(element => {
        if (element === "stop") {
            throw new Error("forEachBreak");
        }
        console.log(element); // 输出 0 1 后面不输出
    });
} catch (e) {
    console.log(e.message); // forEachBreak
};

forEach和map的区别

1、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]

引用数据类型
forEach会改变

        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会改变

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

结论：如果操作数组项item改变，对于数组项目是基础数据类型的，forEach和map都不会改变原数组；对于数组项目是引用数据类型的，forEach和map都会改变原数组；
数组项目是基础数据类型的可以通过遍历+访问数组下标来改变原始数组

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

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

参考：
链接: link

链接: link