ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)

简介: ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)

11. 迭代器

迭代器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。

  1. ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 使用
  2. 原生具备 iterator 接口的数据(可用 for of 遍历)
    a) Array
    b) Arguments
    c) Set
    d) Map
    e) String
    f) TypedArray
    g) NodeList

Iterator 是对象上的一个属性:Symbol.Iterator

11.1 for of 遍历

const arr = ['apple', 'banana', 'orange']
    // for of 遍历
    console.log('for of 遍历 ---- 获取的是键值')
    for (const iterator of arr) {
      console.log(iterator)
    }
    // for in 遍历
    console.log('for in 遍历 ---- 获取的是键')
    for (const key in arr) {
      console.log(key)
    }
    console.dir(arr)

11.2 工作原理

a) 创建一个指针对象,指向当前数据结构的起始位置

let i = arr[Symbol.iterator]()
    console.log(i)

b) 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员

console.log(i)
    console.log(i.next())

c) 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员

d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

console.log(i)
    console.log(i.next())
    console.log(i.next())
    console.log(i.next())
    console.log(i.next())
    console.log(i.next())

11.3 迭代器应用 – 自定义遍历数据

需要自定义遍历数据的时候,要想到迭代器。

注意:

返回的对象 done 一直为 false 会一直输出,for of 是以返回的对象 done 为 true 为停止条件。

// 声明一个对象
      const obj = {
        name: '对象',
        content: ['属性1', '属性2', '属性3', '属性4'],
        // 1. 先添加iterator接口
        [Symbol.iterator]() {
          // 5. 索引变量
          let index = 0
          // 6. 保存 obj 对象的 this
          const _this = this
          // Result of the Symbol.iterator method is not an object
          // 2. 返回的结果不是一个对象
          return {
            // undefined is not a function
            // 3. 使用 for of 遍历时,会创建一个指针对象,指针对象中有一个next方法
            next() {
              // 7. 判断是否遍历完成
              if (index < _this.content.length) {
                // Iterator result undefined is not an object
                // 4. 需要返回一个对象
                return {
                  value: _this.content[index++],
                  done: false,
                }
              } else {
                return {
                  value: undefined,
                  done: true
                }
              }
            },
          }
        },
      }
      // 使用 for of 遍历
      // 每次返回的结果是 content 的成员
      for (const iterator of obj) {
        console.log(iterator)
      }

12. 生成器

生成器是一个函数。生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。

// 生成器函数 function 与函数名中间需要有一个 *,靠左靠右都行
    function * gen() {
      console.log('hello')
    }
    // 生成器函数的执行
    // 直接调用不能运行,需要调用next()方法
    let i = gen()
    console.log(i)
    i.next()

生成器函数相当于一个迭代器对象

12.1 yield 语句

yield 可以看成函数的分割符,把函数分割成若干部分,由 next() 方法控制函数代码的执行。

function * gen() {
      console.log('第1个片段')
      yield 'yield 1'
      console.log('第2个片段')
      yield 'yield 2'
      console.log('第3个片段')
      yield 'yield 3'
      console.log('第4个片段')
    }
    let i = gen()
    i.next() // 执行第1个片段
    i.next() // 执行第2个片段
    i.next() // 执行第3个片段
    i.next() // 执行第4个片段

生成器函数可以使用 for of 遍历:

function * gen() {
      // console.log('第1个片段')
      yield 'yield 1'
      // console.log('第2个片段')
      yield 'yield 2'
      // console.log('第3个片段')
      yield 'yield 3'
      // console.log('第4个片段')
    }
    let i = gen()
    // console.log( i.next() ) // 执行第1个片段
    // console.log( i.next() ) // 执行第2个片段
    // console.log( i.next() ) // 执行第3个片段
    // console.log( i.next() ) // 执行第4个片段
for (const iterator of i) {
      console.log(iterator)
    }

12.2 生成器函数参数传递

function * gen( arg ) {
      console.log(arg)
      let res1 = yield 111
      console.log(res1)
      let res2 = yield 222
      console.log(res1)
      console.log(res2)
      let res3 = yield 333
      console.log(res3)
    }
    // 获取迭代器对象
    let i = gen( 'AAA' )
    console.log(i.next()) // 执行 next 可以获取yield后面的值
    // next参数可以传入实参,实参为yield语句的返回结果
    // 第二个next传入的实参为第一个yield返回的结果
    // 第x个next传入的实参从函数的第x个片段开始可以使用,为上一个yield语句的返回结果
    console.log(i.next('BBB')) 
    console.log(i.next('CCC')) 
    console.log(i.next('DDD')) 

12.3 生成器函数实例 - 1

生成器函数可以用于结果回调地狱。

回调地狱:

// 1s后输出111,2s后输出222,3s后输出333
      setTimeout(() => {
        console.log(111)
        setTimeout(() => {
          console.log(222)
          setTimeout(() => {
            console.log(333)
          }, 3000)
        }, 2000)
      }, 1000)

function f1() {
        setTimeout(() => {
          console.log(111)
          // 继续向下调用
          i.next()
        }, 1000)
      }
      function f2() {
        setTimeout(() => {
          console.log(222)
          i.next()
        }, 2000)
      }
      function f3() {
        setTimeout(() => {
          console.log(333)
          i.next()
        }, 3000)
      }
      // 声明生成器函数
      function * gen() {
        yield f1()
        yield f2()
        yield f3()
      }
      // 迭代器对象
      let i = gen()
      // 调用执行
      i.next()


目录
打赏
0
0
0
0
16
分享
相关文章
|
9月前
|
数仓学习-----named_struct和collect_set函数
数仓学习-----named_struct和collect_set函数
195 5
gc模块的set_threshold函数
gc模块的set_threshold函数
mysql中find_in_set()函数用法详解及增强函数
总结而言,`FIND_IN_SET()`是MySQL中处理由逗号分隔的字符串列表的一种便捷方法,尤其适用于列表相对较短且不经常更改的场景。然而,对于更为复杂的需要高性能和可扩展性的数据库设计,它可能不是最优选择,应考虑使用更加正规化的数据库结构。
932 2
mysql中find_in_set()函数用法详解及增强函数
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(二)
74 1
Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
语音识别,函数综合案例,黑马ATM,/t/t一个对不齐,用两个/t,数据容器入门,数据容器可以分为列表(list)、元组(tuple)、字符串(str)、集合(set)、字典(dict)
语音识别,函数综合案例,黑马ATM,/t/t一个对不齐,用两个/t,数据容器入门,数据容器可以分为列表(list)、元组(tuple)、字符串(str)、集合(set)、字典(dict)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】(一)
53 0
ES6+新特性-Symbol与Set/Map数据结构
ES6 引入了三种新的数据结构:Symbol、Set和Map。Symbol是唯一且不可变的值,常用于定义对象的独特属性;Set存储不重复值,适合数组去重;Map则是键值对集合,键可为任意类型,提供了更灵活的存储方式。这些新数据结构提供了更高效的操作手段,分别解决了属性命名冲突、数据去重和复杂键值对存储的问题。示例展示了如何使用Symbol、Set和Map进行基本操作。
【面试题】面试官:请你实现一个深拷贝,那如果是正则/set/函数怎么拷贝?
【面试题】面试官:请你实现一个深拷贝,那如果是正则/set/函数怎么拷贝?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等