迭代器与生成器

最新推荐文章于 2024-04-04 00:00:00 发布

蟑螂大道

最新推荐文章于 2024-04-04 00:00:00 发布

阅读量34

点赞数

分类专栏： ES6笔记文章标签： javascript 前端 vue.js ecmascript

本文链接：https://blog.csdn.net/qq_43551056/article/details/130710877

版权

ES6笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章详细介绍了JavaScript中的迭代器概念，如何为对象自定义迭代器，以及使用for...of、展开语法等。接着讨论了可迭代对象，如Array、Map、Set等，并展示了如何通过Symbol.iterator方法实现对象的迭代。此外，文章还探讨了生成器函数，它们如何通过yield关键字控制执行流程，并作为精确的迭代器。最后，提到了生成器可以简化迭代器的实现。

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

迭代器

迭代器：在js中为一个对象，该可以遍历容器（例如链表数组树等）上的元素，而不需要知道容器内部的实现细节。该对象称为迭代器。

<body>
  <script>

    const arr = [1, 2]
    
    // 创建迭代器对象的函数
    function createArrIterator(arr) {
      let index = 0
      return {
        next: function () {
          if (index < arr.length) {
            return { done: false, value: arr[index++] }
          } else {
            return { done: true, value: undefined }
          }
        }
      }
    }

    // arrIterator称为数组arr的迭代器
    let arrIterator = createArrIterator(arr)
    console.log(arrIterator.next());
    console.log(arrIterator.next());
    console.log(arrIterator.next());
    console.log(arrIterator.next());
	
    //{done: false, value: 1}
	//{done: false, value: 2}
	//{done: true, value: undefined}
	//{done: true, value: undefined}
  </script>
</body>

可迭代对象

常见可迭代对象

String、Array、Map、Set、arguments对象、NodeList集合
可迭代对象应用场景
- 用在js语法：forof、展开语法、解构赋值、yield*
- 创建实例时：new Map(Iterator)、new WeakMap(Iterator)、new Set(Iterator)、new WeakSet(Iterator)
- 用在某些方法：Promise.all(Iterator)、Promise.race(Iterator)、Array.from(Iterator)
类的自定义迭代器
- 给类添加迭代器函数后，实例化的对象都是可迭代对象
迭代器的中断，迭代器中的return()函数监听到中断
- 遍历过程中break、return、throw中断了循环
- 解构赋值时，没有解构所有的值

<body>
  <script>
    // 对象obj为不可迭代对象
    // 在对象内部自定义实现迭代器
    const obj = {
      name: 'cjc',
      age: 999,
	  
      // 创建迭代器对象的函数
      [Symbol.iterator]() {
        let values = Object.values(this)
        let index = 0
        // 返回一个迭代器对象
        return {
          next: () => {
            if (index < values.length) {
              return { value: values[index++], done: false }
            } else {
              return { value: undefined, done: true }
            }
          }
        }
      }
    }
	
    // 方式1 forof
    for (const value of obj) {
      console.log(value);
    }
	
    // 方式2 创建迭代器
    const objIterator = obj[Symbol.iterator]()
    console.log(objIterator.next().value);
    console.log(objIterator.next().value);
  </script>
</body>

// 数组为可迭代对象，内部实现了迭代器
let arr = [1,2,3]

// 方式1 创建迭代器对象
let iterator = arr[Symbol.iterator]()
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

// 方式2 forof
for (const iterator of arr) {
    console.log(iterator);
}

//控制台：
{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}
1
2
3

生成器

生成器函数：

语法形式：function* foo(){}，内部通过yeild控制
生成器函数的返回值为特殊的迭代器对象，称为生成器Generator

生成器对象Generator：精准的控制函数内部的暂停和继续执行

<body>
  <script>

    function* foo(name1){
      console.log('foo函数内代码111',name1);
      console.log('foo函数内代码111',name1);
      const name2 = yield "bbb"
      console.log('foo函数内代码222',name2);
      console.log('foo函数内代码222',name2);
      const name3 = yield "ccc"
      console.log('foo函数内代码333',name3);
      console.log('foo函数内代码333',name3);
    }

    // 创建迭代器对象
    const generator = foo('name1')

    // generator.next() 函数内部执行到第1个yeild
    // yeild后面的值"bbb" 赋值到{value: 'bbb', done: false}
    console.log(generator.next());
    // generator.next('name2') 函数内部执行到第2个yeild
    console.log(generator.next('name2'));
    // generator.next('name3') 函数内部执行到结尾，默认return undefined;
    console.log(generator.next('name3'));
  </script>
</body>

// 打印结果:
foo函数内代码111 name1
foo函数内代码111 name1
{value: 'bbb', done: false}
foo函数内代码222 name2
foo函数内代码222 name2
{value: 'ccc', done: false}
foo函数内代码333 name3
foo函数内代码333 name3
{value: undefined, done: true}

生成器替代迭代器及语法糖

<body>
  <script>
    // let obj = {
    //   name: 'cjc',
    //   age: 999,
    //   arr: [1, 2, 3],

    //   [Symbol.iterator]() {
    //     let index = 0
    //     return {
    //       next: () => {
    //         if (index < this.arr.length) {
    //           return { value: this.arr[index++], done: false }
    //         } else {
    //           return { done: true }
    //         }
    //       }
    //     }
    //   }
    // }

    let obj = {
      name: 'cjc',
      age: 999,
      arr: [1, 2, 3],

      *[Symbol.iterator]() {
        // yield*后面接可迭代对象
        yield* this.arr
      }
    }

    for (const iterator of obj) {
      console.log(iterator);
    }
  </script>
</body>