朋友你不会还不知道forEach方法不能终止的结论吧

forEach是我们在日常工作中经常使用到的方法,但是你有什么尝试使用forEach进行停止终止等操作呢?今天我就遇到了这个问题,借此来剖析一下。

一、走进forEach

之前对于forEach了解的并不多,只知道它可以遍历数组,如果有这么一个操作: 一个数组[0, 1, 2, 3, 4, 5],打印出[0, 1, 2, 3],对于聪明的我可能会这样写。

1.1 尝试return

js 复制代码
const arr = [0, 1, 2, 3, 4, 5];
const newArr = [];

arr.forEach(item => {
	newArr.push(item);
	if (item === 3) {
		return false;
	}
})

console.log(newArr); // ???

哈哈,你可能会像我一样可爱,但是打印的结果不尽人意,还是 [0, 1, 2, 3, 4, 5]。为什么会这样呢?

首先我们得出了一个结论,forEach不能通过return终止运行

1.2 尝试break

我们在尝试一下for循环中的break,看看效果会不会好一点。

js 复制代码
const arr = [0, 1, 2, 3, 4, 5];
const newArr = [];

arr.forEach(item => {
	newArr.push(item);
	if (item === 3) {
		break; // SyntaxError: Illegal break statement
	}
})

console.log(newArr); // ???

结果报错了:语法错误,非法的break语句。

二、剖析forEach

对于上边的结果,我很是不解,所以我们就来看一看forEach实现原理到底是怎么样的,我猜想万变不离其宗,说到底还是for循环

2.1 forEach使用

js 复制代码
const arr = [0, 1, 2, 3, 4, 5];

arr.forEach((item, index, arr) => {
	console.log(item, index, arr);
})

遍历的三个值分别为:值、下标、调用方法的数组对象

2.2 forEach分析

我们先来看一下forEach的特点,为此我专门去MDN上看了一下,得到了以下信息:

js 复制代码
forEach(callbackFn)
  1. 首先接收一个回调callbackFn,回调用三个参数(element, index, array)
    • element:数组中正在处理的当前元素;
    • index:数组中正在处理的当前元素的索引;
    • array:调用了 forEach() 的数组本身。
  2. 函数没有返回值,默认为undefined

2.3 自定义myForEach

  1. 这里我把自己定义的方法写在数组的原型上,好处就是可复用性, 根据上边得到的信息,我们需要接收一个回调函数(fn),通过for循环改变fn的this指向,具体代码如下: 下面我们来简单分析一下

    js 复制代码
    Array.prototype.myForEach = function (fn) {
    	for (let i = 0; i < this.length; i ++) {
    		fn.call(this, this[i], i, this);
    	}
    }
  2. 使用一下自己写好的myForEach看一下打印的结果

    js 复制代码
    const arr = [0, 1, 2, 3, 4, 5];
    
    arr.myForEach((item, index, arr) => {
    	console.log(item, index, arr);
    })

    不能说完全相同只能说是一模一样

2.4 深入解析forEach

通过2.3我们可以看到我们的for循环中是一个函数执行,我们最开始的写法就是说我们的returnbreak是写在了我们的fn中。于是我们就想到了下边这种情况它可以终止吗:

js 复制代码
const arr = [0, 1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i ++) {
	fn(arr[i], i, arr);
}

function fn (item, index, array) {
	console.log(item, index, arr);
	if (item === 3) {
		return false;
	}
}

显然这样是不可以的,所以forEach不能停止

三、改造myForEach

题外话:我这可能属于是吃饱了没事情做,哈哈

3.1 想法

试想一下,我们能不能通过改造一下我们自己定义的myForEach方法,来达到满足我们的要求,相信聪明的你也能够想到,让for循环终止,我就简单写一下自己的想法把,我们让fn有返回值,在for循环中通过flag变量接收。

3.2 代码实现

js 复制代码
Array.prototype.myForEach = function (fn) {
  for (let i = 0; i < this.length; i++) {
    const flag = fn.call(this, this[i], i, this);
    if (flag) {
      break
    }
  }
}

const arr = [0, 1, 2, 3, 4, 5];

arr.myForEach((item, index, array) => {
  console.log(item, index, array)
  if (item === 3) {
    return true
  }
})

ok!完成

四、总结

通过今天的学习,相信自己以后在遇到类似的问题一定会游刃有余。我总是强调基础很重要,学习基础也是一种美。

相关推荐
半桔15 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
开开心心就好27 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享28 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript