CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章面试官：有了 for 循环 为什么还要 forEach ？由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

js中那么多循环，for for...in for...of forEach，有些循环感觉上是大同小异今天我们讨论下for循环和forEach的差异。我们从几个维度展开讨论:

• for循环和forEach的本质区别。
• for循环和forEach的语法区别。
• for循环和forEach的性能区别。

本质区别

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 生成器，当它被调用时就会生成一个迭代器对象（Iterator Object），它有一个 .next()方法，每次调用返回一个对象{value:value,done:Boolean}，value返回的是 yield 后的返回值，当 yield 结束，done 变为 true，通过不断调用并依次的迭代访问内部的值.

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

1. let arr = [1, 2, 3, 4] // 可迭代对象
2. let iterator = arr[Symbol.iterator]() // 调用 Symbol.iterator 后生成了迭代器对象
3. console.log(iterator.next()); // {value: 1, done: false} 访问迭代器对象的next方法
4. console.log(iterator.next()); // {value: 2, done: false}
5. console.log(iterator.next()); // {value: 3, done: false}
6. console.log(iterator.next()); // {value: 4, done: false}
7. console.log(iterator.next()); // {value: undefined, done: true}

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

1. let arr = [1, 2, 3, 4]
2. for (const item of arr) {
3. console.log(item); // 1 2 3 4
4.  
5. }

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

1. function num(params) {
2. console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
3. let iterator = arguments[Symbol.iterator]()
4. console.log(iterator.next()); // {value: 1, done: false}
5. console.log(iterator.next()); // {value: 2, done: false}
6. console.log(iterator.next()); // {value: 3, done: false}
7. console.log(iterator.next()); // {value: 4, done: false}
8. console.log(iterator.next()); // {value: undefined, done: true}
9. }
10. num(1, 2, 3, 4)
11. let set = new Set('1234')
12. set.forEach(item => {
13. console.log(item); // 1 2 3 4
14. })
15. let iterator = set[Symbol.iterator]()
16. console.log(iterator.next()); // {value: 1, done: false}
17. console.log(iterator.next()); // {value: 2, done: false}
18. console.log(iterator.next()); // {value: 3, done: false}
19. console.log(iterator.next()); // {value: 4, done: false}
20. console.log(iterator.next()); // {value: undefined, done: true}

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

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

for循环和forEach的语法区别

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

1. forEach 的参数。
2. forEach 的中断。
3. forEach 删除自身元素，index不可被重置。
4. for 循环可以控制循环起点。

forEach 的参数 。

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

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

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

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

arr： 当前遍历的数组.

this： 回调函数中this指向.

1. let arr = [1, 2, 3, 4];
2. let person = {
3. name: '技术直男星辰'
4. };
5. arr.forEach(function (self, index, arr) {
6. console.log(`当前元素为${self}索引为${index},属于数组${arr}`);
7. console.log(this.name+='真帅');
8. }, person)

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

1. let arr1 = [1, 2, 1, 3, 1];
2. let arr2 = [];
3. arr1.forEach(function (self, index, arr) {
4. arr.indexOf(self) === index ? arr2.push(self) : null;
5. });
6. console.log(arr2); // [1,2,3]

forEach 的中断 。

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

1. let arr = [1, 2, 3, 4],
2. i = 0,
3. length = arr.length;
4. for (; i < length; i++) {
5. console.log(arr[i]); //1,2
6. if (arr[i] === 2) {
7. break;
8. };
9. };
10. arr.forEach((self,index) => {
11. console.log(self);
12. if (self === 2) {
13. break; //报错
14. };
15. });
16. arr.forEach((self,index) => {
17. console.log(self);
18. if (self === 2) {
19. continue; //报错
20. };
21. });

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

1. try {
2. var arr = [1, 2, 3, 4];
3. arr.forEach(function (item, index) {
4. //跳出条件
5. if (item === 3) {
6. throw new Error("LoopTerminates");
7. }
8. //do something
9. console.log(item);
10. });
11. } catch (e) {
12. if (e.message !== "LoopTerminates") throw e;
13. };

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

1. let arr = [1, 2, 3, 4];
2. function find(array, num) {
3. array.forEach((self, index) => {
4. if (self === num) {
5. return index;
6. };
7. });
8. };
9. let index = find(arr, 2);// undefined

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

在 forEach 中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子:

1. let arr = [1,2,3,4]
2. arr.forEach((item, index) => {
3. console.log(item); // 1 2 3 4
4. index++;
5. });

index不会随着函数体内部对它的增减而发生变化。在实际开发中，遍历数组同时删除某项的操作十分常见，在使用forEach删除时要注意.

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

如上文提到的 forEach 的循环起点只能为0不能进行人为干预，而for循环不同:

1. let arr = [1, 2, 3, 4],
2. i = 1,
3. length = arr.length;
4. for (; i < length; i++) {
5. console.log(arr[i]) // 2 3 4
6. };

那之前的数组遍历并删除滋生的操作就可以写成 。

1. let arr = [1, 2, 1],
2. i = 0,
3. length = arr.length;
4. for (; i < length; i++) {
5. // 删除数组中所有的1
6. if (arr[i] === 1) {
7. arr.splice(i, 1);
8. //重置i，否则i会跳一位
9. i--;
10. };
11. };
12. console.log(arr); // [2]
13. //等价于
14. var arrarr1 = arr.filter(index => index !== 1);
15. console.log(arr1) // [2]

for循环和forEach的性能区别

在性能对比方面我们加入一个 map 迭代器，它与 filter 一样都是生成新数组。我们对比 for forEach map 的性能在浏览器环境中都是什么样的:

性能比较：for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下：for 循环比 forEach 快1倍，forEach 比 map 快20%左右.

原因分析for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销.

如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。当大家使用迭代器遍历一个数组时，如果不需要返回一个新数组却使用 map 是违背设计初衷的。在我前端合作开发时见过很多人只是为了遍历数组而用 map 的:

1. let data = [];
2. let data2 = [1,2,3];
3. data2.map(item=>data.push(item));

写在最后：这是面试遇到的一个问题，当时只知道语法区别。并没有从可迭代对象，迭代器，生成器和性能方面，多角度进一步区分两者的异同，也希望能把一个简单的问题从多角度展开细讲，让大家正在搞懂搞透彻.

原文地址：https://mp.weixin.qq.com/s/_qPD0WHMM-9ZeXU2kq0DYQ 。

最后此篇关于面试官：有了 for 循环 为什么还要 forEach ？的文章就讲到这里了,如果你想了解更多关于面试官：有了 for 循环 为什么还要 forEach ？的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。