- 第一节:什么是 ES6?新手该如何理解
- 第二节:ES6 新增了 let 关键字,干嘛用的?
- 第三节:ES6 中另一个不得不说的关键字 const
- 第四节:教你如何快速让浏览器兼容 ES6 特性
- 第五节:一个令人兴奋的 ES6 新特性:解构赋值
- 第六节:ES6 为字符串 String 带来哪些好玩的特性?
- 第七节:ES6 为数值做了哪些扩展?
- 第八节:ES6 为数组做了哪些扩展?
- 第九节:ES6 为对象做了哪些扩展?
- 第十节:ES6 为函数做了哪些扩展?
- 第十节:函数的扩展 — 箭头函数的 this 使用(补课)
- 第十一节:JavaScript 有了一种全新的数据类型:Symbol
- 第十二节:ES6 Proxy 代理 和 去银行存款有什么关系?
- 第十三节:易学又实用的新特性:for...of
- 第十四节:ES6 的 Iterator 遍历器到底是什么?
- 第十五节:有一种特殊的函数叫:Generator 函数
- 第十六节:ES6 新增的 Set 和 WeakSet 是什么东西?
- 第十七节:ES6 新增的 Map 和 WeakMap 又是什么东西?
- 第十八节:教你如何使用 ES6 的 Promise 对象
- 第十九节:终于 JavaScript 也有了类(Class)的概念
- 第二十节:一个缺失已久的特性 module 模块
第十三节:易学又实用的新特性:for...of
前面几节的内容稍微偏长,代码也不少,估计有基础的同学才会跟得上,不知道大家有没有看懵了。这节来点简单但又很实用的知识,没错,就是for...of。
for...of 是什么for...of 一种用于遍历数据结构的方法。它可遍历的对象包括数组,对象,字符串,set和map结构等具有iterator 接口的数据结构。
(上面这句话如果有看不懂的地方,自动忽略即可,后续会有章节介绍。)
下面就以大家熟悉的数组为例来介绍for...of。
遍历数组早就不是什么新鲜事,我们有好几种方法去完成,此时ES6给我们带来一个新的遍历方法for...of,难道它有更牛逼的地方?
接下来,我们先来看看几种传统的遍历数组的方式以及它们的缺陷。
方式一
var arr = [1,2,3,4,5];
for(let i = 0;i<arr.length;i++){
//...
}
方式一利用for循环来遍历数组的缺点就是:代码不够简洁。
下面介绍一个写法更加简洁的方式。
方式二
var arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
//...
});
利用forEach循环代码量少了很多,写法更加简洁,缺点就是:无法中断停止整个循环。
方式三
var arr = [1,2,3,4,5];
for(let i in arr){
//...
}
for...in循环更常用于对象的循环,如果用于数组的循环,那么就要注意了,上述代码中每次循环中得到的i是字符串类型,而不是预料中的数字类型,要想对它进行运算,那得先要进行类型转换,造成不方便。
既然上面的几种方式都存在不足,新增的遍历方式for...of会比它们更好吗?答案是肯定的。
我们来看看for...of的是实现:
var arr = [1,2,3,4,5];
for(let value of arr){
console.log(value);
}
//打印结果:依次输出:1 2 3 4 5
看样子是不是有点眼熟,很像for...in?确实很像。它的实现跟for...in很类似。
我们列举一下for...of的优势:
写法比for循环简洁很多;
可以用break来终止整个循环,或者continute来跳出当前循环,继续后面的循环;
结合keys( )获取到循环的索引,并且是数字类型,而不是字符串类型。
我们分别来展示一下上述的几个优点:
循环可以终止
var arr = [1,2,3,4,5];
for(let value of arr){
if(value == 3){
//终止整个循环
break;
}
console.log(value);
}
//打印结果:1 2
以上案例:用break实现了终止整个循环,不会继续后面的遍历,所以打印结果为:1 2。
可跳过当前循环
var arr = [1,2,3,4,5];
for(let value of arr){
if(value == 3){
//跳过当前循环,继续后面的循环
continue;
}
console.log(value);
}
//打印结果:1 2 4 5
用continue跳过当前循环,继续后面的循环,所以打印结果为:1 2 4 5。
得到数字类型的索引
var arr = [1,2,3,4,5];
for(let index of arr.keys()){
console.log(index);
}
//打印结果:依次输出:0 1 2 3 4
使用数组的扩展keys( )(第八节有介绍,点击查看),获取键名再遍历,得到的index是数字类型的。
此外,相比于for...in循环专门为对象设计,for...of循环的适用范围更广。
遍历字符串for...of 支持字符串的遍历。
let word = "我是前端君";
for(let w of word){
console.log(w);
}
//打印结果:我 是 前 端 君
遍历DOM List
for...of支持类数组的遍历,例如DOM List。
<p>1</p>
<p>2</p>
<p>3</p>
//假设有3个p元素
let pList = document.getElementsByTagName('p');
for(let p of pList){
console.log(p);
}
// 打印结果:<p>1</p>
// <p>2</p>
// <p>3</p>
for...of支持set和map解构的遍历,考虑到set和map我们还没学习,我们在后面章节一并讲解。
这节是近期最简短、最易学的一个章节了,希望大家多能看懂。
本节小结总结:for...of一种新的遍历方式,能遍历的对象有:数组,类数组对象,字符串,set和map结构等具有iterator接口的数据结构。而且for...in更适合用于对象的遍历。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论