JavaScript中forEach()方法return探究

前端学习 评论

本篇摘要

在对数组进行遍历时，forEach()方法比for循环使用起来更加简洁。
然而，在某次实践中使用forEach()方法对数组元素进行遍历，发现return方法并未像for循环那样终止函数执行，故进行探究记录：

回顾JS基础，forEach()本身是不支持的 continue 与 break 语句的，因此需要通过其他方法实现。
进一步观察forEach()的实现方法，意识到forEach是通过为每个元素形成一个执行函数，在函数内进行相关操作。而函数体内，break和continue是无法使用的。 return关键字也仅仅是结束了单个元素的执行函数，并未结束掉forEach()这个方法。

通过了解，对数组的遍历操作可使用如下方法实现：

forEach()的break及continue实现

使用return实现continue

在forEach执行函数中使用return关键字退出当前执行函数，forEach()自动为下一个元素开启新的执行函数，即可实现continue的效果

1
2
3
4
5
6
7
8
9
10
function logNumber() {
	let testArray = [1,2,3,4,5];
	testArray.forEach(item  => {
		if (item == 3) {
			return false
		}
		console.log(item);
	});
}
logNumber();

执行结果：1,2,4,5

使用try...catch实现break

将forEach()放在try...catch结构中，通过抛出异常，在更高的执行级别上终止代码运行，即可实现break的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function logNumber() {
	let testArray = [1,2,3,4,5];
	try {
		testArray.forEach(item  => {
			if (item == 3) {
				throw  new  Error('break');
			}
			console.log(item);
		});
	} catch (error) {
		return  false;
	}
}
logNumber();

执行结果：1,2

除了forEach()，还有其他方法可以实现对数组的遍历：

some()方法遍历数组

  • some：对数组中每一项运行给定函数，若返回false，则跳过当前循环，若所有循环均返回false，则函数返回false；若返回true，则终止some遍历，函数返回true；

some()中实现continue

通过对特定元素返回false，跳过当前循环

1
2
3
4
5
6
7
8
function  logNumber() {
	let testArray = [1,2,3,4,5];
	testArray.every(item=>{
		if(item == 3) return false;
		console.log(item);
	})
}
logNumber();

执行结果：1,2,4,5

some()中实现break

通过对当前元素返回true，停止some()方法的执行

1
2
3
4
5
6
7
8
function  logNumber() {
	let testArray = [1,2,3,4,5];
	testArray.some(item=>{
		if(item == 3) return true;
		console.log(item);
	})
}
logNumber();

执行结果：1,2

some()方法可以理解为：寻找符合条件的，只要找到了（返回true），就停止寻找并报告找到了（函数返回值true）；否则就一直找下去，全部找完都没有符合的，报告未找到（函数返回false）

every()方法遍历数组

  • every：对数组中每一项运行给定函数，只有每一项都返回true，函数最终才返回true ；只要有一项不是true就会退出循环，函数返回false；

every()实现break

因为every()需要返回true才能继续执行，因此天生自带break效果，只需要返回非true的内容即可触发

1
2
3
4
5
6
7
function  logNumber() {
	testArray.every(item=>{
		console.log(item);
		if(item == 3) return true;
	})
}
logNumber();

执行结果：1

every()方法可以理解为：为所有元素进行检查，只要有不合格的（返回false），整组都不合格，不再继续检查

需要注意的是，foreach、some、every中对item的操作均不改变原数组，需要的话可以借助index对原数组进行操作。

参考内容：
JavaScript forEach() 方法 | 菜鸟教程 (runoob.com)
Javascript的坑：函数里forEach使用return语句_Mr_Eagle的博客-CSDN博客_foreach return
foreach()中return初探_小丁冲鸭！的博客-CSDN博客_foreach return
如何中断forEach循环 - 简书 (jianshu.com)

枫与风