面试官问我JS中forEach能不能跳出循环
source link: https://juejin.cn/post/6971972782292729886
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
面试官问我JS中forEach能不能跳出循环
这是我参与更文挑战的第10天,活动详情查看 更文挑战
当年懵懂无知的我被问到这个问题时,脑袋一片空白,因为我一度认为forEach只是为了方便书写所创造出来的语法糖,在业务代码中也经常使用,但没有思考过它存在的问题,本文旨在记录自己的心路历程,抛砖引玉,如果对你有所帮助那就更好啦。
那么回到标题,首先forEach是不能使用任何手段跳出循环的,想知道问题答案的看官此时可以不用继续看了。
为什么呢?我们知道forEach接收一个函数,它一般有两个参数,第一个是循环的当前元素,第二个是该元素对应的下标,手动实现一下伪代码:
Array.prototype.myForEach = function (fn) {
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this);
}
}
复制代码
forEach是不是真的这么实现我无从考究,但是以上这个简单的伪代码确实满足forEach的特性,而且也很明显就是不能跳出循环,因为根本没有办法操作到真正的for循环体。
后来经过查阅文档,发现官方对forEach的定义根本不是我认为的语法糖,它的标准说法是forEach为每个数组元素执行一次你所提供的函数。官方文档也有这么一段话:
除抛出异常之外,没有其他方法可以停止或中断循环。如果您需要这种行为,则该forEach()方法是错误的工具。
使用抛出异常来跳出foreach循环
let arr = [0, 1, "stop", 3, 4];
try {
arr.forEach(element => {
if (element === "stop") {
throw new Error("forEachBreak");
}
console.log(element); // 输出 0 1 后面不输出
});
} catch (e) {
console.log(e.message); // forEachBreak
};
复制代码
那么可不可以认为,forEach可以跳出循环,使用抛出异常就可以了?这点我认为仁者见仁智者见智吧,在forEach的设计中并没有中断循环的设计,而使用try-catch包裹时,当循环体过大性能会随之下降,这是无法避免的,所以抛出异常可以作为一种中断forEach的手段,但并不是为解决forEach问题而存在的银弹。
再次回归到开头写的那段伪代码,对它进行一些优化,在真正的for循环中加入对传入函数的判断:
// 为避免争议此处不再覆写原有forEach函数
Array.prototype.myForEach = function (fn) {
for (let i = 0; i < this.length; i++) {
let ret = fn(this[i], i, this);
if (typeof ret !== "undefined" && (ret == null || ret == false)) break;
}
}
复制代码
这样的话就能根据return值来进行循环跳出啦:
let arr = [0, 1, "stop", 3, 4];
arr.myForEach(x => {
if (x === 'stop') return false
console.log(x); // 输出 0 1 后面不输出
});
// return即为continue:
arr.myForEach(x => {
if (x === 'stop') return
console.log(x); // 0 1 3 4
});
复制代码
文档中还提到forEach需要一个同步函数,也就是说在使用异步函数或Promise作为回调时会发生预期以外的结果,所以forEach还是需要慎用。
当然,用简单的for循环去完成一切事情也不失为一种办法,代码首先是写给人看的,附带能在机器上运行的作用,forEach在很多时候用起来更加顺手,但也务必在理解JS如何设计这些工具函数的前提下来编写我们的业务代码。
我们可以在遍历数组时使用for..of..
,在遍历对象时使用for..in..
,而官方也在forEach文档下列举了其它一些工具函数,这里不做过多展开:
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.every()
Array.prototype.some()
复制代码
如何根据不同的业务场景,选择使用对应的工具函数来更有效地处理业务逻辑,才是我们真正应该思考的,或许这也是面试当中真正想考察的吧。
Recommend
-
17
写在前面 当今互联网领域,不管是APP还是H5,不管是微信端还是小程序,只要是一款像样点的产品,为了增加用户的交互感和用户粘度,多多少少都会涉及到聊天功能。而对于Web端与H5来说,实现聊天最简单的就是使用WebSocket了。而...
-
4
[Java]面试官你能不能别问我 HashMap 了? 2020-11-29 | 2020-12-05 ...
-
6
面试官的那些套路,阿粉摸的都透透的 如果你是个 Java 程序员,那一定对 HashMap 不陌生,巧的是只要你去面试,大概率都会被问到 HashMap 的相关内容 那这篇文章你就一定要读一读了 HashMap 的底层数据结构 先来聊聊 HashMa...
-
9
在forEach中,不能使用 continue 和 break ,可以使用 return 或 return false 跳出循环,效果与 for 中 continue 一样。注意该方法无法一次结束所有循环。跳出本次循环forEach 跳出本次循环,使用return [1,2,3,4,5].forEac...
-
9
你的工作和生活状态是这样的吗? 上班,领导派活,编码(可能是任务 X)、测试(可能是任务 Y)、解 Bug (可能是任务 Z)、开会(可能是任务 W),下班,打游戏或追剧或逛街,周末出去 HIGH 一下,周一再去上班…… 今天忘了昨...
-
0
js 跳出循环/结束遍历的方法发布于 35 分钟前该篇文章使用的测试数据:const a = [1, 2, 3, 4, 5]; const b = [11, 12, 13, 2, 14, 15];for...
-
4
【JavaScript实用技巧(一)】循环遍历与跳出循环遍历博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!一想到想到...
-
4
原创:微信公众号 码农参上,欢迎分享,转载请保留出处。 前几天,一个小伙伴告诉我,他在面试的时候被面试官问了这么一个问题: 在for循环中,到底应该用 i++...
-
3
孩子问我「大家用爆竹吓跑了年兽,能不能也把新冠病毒吓跑?」该怎么给她解释这个问题?大人请回答...
-
4
js foreach循环使用return跳出循环及返回值无效 for循环使用有效 一次项目中使用forEach进行遍历,达到某一条件,希望跳出循环,代码不继续执行。
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK