本文详细解析JavaScript中Array.forEach方法的用法，包括其回调函数的三个参数、this指向规则及如何手动实现该功能。文章探讨了通过call改变this指向的技巧，并说明了forEach无法通过return或break跳出循环的限制，以及使用异常处理模拟跳出的方案。
前言
关于forEach()方法，它会对数组中的每个元素执行一次提供的回调函数。
在回调函数中，可以接收三个参数：
- 第一个参数代表当前正在遍历的数组元素。
- 第二个参数代表当前元素的索引值。
- 第三个参数代表当前正在被遍历的整个数组对象。
代码示例
var list = ["云层上的光", "初心", "栾树"];
list.forEach(function(item, index, array){
console.log(item,index,array)
});
运行上述代码后，控制台将输出以下内容：
那我就好奇了，在forEach回调函数中的this指向谁呢？forEach函数是否有返回值
var list = ["云层上的光", "初心", "栾树"];
var value = list.forEach(function(item, index, array){
console.log(this);
});
console.log(value);
通过测试可以发现，this指向的是全局对象window，而forEach方法本身不返回任何值，其返回结果为undefined。
那么，我们是否可以手动修改this的指向呢？
是的，forEach方法接受两个参数，其中第二个参数为可选。当执行回调函数时，该参数将作为this的值传入。
手动实现forEach
Array.prototype.myForEach = function (callback) {
var _arr = this,// 调用时谁 this就是谁
_len = _arr.length,
thisArg = arguments[1] || window;
// 校验callback之能是 function时才往下执行
if (typeof callback !== 'function') {
throw new Error(`${callback} is not a function`);
}
// for循环
for (var i = 0; i < _len; i++) {
callback.apply(thisArg, [_arr[i], i, _arr]);
}
// 注意 forEach 没有返回值
}
模拟类数组对象调用
由于普通对象的原型链上并没有Array.prototype.forEach方法，我们可以利用call方法将this的指向强制改变。在myForEach函数的内部实现中，需要依赖length属性来进行循环控制，因此我们在模拟对象中添加了length属性。该对象的键名分别为0、1、2，分别对应数组遍历时的索引下标。
const arrayLike = {
length: 3,
0: 2,
1: 3,
2: 4,
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
如何跳出forEach循环？
在forEach的回调函数中，普通的return语句和break语句均无法跳出循环。不过，可以通过抛出异常的方式，即使用throw new Error来强制终止循环。
var list = ["云层上的光", "初心", "栾树"];
try{
list.forEach(item=>{
if(item === "初心") throw new Error("初心");
})
}catch(err){
if(err.message === "初心")
console.log("在执行到初心时跳出循环体了")
else
console.error(err)
}以上便是关于JavaScript中Array.forEach方法的详细解析，更多关于JavaScript数组操作的内容，欢迎查阅本站其他相关文章。