js中for和foreach区别 ,js for和foreach的哪个效率高

本文目录

js for和foreach的哪个效率高


forin 是遍历对象的 其实不适用遍历数组

js中for和foreach区别
,js for和foreach的哪个效率高图1

JS中for循环


for 循环在平时开发中使用频率最高的,前后端数据交互时,常见的数据类型就是数组和对象,处理对象和数组时经常使用到 for 遍历,因此需要彻底搞懂这 5 种 for 循环。它们分别为:

1、for
for 循环是出现最早,也是应用最普遍的一个遍历,能够满足绝大多数的遍历。可以遍历 数组、对象、字符串,示例:

2、for ... in
for ... in 是在 ES5 中新增的,以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。

3、for ... of
for ... of 语句在可迭代对象(包括 Array、Map、Set、String、TypedArray、arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

4、for await...of
创建一个循环,该循环遍历异步可迭代对象以及同步可迭代对象,包括内置的 String、Array,类数组对象(arguments 或 nodeList),TypedArray, Map, Set 和用户定义的异步/同步迭代器。
它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。
类似于 await 运算符一样,该语句只能在一个async function 内部使用

5、forEach
forEach 是ES5版本发布的,按升序为数组中含有效值的每一项执行一次回调函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上),一般认为是 普通for循环 的加强版。

6、map
遍历时可以返回一个新数组,新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。

1、使用场景差异
for循环是最早最原始的循环遍历语句,for 内部定义一个变量,按照条件进行循环遍历,通常是数组的长度,当超过长度时就停止循环,一般遍历的都是数组或类数组。
遍历对象时,由于对象没有长度,所以使用 Object.keys() 获取对象的所有属性,以数组形式返回。
for / in主要是用来遍历对象上的可枚举属性,包括原型对象上的属性,按任意顺序进行遍历,遍历对象时获取到的是属性的键值,遍历的是数组,数组的下标当做键值。
for / of用于遍历可迭代对象的数据,包括 Array、Map、Set、String、TypedArray、arguments 对象等等。
for await...of用于遍历异步可迭代对象,该语句只能在一个async function 内部使用。
forEach 是 for 的加升级版,使用更简单,携带参数更多,但本质还是数组的循环,每个元素都执行一次回调,不会改变原数组。
map是给原数组每个元素都执行一次回调,返回一个新数组,不会改变原数组。
2、功能差异
forEach、map 不支持跳出循环,其他不支持。
for await ... of 能够支持异步操作,其他的不支持。
对于纯对象的遍历, for ... in 枚举更方便。
对于数组遍历,如果不需要索引,可以直接使用 for...of 获取值,还可支持 break 或 return ;如果还需要索引,使用 forEach 更适合,但不支持 return。
如果是一个数组映射成另一个数组,使用 map 最合适。
3、性能差异
在测试环境、测试数据条件一致的情况下,性能排序为:
for > for of > forEach > map > for in。
for 因为没有额外的函数调用和上下文,所以性能是最快的。
for ... of 具有 iterator 接口的数据结构,可以使用它来迭代成员,直接读取键值。
forEach 是 for 的语法糖,还有许多的参数和上下文,因此会慢一些。
map 因为它返回的是一个等长的全新数组,数组创建和赋值产生的性能开销较大。
for...in 性能最差,因为需要列举对象的所有属性,有转化过程,开销比较大。

在项目开发中,我们应该根据实际需求,去选择一个合适的 for 遍历。以下是一些使用建议:
如果需要把数据映射成另外一个数组,如变成对应布尔值,推荐使用 map ,不会修改原数组,使用语法简单。
数组遍历时,可以使用 for 、forEach 或 for...of。
遍历的是纯对象时,推荐使用 for ... in 。
如果是需要对迭代器遍历,推荐使用 for ... of。
如果是在数组中筛选符合条件的数组,使用 fillter 。


js中for和foreach区别
,js for和foreach的哪个效率高图2

js中的map方法


