TypeScript 基础笔记 ——迭代器|生成器(TS -- 13)

简介: 迭代器|生成器(TS -- 13)


迭代器:Symbol.iterator

迭代器(Iterator)是⼀种对象,它能够⽤来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址通俗点说,迭代器表现的像指针,读取集合或者数组中的⼀个值,读完以后⼜指向下⼀条数据,⼀个个数过去。

生成器: for of

迭代器

迭代器Interator 的用法

1.Interator是 es6 引入的一种新的遍历机制。两个核心:

(1) 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为 Symbol.iterator 的方法来实现。(2) 迭代器是用于遍历数据结构元素的指针(如数据库中的游标)。

使用迭代

  1. 使用Symbol.interator 创建一个迭代器
  2. 调用 next 方法向下迭代,next 方法会返回当前的位置
  3. 当 done 为 true 时则遍历结束

注意点:

  1. 在迭代器迭代元素的过程中,不允许使⽤集合对象改变集合中的元素个数,如果需要添加或者删除只能使⽤迭代器的⽅法操作。
  2. 如果使⽤了集合对象改变集合中的元素个数那么就会报错:不改变个数即可,替换也可以的。
  3. 迭代器的⽣存周期为创建到使⽤结束的时段。
  4. foreach : Iterator 的封装变形,变得⽐ Iterator更简单。但是他也需要知道数组或集合的类型。并且,Iterator 需要注意的,foreach同样需要注意。
  • 存在interator迭代器的有 =>
  • 数组[]里能够找到 Symbol(Symbol.interator)
  • argument内找到 Symbol(Symbol.interator)
  • NodeList内找到Symbol(Symbol.interator)
  • new set()内的Prototype下一层Symbol(Symbol.interator)
  • new Map同理,一样有Symbol(Symbol.interator)

letarr:Array<number>= [1,5,6]

letit:Intertor<number>=arr[Symbol.interator]()//注意这里的接收类型<number>是固定要写的

//next一次只遍历一个数,下一次调用将从上一次遍历到的位置开始下一个

console.log(iterator.next());  //{ value: 1, done: false }

console.log(iterator.next());  //{ value: 5, done: false }

console.log(iterator.next());  //{ value: 6, done: false }

console.log(iterator.next());  //{ value: undefined, done: true }

//返回的有两个属性,一个value,一个done。value当读取到值的时候,done为false、读取不到为true

typemapKeys=string|number//相当于起别名,在下方使用的时候集合了string与number就会相对方便不少

letset:Set<number>=newSet([1,2,3])

letmap:Map<mapKeys,mapKeys>=newMap()//这里断言两个mapKeys,一个对应key,一个对应value

map.set('1','小满')

map.set('2','看看腿')

//小迭代器的实现

functiongen(erg:any){//这里定义为any类型是因为上面要传到这里的有多种不同类型

   letit:interator<any>=erg[Symbol.interator]()

   letnext:any= {done:false}

   while(!next.done){//判断next,由于next默认为fasle,while循环只有true会通过,所以需要取反

       next=it.next()//刚开始是声明next给个默认值,等到开始循环的时候再把真正的值赋给他

       if(!next.done){

           console.log(next);

       }

   }

}

gen(arr)//调用第一个代码块的arr,输出了与console.log(iterator.next());一样的内容

//对象是不支持迭代器的使用的,其实我们在控制台输出一个对象,查找他内置的属性,也是找不到Symbol.interator的

Symbol列表

Symbol.hasInstance方法,会被 instanceof 运算符调用。构造器对象用来识别一个对象是否是其实例。

Symbol.isConcatSpreadable布尔值,表示当在一个对象上调用 Array.prototype.concat 时,这个对象的数组元素是否可展开。

Symbol.iterator方法,被 for-of 语句调用。返回对象的默认迭代器。

Symbol.match方法,被 String.prototype.match 调用。正则表达式用来匹配字符串

Symbol.replace方法,被 String.prototype.replace 调用。正则表达式用来替换字符串中匹配的子串。

Symbol.search方法,被 String.prototype.search 调用。正则表达式返回被匹配部分在字符串中的索引。

Symbol.species函数值,为一个构造函数。用来创建派生对象。

Symbol.split方法,被 String.prototype.split 调用。正则表达式来用分割字符串。

Symbol.toPrimitive方法,被 ToPrimitive 抽象操作调用。把对象转换为相应的原始值。

Symbol.toStringTag方法,被内置方法 Object.prototype.toString 调用。返回创建对象时默认的字符串描述。

Symbol.unscopables对象,它自己拥有的属性会被 with 作用域排除在外。


生成器(Builder)

又称建造者模式,该模式是一种创建型设计模式,能够分步骤创建复杂对象。该模式允许使用相同的创建代码生成不同类型和形式的对象。

具体内容请跳转链接查看:设计模式-生成器

for…of 语句

for…of 会遍历可迭代的对象,调用对象上的 Symbol.iterator方法。(此对象非彼对象,这个对象是指你即将下手的目标)

对象也是不支持的,因为对象没用Symbol.iterator方法。

typemapKeys=string|number//相当于起别名,在下方使用的时候集合了string与number就会相对方便不少

letset:Set<number>=newSet([1,2,3])

letmap:Map<mapKeys,mapKeys>=newMap()//这里断言两个mapKeys,一个对应key,一个对应value

map.set('1','小满')

map.set('2','看看腿')

for (letitemofset){

   console.log(item)

}//打印出1 2 3

for (letitemofarr){

   console.log(item)

}//打印出4 5 6

for (letitemofmap){

   console.log(item)

}//打印出['1','小满']    ['2','看看腿']

//其实这就是一个语法糖,将of后面的内容遍历存储到of前面的变量中

跟for in 的区别

for in循环出来的是索引而不是内容,这个应该是最本质的区别了

因为for of会调用底层interator里面那个list的.value

目录
相关文章
|
18天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript数组转置
[小笔记]TypeScript/JavaScript数组转置
42 0
|
18天前
|
JavaScript
【typeScript】搭建TS环境
【typeScript】搭建TS环境
|
18天前
|
存储 JavaScript 前端开发
TS中 说说数组在TypeScript中是如何工作的?
TS中 说说数组在TypeScript中是如何工作的?
|
18天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
32 0
|
18天前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
34 4
|
18天前
|
JavaScript 前端开发 开发者
JavaScript(JS)和TypeScript(TS)的区别
JavaScript(JS)和TypeScript(TS)的区别
38 0
|
18天前
|
JavaScript 前端开发 Java
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
240 0
|
18天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的zip(不使用map)
[小笔记]TypeScript/JavaScript模拟Python中的zip(不使用map)
22 0
|
18天前
|
存储 JavaScript 前端开发
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
TypeScript笔记(15)—— 深入理解TypeScript中的装饰器
61 0
|
18天前
|
存储 JavaScript 前端开发
TypeScript笔记(5)—— 基本数据类型
TypeScript笔记(5)—— 基本数据类型
44 0