数组方法forEach和map区别&提前结束循环有哪些方法

1.相同点

都是用来遍历一个数组并对数组的每一项执行给定的函数

不同点

1. 从它们各自的定义中即可发现数组调用 map 方法之后会返回一个新的数组，而数组调用 forEach 之后是没有返回值，即一定返回 undefined
2. 它们的使用场景不同，map 适用于需要更改数组的场景，而 forEach 更适用于打印数组内容，并且 forEach 除了抛出异常以外，没有办法中止或跳出循环，若要提前结束循环，则可以使用 for 循环、for···of、for···in、every、some、find、findIndex，对于需要判断一个数组是否满足条件并返回 true 或 false 的场景可以用 every() 或者 some()
    

2.map是否改变原数组

首先数组中每一项为基本数据类型的时候不改变原数组

  var a=[1,2,3,4,5];

    var b=a.map((item)=>item+10);

    console.log('原来的数组a');

    console.log(a);//[1,2,3,4,5]

    console.log('经过map处理a后的数组b');

    console.log(b);//[11,12,13,14,15]

    console.log('处理后原来的数组a');

    console.log(a);//[1,2,3,4,5]

其次当数组每一项为对象时会改变原数组

   var aa=[

        {name:'zs',age:10},

        {name:'ls',age:20},

        {name:'ww',age:30},

        {name:'zl',age:40}

    ];

    var bb=aa.map((item)=>item.age=100);

    console.log('原数组aa');

    console.log(aa);

    console.log('经过map处理后的数组bb');

    console.log(bb);

    console.log('处理后原数组aa');

    console.log(aa);

这是因为 map 和 forEach 的 callback 在操作数组元素时实际上是下面这样操作的：callback.call([thisArg], this[index], index, this)，当数组元素为引用类型时， this[index] 取到的实际只是一个指向对应元素的地址，这种情况下再进行修改操作，修改的是堆中的对象的内容，那当我们再次去读取原数组中内容时，读到这个引用类型的元素时，我们拿到的还是那个地址，不过它指向的堆中的内容却已经变了
 

3.避免原数组发生改变：

    let array = [{ name: 'Anna', age: 16 }, { name: 'James', age: 18 }]
    let newArray=array.map((item) => {
      const obj = { ...item, like:'eat'};
      return obj;
    })
    console.log(array); // [{ name: 'Anna', age: 16},{ name: 'James', age: 18}]
    console.log(newArray);//[{ name: 'Anna', age: 16,like: "eat"},{ name: 'James', age: 18,like: "eat"}]

4.哪些遍历数组方法可以跳出循环

想要数据大于3的时候跳出循环

let arr = [1, 2, 3, 4, 5];

不能跳出循环的方法

forEach  ,   map   ,  reduce  ,  filter

    // 1.forEach():代替普通的for循环   执行结果全部可以打印
    {
        arr.forEach(function (val, index, arr) {
            if (val > 3) {
                console.log(val) // 4  5
                return false;    //没有返回值，ruturn false 仍向下执行
 
            } else {
                console.log(val)// 1  2  3
                return true;
            }
 
        })
 
        console.log(arr)   //[1, 2, 3, 4, 5]
    }
 
    //  2. map():非常有用   数据交互的时候  有返回值
    {
        let res = arr.map(function (val, index, arr) {
            if (val > 3) {
                console.log(val) // 4  5
                return false;    //
 
            } else {
                console.log(val)// 1  2  3
                return true;
            }
 
        })
        console.log(res)  // [true, true, true, false, false]
        console.log(arr)   //[1, 2, 3, 4, 5]
    }
 
    // 3.filter()  过滤一些不合格的数据  有返回值
 
    {
        let res = arr.filter(function (val, index, arr) {
            if (val > 3) {
                console.log(val) // 4  5
                return false;    //
 
            } else {
                console.log(val) // 1  2  3
                return true;
            }
 
        })
        console.log(res)   // [1,2, 3]
        console.log(arr)   //[1, 2, 3, 4, 5]
    }

可以跳出循环的方法

for ,  for...of  ,  some  ,   every

    // 4. some   类似查找  只有某一个元素符合条件，返回true   return true的时候跳出整个循环
    {
        let res = arr.some(function (val, index, arr) {
            if (val > 3) {
                return true;   //当内部return true时跳出整个循环
            }
 
            console.log(val)// 1 2  3
 
        })
 
        console.log(res)   //true
        console.log(arr)   //[1, 2, 3, 4, 5]
 
    }
 
    //every 当内部return false时跳出整个循环（return true;也是需要写）   数组里的所有元素都要符合条件才返回true
    {
        let res = arr.every(function (val, index, arr) {
            if (val > 3) {
                console.log(val)// 4
                return false;
            }
            else {
                console.log(val) // 1  2  3
                return true;
            }
 
        })
 
        console.log(res)   //false
        console.log(arr)   //[1, 2, 3, 4, 5]
 
    }
 
    //for-of遍历  里面不能用return  报错
    {
        for (var value of arr) {
            if (value > 3) {
                console.log(value)// 4
                break;
 
            }
 
        }
    }
 
    //for循环
    {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] > 3) {
                console.log(arr[i])  // 4
                break;
            }
 
        }
    }

参考原文链接：https://blog.csdn.net/Anna0115/article/details/103696124

参考原文链接：https://blog.csdn.net/qq_41306423/article/details/107988831
参考原文链接：https://blog.csdn.net/Candy_mi/article/details/102589856