jsforeach语句(JS面试题之forEach能否跳出循环详解)
jsforeach语句
JS面试题之forEach能否跳出循环详解当年懵懂无知的我被问到这个问题时,脑袋一片空白,当然也没答对,一直以来我对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,我想就从此相忘于江湖吧。
总结
到此这篇关于JS面试题之forEach能否跳出循环的文章就介绍到这了,更多相关JS forEach跳出循环内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- docker前端项目(Docker部署Nuxt.js项目的实现)
- js复制内容到剪贴板
- js中alert加参数写法(详解JavaScript Alert函数执行顺序问题)
- nodejs json文件读写(nodejs将JSON字符串转化为JSON对象报错的解决)
- Extjs menu菜单的简单用法
- js分号的使用
- js轮播图片(JS实现简单图片轮播效果)
- js中拼接字符串的几种方法
- mysql的json格式解析(mysql json格式数据查询操作)
- html markdown 超链接对比(html+js 实现markdown编辑器效果)
- 微信发送镭射效果代码(JS实现微信"炸屎"大作战功能)
- java上传图片压缩包(js实现多张图片打包成zip)
- JS动态操作select的option
- SQLServer中JSON文档型数据的查询问题解决(SQLServer中JSON文档型数据的查询问题解决)
- python class转json(Python对象转换为json的方法步骤)
- js Date对象
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
热门推荐
- MVC 使用FileResult导出文件
- SQL SERVER中查看一个数据库的表结构及字段
- 详解如何获取localStorage最大存储大小的方法(详解如何获取localStorage最大存储大小的方法)
- 阿里云ecs和轻量服务器(阿里云ECS服务器入门使用流程推荐)
- python定时任务(Python使用crontab模块设置和清除定时任务操作详解)
- python下划线怎么用(Python3中_下划线和__双下划线的用途和区别)
- 云服务器ecs更换可用区(在阿里云管理控制台重置ECS实例的密码并重启服务器后无法访问该服务器)
- python图片模板匹配(python实现简单图片物体标注工具)
- mysql快速创建索引(MySQL创建高性能索引的全步骤)
- react 查看word文件(React实现导入导出Excel文件)