forEach: 对数组中每一个元素都运行函数,该方法没有返回值。如果你想对数据里的每一个元素进行处理,可以采用forEach来替换 for循环
map:对数组中每一个元素都运行函数, 返回由每次函数执行的结果组成的数组。果你想对数据里的每一个元素进行处理,可以采用forEach来替换 for循环,和forEach不同的是,它最终会返回一个新的数组,数组的元素是每次处理先前数组中元素返回的结果
reduce: 对数组中的所有元素调用指定的回调函数。 该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

js中for和foreach区别
,js for和foreach的哪个效率高图3

如何形象地解释 Javascript 中 map


map,forEach,reduce是html5的Javascript数组中提供的新的API接口。
其中
1.map是遍历数组,通过回调函数中的计算返回一个和原数组项对应的结果,回调函数中需要return 如果不写则return undefined,新的数组无原数组的引用。
2. forEach是单纯的对数组进行遍历,和for类似,回调函数中对每一项的处理根据自己的意愿处理,没有返回值。即使回调中写return 结果也是undefined。
3. reduce 是对数组进行遍历,它第一个参数为回调函数a,回调函数a接受两个参数,第一个参数为当前结果(source),第二个参数为当前遍历的执行数据(item)。第二个参数为初始化值。一般用于递归操作。需要有返回值。

js中for和foreach区别
,js for和foreach的哪个效率高图4

以上就是关于js中for和foreach区别 ,js for和foreach的哪个效率高的全部内容,以及js中for和foreach区别 的相关内容,希望能够帮到您。

上一篇 2022年11月24日08时35分25秒
下一篇 2022年11月24日08时37分40秒

