广州web培训
达内广州五羊中心

18087159764

热门课程

达内广州web培训详解ES6循环:for-of

  • 时间:2016-12-14
  • 发布:广州前端开发培训
  • 来源:码农网

这篇文章达内广州web培训要说的是ES6中的新循环for-of。先来看个例子:

const arr = ['a', 'b', 'c'];

for(let data of arr) {

console.log(data);

}

运行结果是:

a

b

c

为什么要引进for-of?

要回答这个问题,达内广州web培训先说说ES6之前的3种for循环有什么缺陷:

forEach不能break和return;

for-in缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。

所以,鉴于以上种种缺陷,我们需要改进原先的for循环。但ES6不会破坏你已经写好的JS代码。目前,成千上万的Web网站依赖for-in循环,其中一些网站甚至将其用于数组遍历。如果想通过修正for-in循环增加数组遍历支持会让这一切变得更加混乱,因此,标准委员会在ES6中增加了一种新的循环语法来解决目前的问题,即for-of。

那for-of到底可以干什么呢?

跟forEach相比,可以正确响应break, continue, return。

for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM nodelist对象。

for-of循环也支持字符串遍历,它将字符串视为一系列Unicode字符来进行遍历。

for-of也支持Map和Set(两者均为ES6中新增的类型)对象遍历。

总结一下,for-of循环有以下几个特征:

这是最简洁、最直接的遍历数组元素的语法。

这个方法避开了for-in循环的所有缺陷。

与forEach不同的是,它可以正确响应break、continue和return语句。

其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。

但需要注意的是,for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用

for-in循环(这也是它的本职工作)。

广州Web前端培训就到广州达内,详情请登陆广州达内Web前端培训官网(gz.web.tedu.cn)!

上一篇:达内广州web培训详解ES5循环:forEach
下一篇:达内广州web培训详解ES5循环:for-in

达内广州web培训详解ES6循环:for-of

达内广州web培训详解ES5循环:forEach

达内广州web培训详解ES5简单for循环

达内广州web培训分享:CSS预处理器的缺点

选择城市和中心
贵州省

广西省

海南省