为什么说for...of是JS中的一颗宝石
云栖号资讯:【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!
是什么使得一个编程语言的新特性很棒?那就是当这个特性可以结合多个其它特性的时候。
ES2015 版本中引入的 for...of 语句就是这种情况。
for...of 可以迭代数组、类数组以及任何可以迭代的对象(maps、sets、DOM集合),并且,for...of 的语句还很短。
在这篇文章中,我将会演示 for...of 的能力。
1. 数组迭代
for...of 最常见的应用是对数组项进行迭代。该循环可以高效得完成迭代,而无需其他变量来保持索引。
例如:
for...of 循环遍历 products 的每一项。迭代项被赋值给变量 product.
数组方法 entries() 可以用于访问迭代项的索引。该方法在每次迭代时返回一对 [index,item]。
就地解构是 for...of 的另一个重要功能,我们将在下一部分中对其进行详细说明。
1.1 就地解构
首先,我们来看一下 for...of 循环的语法:
LeftHandSideExpression 表达式可以替换为任意赋值表达式左侧的内容。
在前面的示例中,LeftHandSideExpression 是一个变量声明 const product ,甚至是一个解构 const [index,product]。
因此,for...of 的语法支持实现迭代项的解构。
让我们遍历一个对象数组,提取每个对象的 name 属性:
const { name } of persons 循环迭代 persons 对象数组,并且就地将 person 对象进行了解构。
2. 类数组迭代
for...of 可以用于迭代类数组对象。arguments 是函数体内的特殊变量,包含函数的所有参数,这是一个经典的类数组对象。
让我们写一个求和函数 sum(num1, num2, ..., numN):
在每次迭代中,for...of 循环遍历类数组 arguments 中的每一个数,并计算总和。
3. 快速了解可迭代
什么是可迭代对象?它是支持可迭代协议的对象。
我们可以通过查看 Symbol.iterator 方法来确定某个数据是否可迭代。例如,下面的例子显示了数组是可迭代的:
for...of 接受可迭代对象。这很棒,因为现在你可以遍历string、数组、类数组、set、map,同时仍可以享受 for...of 的简洁。
4. 字符串迭代
JavaScript 的基础类型 string 是可迭代的。因此,可以轻松地遍历字符串的字符。
message 是一个字符串。由于字符串可迭代的,因此 for...of 循环遍历 message 。
5. Map 和 Set 迭代
Map 是一个特殊的对象,将键与值相关联。键可以是任何基本类型(通常是 string,但可以是 number 等)。
幸运的是,Map 也是可迭代的(在键/值对上进行迭代),并且 for...of 可以轻松地循环迭代所有键/值对。
一起看一下:
for (const [number, name] of names) 迭代 names 的键值对。
在每个循环中,迭代器都会返回一个数组 [key,value] ,并使用 const [number,name] 立即对这对数组进行解构。
以相同的方式可以遍历 Set 的项:
6. 迭代普通的JavaScript对象
尝试遍历普通JS对象的属性/值总是很痛苦。过去,我通常使用 Object.keys() 获取对象的键,然后使用 forEach 来迭代键数组。【译者:这不代表本人观点,我比较喜欢用 for...in 遍历对象】
新的 Object.entries() 函数与 for...of 组合使用是个不错的选择:
Object.entries(person) 返回一个键和值的元组数组:[[''name','John Smith'],['job','agent']]。然后,使用 for...of 循环遍历数组,并将每个元组解构为 const [prop,value]。
7. 遍历DOM集合
你可能知道 HTMLCollection 令人沮丧。主要是因为 HTMLCollection 是一个类数组的对象(而不是常规数组),所以我们无法使用数组的方法。
例如,每个 DOM 元素的 children 属性都是 HTMLCollection 。好在 for...of 可以在类似数组的对象上进行迭代,因此我们可以轻松地迭代 children:
此外,for...of 可以迭代 NodeList 集合(可迭代)。例如,函数 document.querySelectorAll(query) 返回一个 NodeList:
如果你想遍历 DOM 中的不同种类的集合,那么 for...of 语句是一个不错的选择。
8. 性能
迭代大型数组时,for...of 的执行速度可能会比经典方法慢:
在每次迭代中调用迭代器比通过增加索引访问的开销更大。但是,这种细微差别在使用大型数组的应用程序中以及性能至关重要的应用程序中非常重要,不过这种情况很少发生。
9. 总结
为什么说 for...of 是一颗宝石,因为:
- 它简明扼要
- 它接受迭代器,包括数组,字符串,Set,Map,DOM集合
- 它接受类数组对象
- 迭代的项目可以在就地解构。
你首选的迭代数组项的方式是什么?
【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/zhibo立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
原文发布时间:2020-03-31
本文作者:刘小夕
本文来自:“掘金”,了解相关信息可以关注“掘金”
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
单张图像就可以训练GAN!Adobe改良图像生成方法 | 已开源
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 数据集太小了,无法训练GAN?试试从单个图像入手吧。 最近,来自Adobe和汉堡大学的研究人员,对这个方法做了改进,探讨了几种让GAN在单幅图像提高训练和生成能力的机制。 研究人员将改进的模型称作ConSinGAN。 那么,先来看下ConSinGAN的效果吧。 上图左侧是用来训练的单个图像,右侧是利用ConSinGAN训练后生成的复杂全局结构。 可以看出效果还是比较逼真。 当然,ConSinGAN还可以用来处理许多其他任务,例如图像超分辨率( image super-resolution)、图像动画(image animation),以及图像去雾(image dehazing)。 下面两张就是它在图像协调(image harmonization)和图像编辑(image editing)上的效果。 ConSinGAN是怎么做到的呢? 训练架构优化:并行的SinGAN 首先,我们先来看下SinGAN的训练过程。 SinGAN在图像中训练几个单独的生成网络,下图便是第一个生成器,也是唯一从随机...
- 下一篇
为什么我们要从 MySQL 迁移到 TiDB?
本文转载自公众号 51CTO技术栈。 作者介绍:贺磊,360 数据库运维资深工程师,《MongoDB 运维实战作者》,知名论坛 MySQL 版主,51CTO 博客之星,闲暇之余,喜欢将部分案例写成博客,累计访问量过百万。 我先说几个最让你兴奋和开心的点吧: 在 TiDB 里,你完全不用担心磁盘容量的问题。 在 TiDB 里,原生支持 Online DDL,你完全不用担心第三方改表工具改表出现各种 Bug 的问题,相信用开源工具改过上 T 级别表的同学都遇到过或多或少的各类 error。 在 TiDB 里,加列、主键扩容字段都是秒级的,比如我刚刚就刚对一张 19 亿的表加完了字段,1 秒完事,这在 MySQL 里要 8.0 才可以,而且还要求列在最后才行。 在 TiDB 里,你会发现 count(*) 惊人的快,一张近 20 亿的表 coun(*) 大概在 1 分钟完事儿,当然,这取决于你的 KV 数量和磁盘性能。 在 TiDB 里,从 MySQL 迁移将变得简单,图形化一键迁移,爽不爽? 在 TiDB 里,绝大多数情况你会发现比单机 MySQL 有更好的性能,当然也不排除一些例外,例如...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS8安装Docker,最新的服务器搭配容器使用
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7,8上快速安装Gitea,搭建Git服务器