--- theme: condensed-night-purple --- ## 前言为什么要写这么一篇文章，原因是今天下午水群的时候，有个小伙伴分享自己的面试题，其中一个是`foreach`和`map`的区别，其实是蛮简单，蛮基础的一道题，但是他是这么回答的 > 一个会改变原数组，一个不会我当场就懵了，我以为是整活，谁知道是认真的，并且给我发了一篇文章

我看完更蚌埠住了，那么多对的文章，你偏偏挑个错的然后我发现，真的很多人都这么认为的，那这真的是一件很可怕的事情，明明你自己试一下就知道了，甚至有不少文章都是这么写的，但是我也看到了不错的文章，写的已经不错了那么咱们，就这个简单的问题，咱们浅浅地说一下~ ## 区别 ### `map`会返回一个新的数组，而`forEach`不会简单的区别我们可以在`MDN`上看看

简单来说什么意思，`map`会返回一个新的数组，而`forEach`不会，实际上是因为`forEach`不会返回任何值（实际上返回的是`undefined`），而`map` 是有返回值的，是一个新数组我们可以简单手写一下，看的会更直观一些 `map` ```js function myMap(array, callback) { const result = []; for (let i = 0; i < array.length; i++) { result.push(callback(array[i], i, array)); } return result; } ``` `forEach` ```js function myForEach(array, callback) { for (let i = 0; i < array.length; i++) { callback(array[i], i, array); } } ``` 再简单点对比 > `forEach` 和 `map` 的实现原理相似。它们都是通过遍历数组，对数组的每个元素执行特定的函数。区别主要在于它们处理函数返回值的方式不同。`forEach` 忽略函数的返回值，而 `map` 则将函数的返回值收集到一个新的数组中。在内部，这两个函数可能会使用一个类似于下面的`for`循环来遍历数组： ```js for (let i = 0; i < array.length; i++) { callback(array[i], i, array); // callback 是 forEach 或 map 的参数函数 } ``` 在 `map` 的内部实现中，还会有一个新的数组用于收集每次调用回调函数的结果。这个新的数组最后会被返回： ```js let newArray = []; for (let i = 0; i < array.length; i++) { newArray.push(callback(array[i], i, array)); // callback 是 map 的参数函数 } return newArray; ``` > 那么这个时候，有人可能会想，那我使用`forEach`的时候，加个`return`不就得了，咱们先不说能不能实现，就是真实现了，我觉得是没什么实际意义的，尽管你可以在回调函数中添加返回语句，但这个返回值不会被 `forEach` 方法捕获或使用那接下来咱们看看能不能实现吧 ```js const array = [1, 2, 3] const result = array.forEach((element) => { return element * 2; // 这个返回值不会被 forEach 捕获或使用 }); console.log(result); // 输出: undefined ``` 那么咱们使用`map`呢 ```js const array = [1, 2, 3] const result = array.map((element) => { return element * 2; // 这个返回值会被 map 捕获或使用 }); console.log(result); // 输出: [2, 4, 6] ``` 到这里，我相信大家就能明白了 ### map和forEach会不会改变原数组这需要看我们面对的数据类型，会分为`基础数据类型`和`引用类型` #### 基础数据类型 `forEach` ```js const array = [1, 2, 3, 4]; array.forEach(item => { item = item + 1 }) console.log(array); // [1,2,3,4] ``` `map` ```js const array = [1, 2, 3, 4]; array.map(item => { item = item + 1 }) console.log(array); // [1,2,3,4] ``` 我们发现是不会进行改变的 #### 引用类型 ```js 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`它们在栈内存中直接存储变量与值我们再回头看这个

为什么他这个修改了呢 > 因为使用的是`arr[index]`。相当于你平常的 `数组名[第几项] = 值`。这样自然是可以修改的。 ### 还有哪些区别呢 - foreach可以跳出循环，`return` 语句可以当前回调函数中返回，而map不能，只能遍历完整个数组。 - foreach不支持链式调用，而map支持链式调用，可以继续对返回的新数组进行操作。这里注意：`forEach` 方法无法通过使用 `break` 语句来中断循环。 `break` 语句用于中断循环的功能只适用于 `for` 循环或 `while` 循环这里给大家点例子吧，一下就能看懂了 ```js // 使用 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 ``` ```js const array = [1, 2, 3, 4, 5]; let sum = 0; array.forEach((element) => { if (element === 3) { break; // 使用 break 无法中断 forEach 循环 } sum += element; }); console.log(sum); // 此行代码不会执行，因为上面的代码会抛出错误 //for循环则可以 const array = [1, 2, 3, 4, 5]; let sum = 0; for (let i = 0; i < array.length; i++) { const element = array[i]; if (element === 3) { break; // 使用 break 中断 for 循环 } sum += element; } console.log(sum); // 输出: 3 ``` 作为`数组`最常见的几个`api`之一，我觉得搞懂它是有必要的，当然，我这里说的其实是不全的，因为网上的文章较多，文档也很详细，这篇文章主要的目的是帮助一些小伙伴纠正一下~ 最后，如有哪里不正确，请您指正~ ## 致谢补充这里是文章发出一段时间的致谢补充，很感谢评论区的一些建议和指正，主要是我在`forEach`这里，说出了它可以跳出循环（本次循环），大家进行了指正

挺多的哈，就不都截图了，感谢大家指出的问题！这里的确是我的表述不清，引起歧义和误导我其实想表达的意思和上面是一样的，但是我并没有表述清楚，而且选择了放代码的方式，并不直观作为一篇技术文章，应该有其严谨性，所以在这里感谢大家的指正~ 同时也欢迎大家的建议，希望您在指出的时候，可以指正地清晰一点，这样方便我进行思考和更改，为大家产出更好的文章~