版权

文章转载自:https://github.com/zhongsp

建议您直接跳转到上面的网址查看最新版本。

可迭代性

当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的。 一些内置的类型如ArrayMapSetStringInt32ArrayUint32Array等都已经实现了各自的Symbol.iterator。 对象上的Symbol.iterator函数负责返回供迭代的值。

for..of 语句

for..of会遍历可迭代的对象,调用对象上的Symbol.iterator属性。 下面是在数组上使用for..of的简单例子:

let someArray = [1, "string", false];

for (let entry of someArray) {
console.log(entry); // 1, "string", false
}

for..of vs. for..in 语句

for..offor..in均可迭代一个列表;但是用于迭代的值却不同,for..in迭代的是对象的的列表,而for..of则迭代对象数字键对应的值。

下面的例子展示了两者之间的区别:

let list = [4, 5, 6];

for (let i in list) {
console.log(i); // "0", "1", "2",
} for (let i of list) {
console.log(i); // "4", "5", "6"

别一个区别是for..in可以操作任何对象;它提供了查看对象属性的一种方法。 但是for..in关注于迭代对象的值。内置对象MapSet已经实现了Symbol.iterator属性,让我们可以访问它们保存的值。

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals"; for (let pet in pets) {
console.log(pet); // "species"
} for (let pet of pets) {
console.log(pet); // "Cat", "Dog", "Hamster"
}

代码生成

目标为 ES5 和 ES3

当生成目标为ES5或ES3,迭代器只允许在Array类型上使用。 在非数组值上使用for..of语句会得到一个错误,就算这些非数组值已经实现了Symbol.iterator属性。

编译器会生成一个简单的for循环做为for..of循环,比如:

let numbers = [1, 2, 3];
for (let num of numbers) {
console.log(num);
}

生成的代码为:

var numbers = [1, 2, 3];
for (var _i = 0; _i < numbers.length; _i++) {
var num = numbers[_i];
console.log(num);
}

目标为 ECMAScript 2015 或更高

当目标为兼容ECMAScipt 2015的引擎时,编译器会生成相应引擎的for..of内置迭代器实现方式。

转载:《TypeScript 中文入门教程》 15、可迭代性的更多相关文章

  1. 转载:TypeScript 简介与《TypeScript 中文入门教程》

    简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...

  2. 转载:《TypeScript 中文入门教程》

    缘由 事情是这样的,我想搜索 TypeScript 中文教程,结果在 https://www.baidu.com , https://cn.bing.com ,上都找不到官方的翻译,也没有一个像样的翻 ...

  3. 【转】TypeScript中文入门教程

    目录 虽然我是转载的,但看在Copy这么多文章也是很幸苦的好吧,我罗列一个目录. 转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:&l ...

  4. 《TypeScript 中文入门教程》

    转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015- ...

  5. 转载:《TypeScript 中文入门教程》 8、函数

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 函数是JavaScript应用程序的基础. 它帮助你实现抽象层,模拟类,信息隐藏 ...

  6. 转载:《TypeScript 中文入门教程》 17、注解

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 随着TypeScript和ES6里引入了类,现在在一些场景下我们会需要额外的特性 ...

  7. 转载:《TypeScript 中文入门教程》 14、输入.d.ts文件

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 当使用外部JavaScript库或新的宿主API时,你需要一个声明文件(.d.t ...

  8. 转载:《TypeScript 中文入门教程》 13、类型兼容性

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript里的类型兼容性基于结构子类型的. 结构类型是只一种只使用其成 ...

  9. 转载:《TypeScript 中文入门教程》 12、类型推导

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 这节介绍TypeScript里的类型推论.即,类型是在哪里如何被推断的. 基础 ...

随机推荐

  1. 基于GIS的旅游辐射区人口统计

    在旅游规划中,考虑旅游景点周边的人口负载量是很重要的一个方面,这将直接影响资源的投入和配置,开发潜力和规模等.基于GIS可以将人口信息进行空间化的展示,还可以通过空间分析的方法计算出旅游景点辐射区的人 ...

  2. Azure PowerShell (4) 使用PowerShell管理多个订阅

    <Windows Azure Platform 系列文章目录> 笔者手上有两个Azure账户. - Azure Global (windowsazure.com)账户.有两个订阅. - 世 ...

  3. Tomcat 让百度的域名显示自己的页面内容(玩耍篇)

    步骤一:在 C:\Windows\System32\drivers\etc目录下的Hosts文件中添多一个条目,如下图, 第二步:在server.xml文件中做响应配置,如下图 然后在Host节点中进 ...

  4. Atitit View事件分发机制

    1. Atitit View事件分发机制 1. Atitit View事件分发机制1 1.1. 三个关键方法 dispatchTouchEvent onInterceptTouchEvent onTo ...

  5. Android-Activity-Dialog theme touch outsize

    最近遇到一个蛋疼的问题: 一个Activity,主题设置成 Dialog 然后点击外面要求这个Activity 不能关闭. 这下好了,直接在 style 的 theme 里面加一个属性就好了. 加上去 ...

  6. 微信蓝牙设备开发教程之获取设备deviceid和二维码(3)

    文章转载地址  http://www.vxzsk.com/87.html  设备授权 调用 设备授权新接口 ,获取deviceid和二维码,然后利用获取到的deviceid更新设备属性(如mac地址, ...

  7. G2 2.0 更灵活、更强大、更完备的可视化引擎!

    概述 G2作为一款技术产品,自诞生以来,服务于广大的Web工程师群体和一部分数据分析师.一直来,G2 因其易用的语法和扎实的可视化理论基础,广受使用者好评.G2 1.x 的可视化能力已经非常强大,使用 ...

  8. Entity Framework Code First实体关联数据加载

    在项目过程中,两个实体数据之间在往往并非完全独立的,而是存在一定的关联关系,如一对一.一对多及多对多等关联.存在关联关系的实体,经常根据一个实体的实例来查询获取与之关联的另外实体的实例. Entity ...

  9. Entity Framework Code First添加修改及删除单独实体

    对于一个单独实体的通常操作有3种:添加新的实体.修改实体以及删除实体. 1.添加新的实体 Entity Framework Code First添加新的实体通过调用DbSet.Add()方法来实现. ...

  10. 深入理解javascript描述元素内容的5个属性

    × 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...