相关推荐

  • live短语中考 ,live in和live at的区别

    说起live短语中考 大家都想知道,今天就给家解读一下。live in和live at的区别和关于live词组 live to,live for,live from,怎么翻译?怎么区分?live短语中考 的内容,让大家更深入了解live in和live at的区别,来深入了解。 live短语中考 :livealivelivinglively的区别 (1)alive、live、living都有“活的、有生命的”意思,与dead意义相反。但live通常只作前置定语,且一般用于动物;alive、living不仅可作定语(alive只能置于名词后;living一般置于名词前,也可置于名词后),也可以作…

    2022年04月25日
    16
  • 英语全部词汇大全 ,最全小学英语单词大全合集带音标

    一说起英语全部词汇大全 网上有很多解释,那么,就有必要说一下了,五年级英语单词大全。和英语蔬菜单词大全100个?英语全部词汇大全 的内容,让您更清楚知道最全小学英语单词大全合集带音标,那么一起看看吧。 英语全部词汇大全 :所有球类的英语单词 1、football足球。 2、rugby橄榄球。 3、basketball篮球。 4、volleyball排球。 5、tennis网球。 6、tabletennis乒乓球。 7、badminton羽毛球。 8、snoker斯诺克。 9、beachball沙滩球。 10、handball手球。 11、hockey曲棍球。 12、golf高尔夫球。 13、c…

    2022年04月26日
    16
  • 英文自我介绍十句话怎么说 ,英文的自我介绍 5——0句

    谈到英文自我介绍十句话怎么说 是大家最关心的。因此,小编觉得有必要给大家解读一下,英语自我介绍,至少5句话?和英语自我介绍10句,带翻译是女生?英文自我介绍十句话怎么说 的内容,好让您知道英文的自我介绍 5——0句,来深入了解。 英文自我介绍十句话怎么说 :简易0句英语自我介绍怎么写 Hello, everyone. I'm from XXXX. I graduated from XXXX. I am a very optimistic girl. 大家好,我来自XXXX,我毕业于XXXX。我是一个十分乐观的女孩。 The biggest characteristic is persisten…

    2022年04月26日
    16
  • 星期的缩略形式后面的点要吗,便条的四个基本要素是什么

    星期缩略 大家都想知道,今天就给家解读一下。为什么一周七天的缩写后面要加一个点和英语中星期的缩略语后面要不要打点?星期的缩略形式后面的点要吗的内容,好让您知道便条的四个基本要素是什么,来看看都有哪些。 星期的缩略形式后面的点要吗:英语中星期的缩略语后面要不要打点 Mon. is a written abbreviation for . 星期一。 柯林斯字典 星期的缩略形式后面的点要吗:sunday的缩写形式要在后面加点 这是一定要加 星期的缩略形式后面的点要吗:为什么一周七天的缩写后面要加一个点 一周七天的缩写后面要加一个点代表省略号。 周日:Sunday Sun. 周一:Monday Mon…

    2022年04月26日
    16
  • poo和poop的区别 ,以撒的结合重生石化的便便Petrified Poop有什么用

    一提到poo和poop的区别 网上有很多解释,今天就给家解读一下。和中间有两个o3个字母的单词12个翻译poo和poop的区别 的内容,让您更清楚知道以撒的结合重生石化的便便Petrified Poop有什么用,来看看都有哪些。 poo和poop的区别 : poo和poop的区别 :英语中大小便怎么说 在英国,一般我听小孩子说大便是go poopoo,但是小便他们一般说是go uricuric。但是这些都是很口语化的,而且都是对很小的孩子说的。如果说文明一点的还是说restroom或是toilet。 poo和poop的区别 :中间有两个o3个字母的单词2个翻译 Boo: n. a cry or…

    英语知识 2022年04月26日
    11
  • autumn汉语谐音 ,秋天冬天用英语怎么读汉字标注

    关于autumn汉语谐音 是大家最关心的。因此,小编觉得有必要说明一下。autumn请问这个单词用中文怎么读出来啊和autumn怎么读怎么读autumn汉语谐音 的内容,让大家更深入了解秋天冬天用英语怎么读汉字标注,来看看都有哪些。 autumn汉语谐音 :autumn怎么读怎么读 autumn的音标是英 ['ɔːtəm]或美 ['ɔtəm] , 一、词汇分析 autumn n. 秋天;成熟期;渐衰期,凋落期adj. 秋天的,秋季的 二、短语 1、Late Autumn 晚秋 ; 深秋 ; 秋日和 ; 春光明媚的 2、To Autumn 致秋天 ; 秋颂 ; 到秋季 ; 在秋季 3、Cheye…

    2022年04月27日
    16
  • 百度ai同传助手下载 ,iPad可以跨软件翻译的app是什么

    关于百度ai同传助手下载 网上有很多解释,小编觉得必须给大家介绍一下。字幕翻译和iPad可以跨软件翻译的app是什么?百度ai同传助手下载 的内容,好让大家清楚知道iPad可以跨软件翻译的app是什么,接下来一起看看。 百度ai同传助手下载 :有没有那种输入一段英文 它能帮你用标准的口语读出来的软件 百度翻译。 百度翻译依托互联网数据资源和自然语言处理技术优势,致力于帮助用户跨越语言鸿沟,方便快捷地获取信息和服务。支持全球200多个语言互译,包括中文(简体)、英语、日语等,覆盖4万多个翻译方向,通过开放平台支持超过40万企业和个人开发者,是国内市场份额第一的翻译类产品。 百度翻译拥有网页、AP…

    2022年04月26日
    16
  • 初中英语冠词用法总结 ,初中英语七年级上册人教版知识点归纳

    初中英语冠词用法总结 网上众说纷纭,那么,就有必要说一下了,在初中英语中,除了序数词前需要加定冠词the,还有一个什么规则?和小学初中英语语法总结,不要找别人答案,十大词性还有冠词什么动词乱七八糟全弄上就给分初中英语冠词用法总结 的内容,让您更清楚知道初中英语七年级上册人教版知识点归纳,来了解了解。 初中英语冠词用法总结 :强力推荐 新课标初中英语语法《冠词和数词》 初中英语冠词用法总结 :我想要初中的英语的语法总结~~~~要详细的 1. 形容词的位置: 代名形容词+数量形容词+性状形容词+名词 再细分如下: 1放在冠词前的形容词(all, both, such...)+2冠词、指示形容词、所…

    2022年04月27日
    16