16、生成器和迭代器

皇子_2344

已于 2023-06-06 17:51:16 修改

阅读量56

点赞数

分类专栏： TS 文章标签： typescript

于 2023-04-04 15:39:55 首次发布

本文链接：https://blog.csdn.net/hz_2344/article/details/129954505

版权

TS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章介绍了JavaScript中的生成器函数，展示了如何使用yield关键字处理同步和异步操作。同时，解释了Set和Map数据结构的特性，以及如何通过Symbol.iterator实现对它们的迭代。此外，还讲解了如何为对象手动添加迭代器支持以实现for...of循环和解构赋值。

摘要由CSDN通过智能技术生成

1、生成器（生成器与迭代器用法一样）

// 写法 function* 名称(){}
function* gen() {
  // yield关键字后面跟返回值（同步|异步都可以处理）
  yield '皇子' // 同步
  yield Promise.resolve('皇子') // 异步
  yield '小皇子' // 同步
}

// 生成器调用 next()
// const woman: Generator<"皇子" | Promise<string>, void, unknown>
const woman = gen()
console.log('第1次调用', woman.next()); // 第1次调用 { value: '皇子', done: false } 
console.log('第2次调用', woman.next()); // 第2次调用 { value: Promise { '皇子' }, done: false }
console.log('第3次调用', woman.next()); // 第3次调用 { value: '小皇子', done: false }
console.log('第4次调用', woman.next()); // 第4次调用 { value: undefined, done: true } 如果done:true说明没有东西可以迭代

2、迭代器

先熟悉 set、map

// set虽然与数组很像，但是它(只有数字和字符串)是天然去重的（对象不支持去重）
let set: Set<number> = new Set([1, 1, 5, 6, 3, 4, 2, 4, 2])
console.log('set:', set) // set: Set(6) { 1, 5, 6, 3, 4, 2 }
// Map接收两个类型key和value
let map: Map<any, any> = new Map()
// Map的key是可以使用引用类型的
let Arr = [1, 2, 3]
map.set(Arr, '我的key是2') // map.set()设置值
// map.get()取值
console.log(map.get(Arr)); // 我的key是2
console.log('map是：', map); // map是： Map(1) { [ 1, 2, 3 ] => '我的key是2' }

// function的arguments获取参数的集合，类数组
function args() {
  console.log(arguments);
}

// let list = document.querySelectorAll('div') // 也是一个类数组
// list.// 没有数组的方法，但是有forEach

写一个each方法，调用自身迭代器，实现遍历

// 写一个each方法，调用自身迭代器，实现遍历
const each = (value: any) => {
  // 第1步：获取迭代器
  let It: any = value[Symbol.iterator]() // 迭代器是个方法要先调用下
  // 第2步：定义默认值 next
  let next: any = { done: false }
  // 如果为true，就停掉循环
  while (!next.done) {
    // 把真正的next（It.next()）赋值给自己定义的next
    next = It.next()
    // 打印出来
    if (!next.done) {
      console.log('结果是：', next.value);
    }
  }
}

// 调用
each(map) // 结果是： [ [ 1, 2, 3 ], '我的key是2' ]
each(set)
/*
结果是： 1
结果是： 5
结果是： 6
结果是： 3
结果是： 4
结果是： 2 */

// *each方法简写，迭代器的语法糖 for of
for (let value of map) {
  console.log('语法糖1：', value); // 语法糖1： [ [ 1, 2, 3 ], '我的key是2' ]
}

for (let value of set) {
  console.log('语法糖：', value);
}
/*
语法糖： 1
语法糖： 5
语法糖： 6
语法糖： 3
语法糖： 4
语法糖： 2 */

// *for of 对象不能用，因为对象中没有iterator
// let ob = { name: 'huangzi', age: 20 }
// for (let value of ob) { } // Type '{ name: string; age: number; }' must have a '[Symbol.iterator]()' method that returns an iterator

// 解构的底层原理是调用iterator
let a11: number[] = [6, 8, 9]
let [a, b, c] = [3, 2, 1]
let copyA11 = [...a11]

// 手动实现：对象支持for of
let oFn = {
  max: 5,
  current: 0,
  // 手动实现[Symbol.iterator]()方法，让对象支持for of、对象的解构
  [Symbol.iterator]() {
    return {
      max: this.max,
      current: this.current,
      next() {
        if (this.current === this.max) { // 迭代结束
          return {
            value: undefined,
            done: true
          }
        } else { // 迭代继续
          return {
            value: this.current++,
            done: false
          }
        }
      }
    }
  }
}

for (let value of oFn) {
  console.log('手动实现对象for of->', value)
}
/* 
手动实现对象for of-> 0
手动实现对象for of-> 1
手动实现对象for of-> 2
手动实现对象for of-> 3
手动实现对象for of-> 4 */

// 对象解构
let x = { ...oFn }
console.log('x->', x)
/*
x-> {
  max: 5,
  current: 0,
  [Symbol(Symbol.iterator)]: [Function: [Symbol.iterator]]
} */

// 对象解构与数组解构不一样
// 数组解构：底层调用的是Symbol的iterator
// 对象解构：