面试官问我JS中forEach能不能跳出循环

简介: 当年懵懂无知的我被问到这个问题时,脑袋一片空白,因为我一度认为forEach只是为了方便书写所创造出来的语法糖

当年懵懂无知的我被问到这个问题时,脑袋一片空白,因为我一度认为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()

如何根据不同的业务场景,选择使用对应的工具函数来更有效地处理业务逻辑,才是我们真正应该思考的,或许这也是面试当中真正想考察的吧。

相关文章
|
1月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
34 6
JS循环for、for...of、for...in
|
1月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
40 3
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
42 2
JavaScript基础知识-流程控制之while循环
|
15天前
|
JavaScript 前端开发
js循环有几种
js循环有几种
26 0
|
1月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
1月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
43 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
19天前
|
C语言
经典面试题:嵌入式系统中经常要用到无限循环,怎么样用C编写死循环呢
在嵌入式系统开发中,无限循环常用于持续运行特定任务或监听事件。使用C语言实现死循环很简单,可以通过`while(1)`或`for(;;)`的结构来编写。例如:`while (1) { /* 循环体代码 */ }`,这种写法明确简洁,适用于需要持续执行的任务或等待中断的场景。
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
1月前
|
JavaScript 前端开发 索引
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
37 1
JavaScript基础知识-forEach循环