第十三节:易学又实用的新特性: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更适合用于对象的遍历。
第十三节:易学又实用的新特性:for...of相关推荐
- 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高...
第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...
- Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验
Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...
- 【Java学习笔记之二十八】深入了解Java8新特性
前言: Java 8 已经发布很久了,很多报道表明java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with Java ...
- vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性,样式穿透,插槽选择器,全局选择器,在vue3中使用tailwindcss
一.vue3.x 样式新特性 样式穿透 深度选择器 <style scoped> .a :deep(.b) {/* ... */ } </style> 插槽选择器 <s ...
- 【SQL开发实战技巧】系列(四十五):Oracle12C常用新特性☞VARCHAR2/NVARCHAR2类型最大长度由4000字节扩展到32767字节
系列文章目录 文章目录 系列文章目录 前言 Oracle12C常用新特性☞VARCHAR2/NVARCHAR2类型最大长度由4000字节扩展到32767字节 案例一:CDB+PDB环境启用扩展 案例二 ...
- MySQL深入学习(十八):MySQL8其它新特性
本文参考:康师傅-MySQL数据库教程天花板,mysql安装到mysql高级,强!硬! 文章目录 一. MySQL8新特性概述 1.1 MySQL8.0 新增特性 1.2 MySQL8.0移除的旧特性 ...
- 【初阶与进阶C++详解】第二十二篇:C++11新特性(列表初始化+变量类型推到+右值引用+新增默认成员函数+可变模板参数+lambda表达式+包装器function_bind)
- android各个版本的新特性
首先看看最新版本Android 11 : https://www.zhihu.com/question/420186152 4.0 Ice Cream Sandwich(冰激凌三明治):2011年10 ...
- python3.8.5 run-Python 3.8.0 正式版发布,新特性初体验
北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PEP 572: Assignment Expressi ...
最新文章
- RESTful之视图集ViewSet
- 2011年春季 软件项目管理 实验安排
- 参数迁移表达的第三种形态相互作用
- TIBCO EMS MESSAGE
- 大厂提供什么样的软硬件来吸引人才?
- ORM(四)应用.脚本管理工具
- Android多线程操作——线程池管理综述
- C语言作业 – 数组排序算法可视化
- 阿里面试官:为什么MySQL数据库索引选择使用B+树而不是跳表?
- linux命令大全dfs,Linux常用的dfs命令
- 数据建模讲解和案例分析
- 18年6月英语六级第一套听力单词
- Redis 过期策略都有哪些?
- LCS (动态规划)
- nginx最简单的旧域名跳转新域名
- 我找到了村里最挣钱的生意!
- word文档从第二页开始标注页码
- 解决browser = webdriver.Chrome()报错 :Message: 'chromedriver' executable needs to be in PATH.
- java数字家谱管理系统设计与实现计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
- 电子电路中,PVDD、CVDD、VPP、 VDD、 AVDD、VCC分别是指什么电源?各起什么作用?
热门文章
- 如何给mac地址赋值_交换机工作基础——MAC地址表的构成与安全
- oracle差异收集明细,Oracle收集表的数据与统计信息差异
- stm32读取目标芯片_使用stm32驱动RC522读IC卡(代码留言邮箱)
- 基于区块链的数据市场
- 客座编辑:刘克,男,博士,国家自然科学基金委员会信息科学部二处(计算机学科)处长。...
- 【面向对象】对象的本质
- 【数据库系统】数据库体系结构
- 【Python】Numpy中伪随机数的简单使用
- 域名解析中“TTL”是什么意思?
- 我往手里面植入了一枚芯片,但并没有获得超能力