专业建设网站公司哪家好,免费自己制作音乐,河源盛世网站建设,网上服务大厅登录入口前端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;前端面试题库
【国庆头像】- 国庆爱国 程序员头像#xff01;总有一款适合你#xff01;
前言
为什么要写这么一篇文章#xff0c;原因是今天下午水群的时候面试必备 推荐★★★★★
地址前端面试题库
【国庆头像】- 国庆爱国 程序员头像总有一款适合你
前言
为什么要写这么一篇文章原因是今天下午水群的时候有个小伙伴分享自己的面试题其中一个是foreach和map的区别其实是蛮简单蛮基础的一道题但是他是这么回答的 一个会改变原数组一个不会 我当场就懵了我以为是整活谁知道是认真的并且给我发了一篇文章 我看完更蚌埠住了那么多对的文章你偏偏挑个错的
然后我发现真的很多人都这么认为的那这真的是一件很可怕的事情明明你自己试一下就知道了甚至有不少文章都是这么写的但是我也看到了不错的文章写的已经不错了
那么咱们就这个简单的问题咱们浅浅地说一下~
区别
map会返回一个新的数组而forEach不会
简单的区别我们可以在MDN上看看 简单来说什么意思map会返回一个新的数组而forEach不会实际上是因为forEach不会返回任何值实际上返回的是undefined而map 是有返回值的是一个新数组
我们可以简单手写一下看的会更直观一些
map
function myMap(array, callback) {const result [];for (let i 0; i array.length; i) {result.push(callback(array[i], i, array));}return result;
}forEach
function myForEach(array, callback) {for (let i 0; i array.length; i) {callback(array[i], i, array);}
}再简单点对比 forEach 和 map 的实现原理相似。它们都是通过遍历数组对数组的每个元素执行特定的函数。区别主要在于它们处理函数返回值的方式不同。forEach 忽略函数的返回值而 map 则将函数的返回值收集到一个新的数组中。 在内部这两个函数可能会使用一个类似于下面的for循环来遍历数组
for (let i 0; i array.length; i) {callback(array[i], i, array); // callback 是 forEach 或 map 的参数函数
}在 map 的内部实现中还会有一个新的数组用于收集每次调用回调函数的结果。这个新的数组最后会被返回
let newArray [];
for (let i 0; i array.length; i) {newArray.push(callback(array[i], i, array)); // callback 是 map 的参数函数
}
return newArray;那么这个时候有人可能会想那我使用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它们在栈内存中直接存储变量与值
我们再回头看这个 为什么他这个修改了呢 因为使用的是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,5sum1 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); // 输出: 30const 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这里说出了它可以跳出循环本次循环大家进行了指正 前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
【国庆头像】- 国庆爱国 程序员头像总有一款适合你
