forEach循环里break使用方式详解

 更新时间:2022年08月22日 14:23:16   作者:糖瓶  
这篇文章主要为大家介绍了forEach循环里break使用方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一. 在forEach里使用break 会发生什么

大家都知道 js 的 forEach里是不能使用break。但是为什么不能在forEach里使用呢?在forEach里使用break 会发生什么呢?

纸上得来终觉浅,绝知此事要躬行。要想知道发生什么,不妨在代码里验证一下。

let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
    if (item > 2) {
        break
    }
    console.log(item)
})
// SyntaxError: Illegal break statement (非法中断语句)

在控制台可以看到输出:语法错误。

二. 为什么不能在forEach里使用break

要想知道forEach里为什么不能使用break,必须先要搞清楚break的语法。

你真的了解break吗

break 表示中止当前循环。

语法:break [label];

label:与语句标签相关联的标识符。如果 break 语句不在一个循环或者Switch语句中,则该项是必须的。

我们看一个例子:

我们平时正常使用时

let arr = [1, 2, 3, 4, 5]
for (let i = 0; i < arr.length; i++) {
    if (arr[i] > 2) {
        break // 大于2 跳出整个循环
    }
    console.log(arr[i]) // 1, 2
}

break 与语句标签一起使用时

let arr = [1, 2, 3, 4, 5]
outer_block: // 标识最外层循环
for (let i = 0; i < arr.length; i++) {
    console.log('i', arr[i]) // 1
    inner_block: // 标识里面的for循环
    for (let j = 0; j < arr.length; j++) {
        if (j > 3) {
            break outer_block  // 跳出最外层循环
        }
        console.log('j', arr[j]) // 1, 2, 3, 4
    }
}

输出结果:最外层输出:1,最次层输出:1,2,3,4。可以看出brake终止循环是有条件的。我们在回来看forEach这个问题。

先看下forEach语法:

forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

是上面的定义相当于:

Array.prototype.forEach = function(callback) {
    for (let i = 0; i < this.length; i++) {
        callback(this[i], i, this);
    } 
};

可以看出:我们在forEach里使用break,其实是在callback里使用break。再明白一点,其实就是相当于你在for循环里这样写:

let arr = [1, 2, 3, 4, 5]
outer_block: 
for (let i = 0; i < arr.length; i++) {
    console.log('i', arr[i])
    inner_block1:
    (function() {
        inner_block2:
        break // 报错,不能直接使用break
    })()
}

到这里我想你已经明白了为什么不能在forEach里使用break了。回到本文的题目上来。

三.如何在forEach的循环里break?

查阅MDN,上面有一个备注:

编辑切换为居中

MDN

在forEach里合法的使用break

function breakInForEach(arr) {
	let BreakException = {};
	let res = false;
	try {
	    arr.forEach(item => {
	       if (item === 2) {
	          res = true;
		  throw BreakException;
	        }
	    })
	}
	catch(e) {
	    if (e !== BreakException) throw e
	}
	return res;
}
console.log(foreachBreak([1, 2, 3, 4, 5, 6])); // true

也可以使用every 或者 some等

最推荐的方式呢,就是这种需要break的场景下,直接使用every或者some。

  • every: 碰到return false的时候,循环中止,return true 循环继续;
  • some: 碰到return ture的时候,循环中止,return false 循环继续;

总结

本文介绍了为什么不能在forEach里使用break;在forEach里使用break 会发生什么以及怎样在forEach里使用break,更多关于forEach循环break使用的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序 支付后台java实现实例

    微信小程序 支付后台java实现实例

    这篇文章主要介绍了微信小程序 支付后台java实现实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • javascript 动态添加表格行

    javascript 动态添加表格行

    javascript 动态添加表格行...
    2006-06-06
  • Thinkphp5微信小程序获取用户信息接口的实例详解

    Thinkphp5微信小程序获取用户信息接口的实例详解

    这篇文章主要介绍了Thinkphp5微信小程序获取用户信息接口的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • 微信小程序图片选择、上传到服务器、预览(PHP)实现实例

    微信小程序图片选择、上传到服务器、预览(PHP)实现实例

    这篇文章主要介绍了微信小程序图片选择、上传到服务器、预览(PHP)实现实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • JS前端架构pnpm构建Monorepo方式管理demo

    JS前端架构pnpm构建Monorepo方式管理demo

    这篇文章主要为大家介绍了JS前端架构pnpm构建Monorepo方式的管理demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 微信小程序 网络请求(post请求,get请求)

    微信小程序 网络请求(post请求,get请求)

    这篇文章主要介绍了微信小程序 网络请求(post请求,get请求)的相关资料,需要的朋友可以参考下
    2017-01-01
  • open 打开浏览器的过程原理示例解析

    open 打开浏览器的过程原理示例解析

    这篇文章主要为大家介绍了open 打开浏览器的过程原理示例解析,
    有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 原型和原型链 prototype和proto的区别详情

    原型和原型链 prototype和proto的区别详情

    原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性,每个实例对象下都有__proto__属性,通过属性__proto__指向构造函数的原型对象,当到达末端时,返回null,这样一层一层向顶端查找,就形成了原型链
    2021-10-10
  • javascript使用btoa和atob来进行Base64转码和解码

    javascript使用btoa和atob来进行Base64转码和解码

    javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用。当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现
    2017-03-03
  • js 数组 fill() 填充方法

    js 数组 fill() 填充方法

    这篇文章主要介绍了js 数组 fill() 的填充方法,初始化数组的方法,但是初始化数组之后,数组中的每一项元素默认为 empty 空位占位,如何对数组这些空位添加默认的元素,ES6提供了 fill() 方法实现这一操作。本文总结数组 fill() 方法的详细使用,需要的朋友可以参考一下
    2021-10-10

最新评论