有了for循环 为什么还要forEach？，web前端开发面试技巧

for循环是js提出时就有的循环方法。forEach是ES5提出的，挂载在可迭代对象原型上的方法，例如Array Set Map。

forEach是一个迭代器，负责遍历可迭代对象。那么遍历，迭代，可迭代对象分别是什么呢。

遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。

迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。

可迭代对象：ES6中引入了 iterable 类型，Array Set Map String arguments NodeList 都属于 iterable，他们特点就是都拥有 [Symbol.iterator] 方法，包含他的对象被认为是可迭代的 iterable。

在了解这些后就知道 forEach 其实是一个迭代器，他与 for 循环本质上的区别是 forEach 是负责遍历（Array Set Map）可迭代对象的，而 for 循环是一种循环机制，只是能通过它遍历出数组。

再来聊聊究竟什么是迭代器，还记得之前提到的 Generator 生成器[1]，当它被调用时就会生成一个迭代器对象（Iterator Object），它有一个 .next()方法，每次调用返回一个对象{value:value,done:Boolean}，value返回的是 yield 后的返回值，当 yield 结束，done 变为 true，通过不断调用并依次的迭代访问内部的值。

迭代器是一种特殊对象。ES6规范中它的标志是返回对象的 next() 方法，迭代行为判断在 done 之中。在不暴露内部表示的情况下，迭代器实现了遍历。看代码

let arr = [1, 2, 3, 4]  // 可迭代对象

let iterator = arrSymbol.iterator  // 调用 Symbol.iterator 后生成了迭代器对象

console.log(iterator.next()); // {value: 1, done: false}  访问迭代器对象的next方法

console.log(iterator.next()); // {value: 2, done: false}

console.log(iterator.next()); // {value: 3, done: false}

console.log(iterator.next()); // {value: 4, done: false}

console.log(iterator.next()); // {value: undefined, done: true}

我们看到了。只要是可迭代对象，调用内部的 Symbol.iterator 都会提供一个迭代器，并根据迭代器返回的next 方法来访问内部，这也是 for...of 的实现原理。

let arr = [1, 2, 3, 4]

for (const item of arr) {

console.log(item); // 1 2 3 4

}

把调用 next 方法返回对象的 value 值并保存在 item 中，直到 done 为 true 跳出循环，所有可迭代对象可供for...of消费。再来看看其他可迭代对象：

function num(params) {

console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

let iterator = argumentsSymbol.iterator

console.log(iterator.next()); // {value: 1, done: false}

console.log(iterator.next()); // {value: 2, done: false}

console.log(iterator.next()); // {value: 3, done: false}

console.log(iterator.next()); // {value: 4, done: false}

console.log(iterator.next()); // {value: undefined, done: true}

}

num(1, 2, 3, 4)

let set = new Set(‘1234’)

set.forEach(item => {

console.log(item); // 1 2 3 4

})

let iterator = setSymbol.iterator

console.log(iterator.next()); // {value: 1, done: false}

console.log(iterator.next()); // {value: 2, done: false}

console.log(iterator.next()); // {value: 3, done: false}

console.log(iterator.next()); // {value: 4, done: false}

console.log(iterator.next()); // {value: undefined, done: true}

所以我们也能很直观的看到可迭代对象中的 Symbol.iterator 属性被调用时都能生成迭代器，而 forEach 也是生成一个迭代器，在内部的回调函数中传递出每个元素的值。

（感兴趣的同学可以搜下 forEach 源码， Array Set Map 实例上都挂载着 forEach ，但网上的答案大多数是通过 length 判断长度， 利用for循环机制实现的。但在 Set Map 上使用会报错，所以我认为是调用的迭代器，不断调用 next，传参到回调函数。由于网上没查到答案也不妄下断言了，有答案的人可以评论区给我留言）

关于循环语句可以看看：深入理解 JavaScript 之事件循环(Event Loop)

for循环和forEach的语法区别

了解了本质区别，在应用过程中，他们到底有什么语法区别呢？

1. forEach 的参数。

2. forEach 的中断。

3. forEach 删除自身元素，index不可被重置。

4. for 循环可以控制循环起点。

forEach 的参数

我们真正了解 forEach 的完整传参内容吗？它大概是这样：

arr.forEach((self,index,arr) =>{},this)

self： 数组当前遍历的元素，默认从左往右依次获取数组元素。

index： 数组当前元素的索引，第一个元素索引为0，依次类推。

arr： 当前遍历的数组。

this： 回调函数中this指向。

let arr = [1, 2, 3, 4];

let person = {

name: ‘技术直男星辰’

};

arr.forEach(function (self, index, arr) {

console.log(当前元素为${self}索引为${index},属于数组${arr});

console.log(this.name+=‘真帅’);

}, person)

我们可以利用 arr 实现数组去重：

let arr1 = [1, 2, 1, 3, 1];

let arr2 = [];

arr1.forEach(function (self, index, arr) {

arr1.indexOf(self) === index ? arr2.push(self) : null;

});

console.log(arr2);   // [1,2,3]

forEach 的中断

在js中有break return continue 对函数进行中断或跳出循环的操作，我们在 for循环中会用到一些中断行为，对于优化数组遍历查找是很好的，但由于forEach属于迭代器，只能按序依次遍历完成，所以不支持上述的中断行为。

let arr = [1, 2, 3, 4],

i = 0,

length = arr.length;

for (; i < length; i++) {

console.log(arr[i]); //1,2

if (arr[i] === 2) {

break;

};

};

arr.forEach((self,index) => {

console.log(self);

if (self === 2) {

break; //报错

};

});

arr.forEach((self,index) => {

console.log(self);

if (self === 2) {

continue; //报错

};

});

如果我一定要在 forEach 中跳出循环呢？其实是有办法的，借助try/catch：

try {

var arr = [1, 2, 3, 4];

arr.forEach(function (item, index) {

//跳出条件

if (item === 3) {

throw new Error(“LoopTerminates”);

}

//do something

console.log(item);

});

} catch (e) {

if (e.message !== “LoopTerminates”) throw e;

};

若遇到 return 并不会报错，但是不会生效

let arr = [1, 2, 3, 4];

function find(array, num) {

array.forEach((self, index) => {

if (self === num) {

return index;

};

});

};

let index = find(arr, 2);// undefined

forEach 删除自身元素，index不可被重置

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！**

篇幅有限，仅展示部分内容