纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

JS forEach跳出循环 JS面试题之forEach能否跳出循环详解

茶无味的一天   2021-06-11 我要评论
想了解JS面试题之forEach能否跳出循环详解的相关内容吗,茶无味的一天在本文为您仔细讲解JS forEach跳出循环的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jsforeach跳出循环,foreach怎样跳出循环,javascript跳出循环,下面大家一起来学习吧。

当年懵懂无知的我被问到这个问题时,脑袋一片空白,当然也没答对,一直以来我对forEach都有一种错误的理解,由于它比原始的for循环简洁许多,导致我一度认为那是为了方便书写所创造出来的语法糖,在业务中也经常使用,但从没考虑过这种方式存在的问题。

forEach使用说明

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=example

arr.forEach(function callback(currentValue, index, array) {
    //your iterator
}[, thisArg]);
  • currentValue --- 当前处理的元素
  • index --- 当前处理元素的索引
  • array ---forEach应用的数组

有一段提示写到了在forEach中break和return的用法。原文如下:

There is no way to stop or break a forEach()loop other than by throwing an exception. If you need such behavior, theforEach()method is the wrong tool. Use a plain loop instead. If you are testing the array elements for a predicate and need a Boolean return value, you can useevery() or
some() instead. If available, the new methodsfind() or findIndex() can be used for early termination upon true predicates as well.

意思就是说在forEach中使用break和return是错误的,如果希望使用break或者return请使用every或者some函数。

那么回到标题,首先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
};

当然,使用try-catch包裹时,当循环体过大性能会随之下降,这是无法避免的,所以抛出异常并不是解决forEach问题的银弹,我们回归到开头写的那段伪代码,我们对它进行一些优化,在真正的for循环中加入对传入函数的判断:

Array.prototype.forEach = 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.forEach(element => {
    if (element === 'stop') return false
    console.log(element); // 输出 0 1 后面不输出
});

console.log('return即为continue:');
arr.forEach(element => {
    if (element === 'stop') return
    console.log(element); // 0 1 3 4
});

文档中还提到forEach需要一个同步函数,也就是说在使用异步函数或Promise作为回调时会发生预期以外的结果,所以forEach还是需要慎用或者不要使用,当然这并不意味着项目开发中要一直用简单的for循环去完成一切事情,我们可以在遍历数组时使用for..of..,在遍历对象时使用for..in..,而官方也在forEach文档下列举了其它一些工具函数:

Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.every()
Array.prototype.some()

根据不同的业务场景,选择使用对应的工具函数来更有效地处理业务逻辑,至于forEach,我想就从此相忘于江湖吧。

总结


相关文章

猜您喜欢

  • vue封装axios vue中怎样简单封装axios浅析

    想了解vue中怎样简单封装axios浅析的相关内容吗,再敲一行就睡觉在本文为您仔细讲解vue封装axios的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue封装axios,axios请求封装,vue封装axios请求,下面大家一起来学习吧。..
  • Mybatis下拉列表二级联动 Mybatis + js 实现下拉列表二级联动效果

    想了解Mybatis + js 实现下拉列表二级联动效果的相关内容吗,Yan Yang在本文为您仔细讲解Mybatis下拉列表二级联动的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Mybatis下拉列表二级联动,js二级联动,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.bluedown.net 【蓝色下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式