16.迭代器 和 生成器
Symbol.iterator 迭代器 和 生成器 for of
- Symbol.iterator 迭代器 和 生成器 for of
- 1. 生成器的用法
- 1.1. 按顺序执行，即使有异步操作，也会按顺序执行
- 1.2. ` done: true, value: undefined `说明没有东西可迭代了
- 2. 迭代器
- 2.1. set和map基本用法
- 2.2. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等
- 2.3. 迭代器的语法糖 for of
- 2.4. for of 对象不能用，对象没有Symbol.iterator迭代器
- 2.5. 解构底层原理也是去调用 iterator 方法, 扩展数组也是调用 iterator 方法
- 2.6. 迭代器的原理
- 2.7. 手写对象支持for of遍历
Symbol.iterator 迭代器 和 生成器 for of
1. 生成器的用法
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:Set<number>=newSet([1,1,2,2,3,3,4,4])// 天然去重 1 2 3 4console.log(set)letmap:Map<any,any>=newMap()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数组}letlist=document.querySelectorAll('div')// 类数组Symbol(Symbol.iterator)vararr=[1,2,3,4]letiterator=arr[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 of
letset:Set<number>=newSet([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:Set<number>=newSet([1,1,2,2,3,3,4,4])letmap:Map<any,any>=newMap()letarr=['a','b','c']map.set(arr,'小满')map.set('1',2)map.set('c',3)consteach=(value:any)=>{constIt=value[Symbol.iterator]()letnext:any={done:false}while(!next.done){next=It.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.current>=this.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