0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

for循环和forEach的差异

Android编程精选 来源:稀土掘金技术社区 作者:技术直男星辰 2022-10-11 11:10 次阅读

本质区别

for循环和forEach的语法区别

for循环和forEach的性能区别

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

for循环和forEach的本质区别。

for循环和forEach的语法区别。

for循环和forEach的性能区别。

本质区别

for循环是js提出时就有的循环方法。forEach是ES5提出的,挂载在可迭代对象原型上的方法,例如ArraySetMap。forEach是一个迭代器,负责遍历可迭代对象。那么遍历迭代可迭代对象分别是什么呢。

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

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

可迭代对象:ES6中引入了iterable类型,ArraySetMapStringargumentsNodeList都属于iterable,他们特点就是都拥有[Symbol.iterator]方法,包含他的对象被认为是可迭代的iterable。

a0a51702-3bfd-11ed-9e49-dac502259ad0.jpg

图片

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

再来聊聊究竟什么是迭代器,还记得之前提到的 Generator 生成器,当它被调用时就会生成一个迭代器对象(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也是生成一个迭代器,在内部的回调函数中传递出每个元素的值。

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

for循环和forEach的语法区别

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

forEach的参数

forEach的中断。

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

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(function(self,index,arr){
arr.indexOf(self)===index?arr2.push(self):null;
});
console.log(arr2);//[1,2,3]
a0adf30e-3bfd-11ed-9e49-dac502259ad0.jpg
图片

forEach的中断

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

letarr=[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{
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;
};

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

letarr=[1,2,3,4];functionfind(array,num){array.forEach((self,index)=>{if(self===num){returnindex;};});};letindex=find(arr,2);//undefined

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

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

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

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

for循环可以控制循环起点

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

letarr=[1,2,3,4],
i=1,
length=arr.length;

for(;i< length; i++) {
    console.log(arr[i]) // 2 3 4
};

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

letarr=[1,2,1],
i=0,
length=arr.length;

for(;i< length; i++) {
    // 删除数组中所有的1
    if (arr[i] === 1) {
        arr.splice(i, 1);
        //重置i,否则i会跳一位
        i--;
    };
};
console.log(arr); // [2]
//等价于
var arr1 = arr.filter(index =>index!==1);
console.log(arr1)//[2]

for循环和forEach的性能区别

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

性能比较: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的:

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

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

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 循环
    +关注

    关注

    0

    文章

    92

    浏览量

    15973
  • 迭代器
    +关注

    关注

    0

    文章

    43

    浏览量

    4307

原文标题:面试官:有了 for 循环 为什么还要 forEach ?

文章出处:【微信号:AndroidPush,微信公众号:Android编程精选】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    重点介绍所有综合编译器都支持的for和repeat循环

    循环语句允许多次执行编程语句或begin-end语句组。SystemVerilog中的循环语句有:for、repeat、while、do..while、foreach和forever。
    的头像 发表于 11-03 09:10 2123次阅读
    重点介绍所有综合编译器都支持的for和repeat<b class='flag-5'>循环</b>

    Foreach对Associative Array的constraint约束问题记录分享

    systemverilog constraint中的foreach可以对数组进行遍历和约束,常用于普通数组,队列或者动态数组。
    的头像 发表于 08-21 09:31 1197次阅读
    <b class='flag-5'>Foreach</b>对Associative Array的constraint约束问题记录分享

    javascript编程forEach循环方法使用

    编程语言
    小凡
    发布于 :2022年09月08日 07:32:59

    LabVIEW中For和While循环结构测试

    LabVIEW中的While循环至少执行一次。在严格控制循环次数的程序中,要注意For和While循环最后的执行结果可能有所差异
    发表于 10-04 17:20

    arduino 版 foreach实现

    [code]#define foreach(a,b) for(int __index=0,(a)=(b)[0];__index
    发表于 05-31 00:21

    forEach()和map()遍历的共同点和不同

    forEach()和map()遍历的区别以及兼容写法
    发表于 04-17 12:24

    HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制ForEach循环渲染

    ForEach基于数组类型数据执行循环渲染。说明,从API version 9开始,该接口支持在ArkTS卡片中使用。 一、接口描述 ForEach( arr: any
    发表于 08-18 10:50

    循环码,循环码是什么意思

    循环码,循环码是什么意思 循环码是
    发表于 03-18 14:00 9894次阅读

    PHP教程之foreach使用引用需要注意的问题详细资料说明

    本文档的主要内容详细介绍的是PHP教程之foreach使用引用需要注意的问题详细资料说明免费下载。
    发表于 03-26 13:51 11次下载
    PHP教程之<b class='flag-5'>foreach</b>使用引用需要注意的问题详细资料说明

    Java的iterator和foreach遍历集合源代码

    Java的iterator和foreach遍历集合源代码
    发表于 03-17 09:16 9次下载
    Java的iterator和<b class='flag-5'>foreach</b>遍历集合源代码

    简述HDL中循环语句的可综合性

    (含循环体)组成的代码块,EDA称为循环框架(Loop Frame)。 在这里,HDL循环语句与算法语言的循环语句的差异: 1.HDL的
    的头像 发表于 05-12 09:27 2171次阅读
    简述HDL中<b class='flag-5'>循环</b>语句的可综合性

    PHP教程:foreach使用引用注意的问题

    PHP教程:foreach使用引用注意的问题(电源技术期刊查询)-该文档为PHP教程:foreach使用引用注意的问题总结文档,是一份不错的参考资料,感兴趣的可以下载看看,,,,,,,,,,,,,,,,,
    发表于 09-22 12:28 9次下载
    PHP教程:<b class='flag-5'>foreach</b>使用引用注意的问题

    华为开发者HarmonyOS零基础入门:ForEach主键完成代码优化

     华为开发者HarmonyOS零基础入门:ForEach主键完成代码优化,通过改变渲染格式化,数据对象个数自动完成总列表渲染。
    的头像 发表于 10-23 10:27 1689次阅读
    华为开发者HarmonyOS零基础入门:<b class='flag-5'>ForEach</b>主键完成代码优化

    Ruby 与 Python之间的差异

    Ruby 与 Python 之间的差异在很大程度上可通过 for 循环看出本质。 Python 拥有 for 语句。对象告诉 for 如何进行协作,而 for 的循环体会处理对象返回的内容
    的头像 发表于 10-30 11:50 615次阅读

    鸿蒙开发实战-手写文心一言AI对话APP

    本文我们学习使用了基本组件的使用,网络请求以及状态管理,使用了ForEach循环渲染来构建对话界面。并且在HarmonyOS设备上成功运行
    的头像 发表于 01-24 18:02 1077次阅读
    鸿蒙开发实战-手写文心一言AI对话APP