作者：科技直男明星\来源：juejin.cn/post/7018097650687803422jsjs中有很多循环，for...infor...offorEach，有些循环感觉很像，今天我们将讨论forloop和forEach的区别。我们从几个维度来讨论：for循环和forEach的本质区别。for循环和forEach的语法区别。for循环和forEach的性能差异。本质上的区别在于，for循环是js提出时就存在的一种循环方式。forEach是ES5提出的一种挂载在可迭代对象原型上的方法，比如ArraySetMap。forEach是一个迭代器，负责遍历可迭代对象。那么什么是遍历、迭代、可迭代对象呢？遍历：指对数据结构的每个成员进行定时、一次性访问的行为。迭代：迭代是递归的一种特殊形式。它是迭代器提供的一种方法。默认情况下，它按照一定的顺序一个一个地访问数据结构成员。迭代也是一种遍历行为。可迭代对象：在ES6中引入了可迭代类型，ArraySetMapStringargumentsNodeList都属于可迭代对象，它们的特点是都有[Symbol.iterator]方法，包含它的对象被认为是可迭代的可迭代对象。了解了这些就知道forEach其实就是一个迭代器。它和for循环的本质区别是forEach负责遍历(ArraySetMap)可迭代对象，而for循环是一种循环机制，只能通过它。出数组。让我们谈谈什么是迭代器。还记得前面提到的Generator生成器吗。当它被调用时，会生成一个迭代器对象（IteratorObject）。它有一个.next()方法，每次调用返回一个Object{value:value,done:Boolean}，value返回yield后的返回值，当yield结束时，done变为true，通过不断调用获取内部值和顺序迭代。迭代器是一种特殊的对象。在ES6规范中，它的符号是返回对象的next()方法，在done中判断迭代行为。迭代器在不暴露内部表示的情况下实现遍历。看代码letarr=[1,2,3,4]//可迭代对象letiterator=arr[Symbol.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的实现原理。letarr=[1,2,3,4]for(constitemofarr){console.log(item);//1234}调用next方法返回对象的值，保存在item中，直到Ifvalueundefined，跳出循环，所有可迭代对象都可以被for...of消费。让我们看看其他可迭代对象：functionnum(params){console.log(arguments);//Arguments(6)[1,2,3,4,callee:?,Symbol(Symbol.iterator):?]letiterator=arguments[Symbol.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}控制台。日志（迭代器。下一个（））；//{value:undefined,done:true}}num(1,2,3,4)letset=newSet('1234')set.forEach(item=>{console.log(item);//1234})letiterator=set[Symbol.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还生成一个迭代器，在内部回调函数中传递每个元素的值（有兴趣的同学可以搜索Each源码，forEach是挂载在ArraySetMap实例上的，不过网上大部分的回答都是通过length来使用的）判断长度，使用for循环机制实现，但是用在SetMap上会报错，所以我认为是调用的迭代器，不断调用next，将参数传给回调函数.由于网上没有找到答案，我就不下定论了，有答案的可以在评论区留言）for循环和forEach的语法区别理解本质区别。在应用过程中，它们在语法上有什么区别？forEach的参数。forEach的中断。forEach删除自己的元素，索引无法重置。for循环可以控制循环的起点。forEach的参数我们真的知道forEach完整的参数内容吗？大致是这样的：arr.forEach((self,index,arr)=>{},this)self：数组当前遍历的元素，默认从左到右依次获取数组元素。index：数组当前元素的索引，第一个元素的索引为0，以此类推。arr：当前遍历的数组。this：回调函数中的this点。letarr=[1,2,3,4];letperson={name:'技术直男明星'};arr.forEach(function(self,index,arr){console.log(`当前元素为${self}的索引为${index}，属于数组${arr}`);console.log(this.name+='真帅');},person)我们可以使用arr来实现数组去重:让arr1=[1,2,1,3,1];让arr2=[];arr1.forEach(function(self,index,arr){arr.indexOf(self)===index?arr2.push(self):null;});console.log(arr2);//[1,2,3]forEach中断在js中有breakreturncontinue中断函数或者跳出循环。我们会在for循环中使用一些中断行为，对于优化数组遍历查找很有好处，但是因为forEach属于iterator，只能顺序遍历，所以不支持上面的中断行为。让arr=[1,2,3,4],i=0,length=arr.length;for(;i
