这篇文章主要介绍“es6中for和foreach的区别有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6中for和foreach的区别有哪些”文章能帮助大家解决问题。 区别:1、forEach是一个迭代器,是负责遍历(Array Set Map)可迭代对象的;而for是一种循环机制,只是能通过它遍历出数组。2、for循环中会用到一些中断行为,对于优化数组遍历查找是很好的,但由于forEach属于迭代器,只能按序依次遍历完成,所以不支持中断行为。3、forEach的循环起点只能为0,且不能进行人为干预;而for循环不同,可以人为控制循环起点。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
循环是一种循环机制,只是能通过它遍历出数组。什么是迭代器,当它被调用时就会生成一个迭代器对象(Iterator Object),它有一个 .next()
方法,每次调用返回一个对象{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
方法返回对象的 value
值并保存在 item
中,直到 value
为 undefined
跳出循环,所有可迭代对象可供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
也是生成一个迭代器,在内部的回调函数中传递出每个元素的值for
循环和forEach
的语法区别了解了本质区别,在应用过程中,他们到底有什么语法区别呢?forEach
的参数。forEach
的中断。forEach
删除自身元素,index不可被重置。for
循环可以控制循环起点。我们真正了解 forEach
的完整传参内容吗?它大概是这样:
arr.forEach((self,index,arr)=>{},this)
self: 数组当前遍历的元素,默认从左往右依次获取数组元素。index: 数组当前元素的索引,第一个元素索引为0,依次类推。arr: 当前遍历的数组。this: 回调函数中this指向。
letarr=[1,2,3,4]; arr.forEach(function(self,index,arr){ console.log(`当前元素为${self}索引为${index},属于数组${arr}`); },person)
我们可以利用 arr
实现数组去重:
letarr1=[1,2,1,3,1]; letarr2=[]; arr1.forEach(function(self,index,arr){ arr.indexOf(self)===index?arr2.push(self):null; }); console.log(arr2);//[1,2,3]
在js中有b免费云主机、域名reak
return
continue
对函数进行中断或跳出循环的操作,我们在 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"); } //dosomething console.log(item); }); }catch(e){ if(e.message!=="LoopTerminates")throwe; };
如果我一定要在 forEach
中跳出循环呢?其实是有办法的,借助try/catch
:若遇到 return
并不会报错,但是不会生效
letarr=[1,2,3,4]; functionfind(array,num){ array.forEach((self,index)=>{ if(self===num){ returnindex; }; }); }; letindex=find(arr,2);//undefined
在 forEach
中我们无法控制 index
的值,它只会无脑的自增直至大于数组的 length
跳出循环。所以也无法删除自身进行index
重置,先看一个简单例子:
letarr=[1,2,3,4] arr.forEach((item,index)=>{ console.log(item);//1234 index++; });
index
不会随着函数体内部对它的增减而发生变化。在实际开发中,遍历数组同时删除某项的操作十分常见,在使用forEach
删除时要注意。如上文提到的 forEach
的循环起点只能为0不能进行人为干预,而for
循环不同:
letarr=[1,2,3,4], i=1, length=arr.length; for(;i
那之前的数组遍历并删除滋生的操作就可以写成
letarr=[1,2,1], i=0, length=arr.length; for(;iindex!==1); 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
是违背设计初衷的。关于“es6中for和foreach的区别有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。
这篇文章主要介绍了Vue.js中的会话数据怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue.js中的会话数据怎么使用文章都会有所收获,下面我们一起来看看吧。 Vue.js中的会话概述会话是Web应用程序中的一种机制,可…