Archive of Our Own_为什么说for...of循环是JS中的宝石?
(给前端大全加星标,提升前端技能)
作者: 前端宇宙 公号 / 刘小夕 (本文来自作者投稿)
是什么使得一个编程语言的新特性很棒?当这个特性可以结合多个其它特性的时候。
ES2015
版本中引入的 for...of
语句就是这种情况。
for...of
可以迭代数组、类数组以及任何可以迭代的对象(maps
、sets
、DOM集合
),并且,for...of
的语句还很短。
在这篇文章中,我将会演示 for...of
的能力。
1. 数组迭代
for...of
最常见的应用是对数组项进行迭代。该循环可以高效得完成迭代,而无需其他变量来保持索引。
例如:
const products = [
for...of
循环遍历 products
的每一项。迭代项被赋值给变量 product
.
数组方法 entries()
可以用于访问迭代项的索引。该方法在每次迭代时返回一对 [index,item]
。
就地解构是 for...of
的另一个重要功能,我们将在下一部分中对其进行详细说明。
1.1 就地解构
首先,我们来看一下 for...of
循环的语法:
for (LeftHandSideExpression
LeftHandSideExpression
表达式可以替换为任意赋值表达式左侧的内容。
在前面的示例中,LeftHandSideExpression
是一个变量声明 const product
,甚至是一个解构 const [index,product]
。
因此,for...of
的语法支持实现迭代项的解构。
让我们遍历一个对象数组,提取每个对象的 name
属性:
const persons = [
const { name } of persons
循环迭代 persons
对象数组,并且就地将 person
对象进行了解构。
2. 类数组迭代
for...of
可以用于迭代类数组对象。arguments
是函数体内的特殊变量,包含函数的所有参数,这是一个经典的类数组对象。
让我们写一个求和函数 sum(num1, num2, ..., numN)
:
function sum() {
在每次迭代中,for...of
循环遍历类数组 arguments
中的每一个数,并计算总和。
3. 快速了解可迭代
什么是可迭代对象?它是支持可迭代协议的对象。
我们可以通过查看 Symbol.iterator
方法来确定某个数据是否可迭代。例如,下面的例子显示了数组是可迭代的:
const array = [
如果你想了解更多信息,可以随时阅读我之前的文章。
for...of
接受可迭代对象。这很棒,因为现在你可以遍历string
、数组、类数组、set
、map
,同时仍可以享受 for...of
的简洁。
4. 字符串迭代
JavaScript
的基础类型 string
是可迭代的。因此,可以轻松地遍历字符串的字符。
const message =
message
是一个字符串。由于字符串可迭代的,因此 for...of
循环遍历 message
。
5. Map 和 Set 迭代
Map
是一个特殊的对象,将键与值相关联。键可以是任何基本类型(通常是 string
,但可以是 number
等)。
幸运的是,Map
也是可迭代的(在键/值对上进行迭代),并且 for...of
可以轻松地循环迭代所有键/值对。
一起看一下:
const names =
for (const [number, name] of names)
迭代 names
的键值对。
在每个循环中,迭代器都会返回一个数组 [key,value]
,并使用 const [number,name]
立即对这对数组进行解构。
以相同的方式可以遍历 Set
的项:
const colors =
6. 迭代普通的JavaScript对象
尝试遍历普通JS对象的属性/值总是很痛苦。过去,我通常使用 Object.keys()
获取对象的键,然后使用 forEach
来迭代键数组。【译者:这不代表本人观点,我比较喜欢用 for...in
遍历对象,不过要注意 for...in 的副作用】
const person = {
新的 Object.entries()
函数与 for...of
组合使用是个不错的选择:
const person = {
Object.entries(person)
返回一个键和值的元组数组:[[''name','John Smith'],['job','agent']]
。然后,使用 for...of
循环遍历数组,并将每个元组解构为 const [prop,value]
。
7. 遍历DOM集合
你可能知道 HTMLCollection
令人沮丧。主要是因为 HTMLCollection
是一个类数组的对象(而不是常规数组),所以我们无法使用数组的方法。
例如,每个 DOM
元素的 children
属性都是 HTMLCollection
。好在 for...of
可以在类似数组的对象上进行迭代,因此我们可以轻松地迭代 children
:
const children =
此外,for...of
可以迭代 NodeList
集合(可迭代)。例如,函数 document.querySelectorAll(query)
返回一个 NodeList
:
const allImages =
如果你想遍历 DOM
中的不同种类的集合,那么 for...of
语句是一个不错的选择。
8. 性能
迭代大型数组时,for...of
的执行速度可能会比经典方法慢:
const a = [
在每次迭代中调用迭代器比通过增加索引访问的开销更大。但是,这种细微差别在使用大型数组的应用程序中以及性能至关重要的应用程序中非常重要,不过这种情况很少发生。
9. 总结
为什么说 for...of
是一颗宝石,因为:
它简明扼要
它接受迭代器,包括数组,字符串,
Set
,Map
,DOM集合它接受类数组对象
迭代的项目可以在就地解构。
你首选的迭代数组项的方式是什么?
推荐阅读 点击标题可跳转
200 行 JS 代码,带你实现代码编译器
前端同学经常忽视的一个 JavaScript 面试题
关于前端学习路线的一些建议
觉得本文对你有帮助?请分享给更多人
关注「前端大全」加星标,提升前端技能
好文章,我在看❤️
Archive of Our Own_为什么说for...of循环是JS中的宝石?相关推荐
- Archive of Our Own_开箱用out-of-box Redis序列号生成器 不再写任何代码 你值得拥有
把简单的东西"傻瓜化"是软件开发追求的目标之一.请看下图: 左边是在 application.yml 里配置了3个生成器,右边可以直接注入到代码中使用,注意,不用写任何代码.这酸爽 ...
- Archive of Our Own_影视 | 怪兽大战外星人外传:活死人萝卜之夜 Night.of.the.Living.Carrots...
怪兽大战外星人外传:活死人萝卜之夜(2011) Night of the Living Carrots(2011) On Halloween, a mutant alien pumpkin explo ...
- 一个讨论引发关于js中函数声明,函数表达式,形参与变量声明赋值引发的一些事(http://www.cnblogs.com/zhouyongtao/archive/2012/11/22/2783089)
//Firefox 17下运行结果 function a(){} undefined [function a(){}, 2, 3] ee 444 6 ========================= ...
- mysql 表引擎无法更新_Mysql安装archive引擎更新表引擎
1,在mysql命令行中安装Archive引擎 1,查找mysql plugins lib目录,看目录中是否存在Archive的so; mysql > show variables like'p ...
- oracle flashback archive,ORACLE Flashback Data Archive
Flashback Data Archive 11g的新功能,有如下特性. 1.在有效期内保存事务改变的信息. 2.FDA包含一个或多个表空间,可以创建多个FDA,以sysdba登陆时,可以指定默认的 ...
- oracle flashback6,【oracle】闪回flashback-11g-flashback data Archive
Flashback data Archive 1.说明 Flashback data archive在它的有效期内将保存事物改变的信息. FDA包含一个或者多个表空间,我们可以创建多个FDA,当以sy ...
- 多媒体音量条显示异常跳动
问题: 项目中出现音量条显示异常的bug:在+-音量时,音量正常加减,只是音量数值及音量条会乱跳.显示不正常. 各种猜测: 是不是音量控制键未触发: 是不是按键js中未适配↑↓按键控制音量,只适配了专 ...
- Java基于对象基础 基于对象和面向对象的区别(转)
Java基于对象基础 基于对象和面向对象的区别 JavaScript设计者想把javascript语言设计成基于对象(object-based)的语言,他想把这个与面向对象(object-orient ...
- Android WebView使用与JavaScript使用
WebView基本使用 WebView是View的一个子类,可以让你在activity中显示网页. 可以在布局文件中写入WebView:比如下面这个写了一个填满整个屏幕的WebView: <?x ...
最新文章
- linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件...
- 【iCore3 双核心板】例程二十一:LAN_TCPS实验——以太网数据传输
- flac3d命令流实例大全_如何在Linux上使用xargs命令
- 结合zuul网关的鉴权流程
- oracle 删除用户 递归,ORACLE递归查询遍历详解
- sql server driver for php,Microsoft SQL Server Driver for PHP
- 未能卸载该设备.启动计算机,未能卸载该设备。启动计算机时可能需要该设备...
- 在centos 6.5下安装svn (Subversion)
- Android9.0编译系统原理
- unity素材一:奥日与黑暗森林风格2D场景
- 《软件工程》-用户界面设计
- BPDU网桥协议数据单元和STP生成树协议
- 和平精英追猎模式怎么没了 和平精英追猎下架原因
- 苹果笔记本开机问号白色问号?
- 科大讯飞语音离线命令识别
- C#程序设计实践课程设计之数字华容道
- 强制用户使用定向推送功能是什么意思?整改措施请收好
- 张驰课堂:老板会武术,谁也挡不住!六西格玛培训的魅力
- 刷脸支付生活中普及太广民众满意度甚高
- 受“头号玩家”的启发,FantaVerse(梵塔世界)正在将OASIS级别的元宇宙变为现实
热门文章
- 验证运放输入端之间电容作用
- mysql stdistance_geometry和geography的区别
- vue iview 之使用
- 电信增值短信,彩信平台软件2013年,我司平台软件提供,售后1年期技术维护,客户名单
- 《良乔说软件》第一回 问君情深深几许?我的眼里只有你
- linux wifi 源代码,MTK MT7601 WIFI AP linux driver source code - 源码下载|嵌入式/单片机编程|嵌入式Linux|源代码 - 源码中国...
- c语言 switch案例,C语言switch语句实例
- linux dae文件下载,dae文件扩展名,dae文件怎么打开?
- 专业人士告诉你数据分析师适合女生吗?
- Windows Oracle ODBC驱动数据源安装配置