ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ES6 Iterator迭代器 与 Generator生成器 如何用js封装一个遍历所有可迭代数据结构的方法

2022-04-11 19:34:39  阅读:180  来源: 互联网

标签:function ES6 console log iterator 生成器 done 迭代


ES6 Iterator迭代器 与 Generator生成器

1.1 为什么要有 Iterator

在ES6语法中,有序数据结构已有许多
如Array、Set、Map、String、类数组(如arguments)等
当我们不确定数据是何种类型但又要对它进行遍历时,我们只能去做针对性的判断处理
因此,一个统一的接口来遍历所有数据类型是很有必要的,而Iterator扮演了这一角色

1.2 什么是Iterator

  1. 具有[Symbol.iterator]属性,且属性值是function类型
  2. 执行此function返回一个迭代器对象,此对象有next方法可顺序迭代子元素
  3. forof可遍历此迭代器

在js中,实现了Iterator接口的数据结构都是可迭代的
具体表现为数据结构的[Symbol.iterator]属性值是function类型

const isIterable = target => typeof target?.[Symbol.iterator] === 'function'

当迭代器顺序执行完毕之后,后续执行返回的done为true,作为迭代结束的标志

function arrLike(){
    const it = arguments[Symbol.iterator]()
    console.log(it) // Object [Array Iterator] {}
    console.log(it.next()) // { value: 1, done: false }
    console.log(it.next()) // { value: 2, done: false }
    console.log(it.next()) // { value: 3, done: false }
    console.log(it.next()) // { value: undefined, done: true }
}

arrLike(1,2,3)

封装一个迭代函数,用于遍历js中所有可迭代的数据结构

// 判断是否可迭代
const isIterable = target => typeof target?.[Symbol.iterator] === 'function'

function each(target,callback){
    if(!isIterable(target)){
        throw 'the first parameter must be iterable(need a [Symbol.iterator] property)'
    }
    typeof callback !== 'function' && (callback = console.log)

    const iterator = target[Symbol.iterator]()

    // 或者用forof
    // for (const item of iterator) {
    //     callback(item)
    // }
    let item = {done:false}
    while(!item.done){
        item = iterator.next()
        !item.done && callback(item.value)
    }
}

each([2,3,4],console.log)
each('abc',console.log)

2 Generator生成器与迭代器

一个生成器函数必定返回一个生成器对象,并且这个对象符合迭代器协议
因此这个生成器对象可以被forof遍历,同样的具有next方法

function* testGen(){} 
console.log(testGen()) // Object [Generator] {}

function* helloWorldGenerator(){
    yield 'hello'
    yield 'world'
    yield 'generator'
    return 'end'
}

const genIterator = helloWorldGenerator()
console.log(genIterator.next()) // { value: 'hello', done: false }

each(genIterator,console.log) 

标签:function,ES6,console,log,iterator,生成器,done,迭代
来源: https://www.cnblogs.com/ltfxy/p/16131532.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有