16.迭代器 和 生成器

Symbol.iterator 迭代器 和 生成器 for ofSymbol.iterator 迭代器 和 生成器 for of1. 生成器的用法1.1. 按顺序执行即使有异步操作也会按顺序执行1.2. done: true, value: undefined 说明没有东西可迭代了2. 迭代器2.1. set和map基本用法2.2. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等2.3. 迭代器的语法糖 for of2.4. for of 对象不能用对象没有Symbol.iterator迭代器2.5. 解构底层原理也是去调用 iterator 方法, 扩展数组也是调用 iterator 方法2.6. 迭代器的原理2.7. 手写对象支持for of遍历Symbol.iterator 迭代器 和 生成器 for of1. 生成器的用法1.1. 按顺序执行即使有异步操作也会按顺序执行1.2.done: true, value: undefined说明没有东西可迭代了// 1. 生成器基本用法function*gen(){yieldPromise.resolve(小满)// 可以是同步或者是异步yield大满yield超大满yield满了}// let man gen()// console.log(man.next()) // 按顺序执行即使有异步操作也会按顺序执行// console.log(man.next())// console.log(man.next())// console.log(man.next())// console.log(man.next()) // done: true, value: undefined说明没有东西可迭代了2. 迭代器2.1. set和map基本用法// set mapletset:SetnumbernewSet([1,1,2,2,3,3,4,4])// 天然去重 1 2 3 4console.log(set)letmap:Mapany,anynewMap()letarr[a,b,c]// map和对象的区别map的key可以是引用类型对象只能是字符串或者symbol类型map.set(arr,小满)map.set(1,2)// map.set(c, 3)// console.log(map)// console.log(map.get(arr))2.2. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等// 2.1. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等// Symbol.iteratorfunctionarg(){console.log(arguments)// 维数组或者叫类数组// arguments.pop/push 是没有这些方法的// 可以使用迭代器去遍历arguments数组}letlistdocument.querySelectorAll(div)// 类数组Symbol(Symbol.iterator)vararr[1,2,3,4]letiteratorarr[Symbol.iterator]()console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())2.3. 迭代器的语法糖 for ofletset:SetnumbernewSet([1,1,2,2,3,3,4,4])// 天然去重 1 2 3 4for(letiofset){console.log(i)// 1 2 3 4}2.4. for of 对象不能用对象没有Symbol.iterator迭代器// 报错for(letiof{name:1}){console.log(i)}2.5. 解构底层原理也是去调用 iterator 方法, 扩展数组也是调用 iterator 方法// 展开运算符...arr// 解构[a, b, c] [...arr]vararr[1,2,3,4]const[a,b,c][...arr]console.log(a,b,c)2.6. 迭代器的原理letset:SetnumbernewSet([1,1,2,2,3,3,4,4])letmap:Mapany,anynewMap()letarr[a,b,c]map.set(arr,小满)map.set(1,2)map.set(c,3)consteach(value:any){constItvalue[Symbol.iterator]()letnext:any{done:false}while(!next.done){nextIt.next()if(!next.done){console.log(next.value)}}}each(map)each(set)2.7. 手写对象支持for of遍历// 对象支持for of遍历constobj{max:5,current:0,[Symbol.iterator](){return{max:this.max,current:this.current,next:(){if(this.currentthis.max){return{done:true,value:undefined}}return{done:false,value:this.current}}}}}for(constiofobj){console.log(i)}// 解构和扩展obj都可行letx[...obj]console.log(x)2.8. 对象解构的底层调用的是for in