国际热核聚变实验堆|web前端 - JS中的4个for循环( 三 ) javascript

因此，在使用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
今天爱创课堂小编的分享就到这里了，有想学习前端，了解前端更多知识的同学，欢迎大家私信小编领取前端学习资料，也可以关注，点赞加分享，多多支持小编！！！