TypeScript入门教程 之 for ... of 与 for ... in
TypeScript入门教程 之 for ... of 与 for ... in
新手JavaScript开发人员经常遇到的错误是,for...in
数组不会遍历数组项。相反,它迭代传入的对象的键。下面的示例对此进行了演示。在这里您会期望9,2,5
得到但得到索引0,1,2
:
var someArray = [9, 2, 5]; for (var item in someArray) {console.log(item); // 0,1,2 }
这是为什么for...of
在TypeScript(和ES6)中存在的原因之一。以下内容遍历数组,正确地按预期注销了成员:
var someArray = [9, 2, 5]; for (var item of someArray) {console.log(item); // 9,2,5 }
同样,TypeScript可以使用for...of
以下命令逐个字符地处理字符串:
var hello = "is it me you're looking for?"; for (var char of hello) {console.log(char); // is it me you're looking for? }
生成JS的情况
对于ES6之前的目标,TypeScript将生成标准for (var i = 0; i < list.length; i++)
的循环类型。例如,这是我们前面的示例生成的内容:
var someArray = [9, 2, 5]; for (var item of someArray) {console.log(item); }// becomes //for (var _i = 0; _i < someArray.length; _i++) {var item = someArray[_i];console.log(item); }
您会看到使用for...of
可以使意图更清晰,还可以减少必须编写的代码量(以及需要提供的变量名)。
局限性
如果您未针对ES6或更高版本,则生成的代码将假定该属性length
存在于对象上,并且可以通过数字对对象进行索引,例如obj[2]
。因此,仅这些旧式JS引擎string
及其上才支持它array
。
如果TypeScript可以看到您没有使用数组或字符串,则将给您一个明确的错误“不是数组类型或字符串类型”;
let articleParagraphs = document.querySelectorAll("article > p"); // Error: Nodelist is not an array type or a string type for (let paragraph of articleParagraphs) {paragraph.classList.add("read"); }
使用for...of
的是仅适用于的东西,必须提前知道是一个数组或一个字符串。请注意,在将来的TypeScript版本中可能会删除此限制。
摘要
您将对数组的元素进行多次迭代,您会感到惊讶。下次您发现自己要这样做时,请尝试for...of
一下。您可能会让下一个审核您的代码的人高兴。
翻译来源:https://gitee.com/yunwisdoms/typescript-book/blob/master/docs/for...of.md
TypeScript入门教程 之 for ... of 与 for ... in相关推荐
- 我写的第一本书《TypeScript 入门教程》
阅读原文 持续了大半年的学习和写作,在今天终于告一段落了. 写书之旅 最初有写书的想法,是刚加入微软的时候. 由于工作中需要重度使用 TypeScript,所以我花了几天的时间研读了好几遍官方手册和中 ...
- TypeScript入门教程 之 classes-emit
TypeScript入门教程 之 classes-emit What's up with the IIFE 为该类生成的js可能是: function Point(x, y) {this.x = x; ...
- TypeScript入门教程 之 箭头函数
TypeScript入门教程 之 箭头函数 亲切地称为粗箭头(因为->是细箭头并且=>是粗箭头),也被称为lambda函数(由于其他语言).另一个常用功能是胖箭头功能()=>some ...
- TypeScript入门教程 之 类/抽象类/构造器/Getter/Setter
TypeScript入门教程 之 类/抽象类/构造器/Getter/Setter 将JavaScript中的类作为头等项很重要的原因是: 类提供了有用的结构抽象 为开发人员提供一种一致的方式来使用类, ...
- TypeScript入门教程 之 const
TypeScript入门教程 之 const const是ES6 / TypeScript提供的非常受欢迎的功能.它使您可以与变量保持不变.从文档以及运行时的角度来看,这都是很好的.要使用const只 ...
- TypeScript入门教程 之 解构
TypeScript入门教程 之 解构 TypeScript支持以下形式的解构(以解构的名义命名,即分解结构): 对象分解 阵列解构 人们很容易将解构视为结构的逆.JavaScript中的结构化方法是 ...
- TypeScript入门教程 之 枚举 Enums
TypeScript入门教程 之 枚举 Enums 枚举是一种组织相关值集合的方法.许多其他编程语言(C / C#/ Java)具有enum数据类型,而JavaScript没有.但是,TypeScri ...
- TypeScript入门教程 之 生成器函数
TypeScript入门教程 之 生成器函数 生成器函数 function *是用于创建生成器函数的语法.调用generator函数将返回一个generator对象.发电机对象如下刚刚所述迭代器接口( ...
- 原创 TypeScript入门教程 之 迭代器
原创 TypeScript入门教程 之 迭代器 Iterator Iterator本身不是TypeScript或ES6功能,Iterator是面向对象的编程语言所通用的行为设计模式.通常,它是一个实现 ...
最新文章
- html 可以折叠的表格,javascript – html5 – 如何折叠和扩展复杂的表格元素
- 暑假周总结七8.26
- elasticsearch高亮显示查询结果
- wp自定义帖子没标签_谷歌对nofollow标签重新定义,百度是否有变化哪?
- uniapp返回上一页_一例万级写入并发,百亿级数据,毫秒级返回架构分享
- Zookeeper实现注册与发现
- inventor 波纹阵列_Inventor技巧之草图驱动的阵列图文教程
- error40无法打开到sql_SQL-mysql游标与触发器
- 2017 Multi-University Training Contest - Team 4:1002. Classic Quotation(KMP+DP)
- java基础:13.2 集合框架 - LinkedList、Queue
- 微信小程序地图添加标记点
- html font文本颜色 字体 大小标签元素
- 推荐一款护眼的软件——f.lux。它可以随着时间,自己调节色温
- Linux 运维是做什么的?有钱途吗?发展前景怎么样?
- 设计一个个人纳税计算程序
- 色粉画的发展历程与西方艺术中的色粉画
- EDUCODER---计算机硬件基础---计算机系统测试 5.16.17.19.1 合集
- Centos7 定时关机
- DHCPV4 VS DHCPV6
- 腾讯蔡晨:十年沉淀,腾讯iOA为企业安全保驾护航 1