面试官：当你有一个for循环时，为什么你需要forEach？

js中的循环非常多，for...infor...offorEach，有些循环感觉很像。今天我们就来讨论一下for循环和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后生成迭代器对象console.log(iterator.next())。iterator;//{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中，直到该值未定义和跳出循环，所有的Iterable对象都可以被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}console.log(iterator.next());//{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也生成一个迭代器，每个元素的值在内部回调函数中传递。（有兴趣的同学可以搜索一下forEach的源码，forEach是挂载在ArraySetMap实例上的，但是网上大部分的回答都是根据长度来判断，使用for循环机制实现的。但是在SetMap上使用的时候，会报错所以我认为是被调用的iterator，不断的调用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来实现数组去重：letarr1=[1,2,1,3,1];letarr2=[];arr1.forEach(函数(self,index,arr){arr.indexOf(self)===index?arr2.push(self):null;}）;安慰。log(arr2);//[1,2,3]forEach的中断在js中有breakreturncontinue中断函数或者跳出循环。我们会在for循环中使用一些中断行为来优化数组遍历搜索很好，但是因为forEach属于迭代器，只能顺序遍历，所以不支持上述中断行为。letarr=[1,2,3,4],i=0,length=arr.length;for(;i{console.log(self);if(self===2){break;//报错};});arr.forEach((self,index)=>{console.log(self);if(self===2){continue;//报错};});如果我必须跳出forEach中的循环怎么办？其实有办法，借助try/catch：try{vararr=[1,2,3,4];arr.forEach(function(item,index){//跳出条件if(item===3){thrownewError("LoopTerminates");}//dosomethingconsole.log(item);});}catch(e){if(e.message!=="LoopTerminates")throwe;};如果遇到return，不会报错，但是不会生效letarr=[1,2,3,4];functionfind(array,num){array.forEach((self,index)=>{if(self===num){returnindex;};});};letindex=find(arr,2);//undefinedforEach删除自己的元素，不能重新设置索引。在forEach中，我们无法控制index的值，它只会自动增加，直到大于数组长度，跳出循环。因此，也不可能通过删除自身来重置索引。我们来看一个简单的例子：letarr=[1,2,3,4]arr.forEach((item,index)=>{console.log(item);//1234index++;});index在函数体内增加或减少时不会改变。在实际开发中，遍历一个数组，同时删除一个元素是很常见的。使用forEach删除时要注意。for循环可以控制循环的起点。上面说了forEach的循环起点只能是0，没有人为干预，但是for循环不同：letarr=[1,2,3,4],i=1,length=arr.length;for(;iindex!==1);console.log(arr1)//[2]for循环和forEach的性能差异在性能比较上，我们添加了一个map迭代器，它就像过滤器一样生成一个新数组。我们比较forforEachmap在浏览器环境下的性能：性能比较：for>forEach>map在chrome62和Node.jsv9.1.0环境下：for循环比forEach快一倍，forEach比forEach快map大约快20%。原因分析：for循环没有额外的函数调用栈和上下文，所以它的实现最简单。forEach：对于forEach，其函数签名包含参数和上下文，因此性能会低于for循环。map：map之所以最慢，是因为map会返回一个新的数组，数组的创建和赋值会导致内存空间的分配，会带来很大的性能开销。如果map嵌套在循环中，会带来更多不必要的内存消耗。当你使用迭代器遍历一个数组时，如果你不需要返回一个新的数组，那么使用map是违背设计初衷的。在我的前端合作开发中，看到很多人只是用map来遍历数组：letdata=[];letdata2=[1,2,3];data2.map(item=>data.push(item));写在最后：这是面试遇到的一道题，当时只知道语法上的区别。并没有进一步从多个角度区分可迭代对象、迭代器、生成器和性能之间的异同。也希望把一个简单的问题从多个角度详细解释一下，让大家看得透彻。