国际热核聚变实验堆|web前端 - JS中的4个for循环( 三 )
admin
2023-07-19 21:05:21
0


因此 , 在使用forEach时 , 我们不需要特别声明索引和要遍历的元素 , 因为这些都是作为回调函数的参数 。
另外 , forEach 会遍历数组中的所有元素 , 但是 ES5 定义了一些其他有用的方法 , 下面是一部分:
every:循环在第一次返回false后返回
some:循环在第一次返回 true 后返回
filter:返回一个元素满足回调函数的新数组
map:在返回之前处理原始数组中的元素
reduce:依次处理数组中的元素 , 将上一次处理的结果作为下一次处理的输入 , 最终得到最终结果 。
forEach 性能
您可以看看jsPerf 。 在不同浏览器下测试的结果是forEach没有for快 。 如果将测试代码放在控制台中 , 可能会得到不同的结果 。 主要原因是控制台的执行环境与真实的代码执行环境不同 。
4、for-of
我们先来看一个例子:
const arr = [‘a’ ‘b’ ‘c’
;
for(let data of arr) {
console.log(data);

运行的结果是:
a
b
c
为什么要引入for-of?
要回答这个问题 , 我们先来看看 ES6 之前的 3 种 for 循环的缺陷:
forEach 不能中断和返回;
for-in 的劣势更加明显 。 它不仅遍历数组中的元素 , 还遍历自定义属性 , 甚至访问原型链上的属性 。 此外 , 遍历数组元素的顺序可以是随机的 。
所以 , 针对以上缺点 , 我们需要对原来的for循环进行改进 。 但是 ES6 不会破坏您已经编写的 JS 代码 。
目前 , 数以千计的网站依赖于 for-in 循环 , 其中一些甚至将其用于数组遍历 。 通过修复 for-in 循环来添加数组遍历支持会使这一切变得更加混乱 , 因此标准委员会在 ES6 中添加了一个新的循环语法来解决当前的问题 for-of。
那么 for-of 能做什么呢?
与forEach相比 , 它可以正确响应break、continue、return 。
for-of 循环不仅支持数组 , 还支持大多数类似数组的对象 , 例如 DOM 节点列表对象 。
for-of 循环还支持字符串遍历 , 它将字符串作为 Unicode 字符序列进行迭代 。
for-of 还支持 Map 和 Set(都是 ES6 中的新功能)对象遍历 。
总结一下 , for-of 循环具有以下特点:
这是迭代数组元素的最简洁直接的语法 。
这种方法避免了 for-in 循环的所有陷阱 。
与 forEach 不同 , 它正确响应 break、continue 和 return 语句 。
它不仅可以遍历数组 , 还可以遍历类数组对象和其他可迭代对象 。
然而 , 应该注意的是 , for-of 循环不支持普通对象 , 但是如果您想遍历一个对象的属性 , 您可以使用 for-in 循环(它就是这样做的) 。
最后 , 但并非最不重要的是 , ES6 引入了另一种方法来迭代数组的值 , 那就是 Iterator 。 最后一个例子:
const arr = [‘a’ ‘b’ ‘c’
;
const iter = arr[Symbol.iterator
();
iter.next() // { value: ‘a’ done: false
iter.next() // { value: ‘b’ done: false
iter.next() // { value: ‘c’ done: false
iter.next() // { value: undefined done: true
今天爱创课堂小编的分享就到这里了 , 有想学习前端 , 了解前端更多知识的同学 , 欢迎大家私信小编领取前端学习资料 , 也可以关注 , 点赞加分享 , 多多支持小编!!!

相关内容

热门资讯

2... 本文目录导航: 20种最佳仿真软件清单 仿真都用到了哪些软件? ...
浅... 本文目录导航: 浅谈休息与社会保证法期末论文 消息技术给当今社会带来了哪些...
仿... 本文目录导航: 仿真模型软件都有哪些,各自什么特点? 仿真软件哪个好 ...
各... 本文目录导航: CAD/CAE/CAM,各自都是什么意思?有什么区别? C...
怎... 本文目录导航: cad参照治理图片显示形态为未参照但能反常显示,怎样修正为已参照? ...
C... 本文目录导航: 计算机中CAD、CAM、CAT、CAE、CAI的全写区分是什么?请具体说明...
c... 本文目录导航: cadcam系统外部的计算机网络普通驳回互联网 cadca...
计... 本文目录导航: 计算机中CAD、CAM、CAT、CAE、CAI的全写区分是什么?请具体说明...
c... 本文目录导航: cad工具栏不见了怎样调进去呢? cad命令栏怎样调进去 ...
c... 本文目录导航: cad上方的命令栏不见了怎样显示进去 cad菜单栏隐没了怎...
起底“斗金订购”虚假贵金属交易...   ️投资避坑警示:起底“斗金订购APP”虚假现货盘骗局  【套路揭秘:引流与诱导】  斗金订购AP...
警惕!打着“订购”幌子搞“非法...   “注册就返现”“充值送福金”“首单免赔”……这些极具诱惑力的字眼,频繁出现在某些打着“现货商品交...
怎... 本文目录导航: cad底图不见了,怎样找回? 制造cad参照底图后怎样老是...
口... 本文目录导航: 口腔CAD/CAM与RP技术的相反点和不同点 什么是口腔c...
怎... 本文目录导航: cad编辑栏.工具栏或菜单栏不见了,怎样办? CAD绘图工...
c... 本文目录导航: cad如何裁剪自己想要的局部 CAD怎样裁剪多余局部CAD...
二... 本文目录导航: 二氧化锆烤瓷牙价钱多少? 氧化锆全瓷牙简述 ...
比... 本文目录导航: 仿真软件哪个比拟好,比拟靠谱? 仿真软件哪个好 ...
虚... 本文目录导航: 虚构仿真软件有哪些 计算机仿真软件有哪些 ...
仿... 本文目录导航: 仿真用的软件有哪些? 仿真机械软件有哪些 ...