JS详解-迭代器模式详解两种方法实现

前言:

javascript 复制代码
        // 迭代协议可以定制对象的迭代行为-分为两个协议:可迭代协议、迭代器协议
        // 可迭代协议:增加方法[Symbol,=.iterator](){}(属性名表达式)返回符合协议器的对象
        // 迭代器协议:有next方法的对象,next方法返回:
        // 已结束:{done:true}
        // 继续迭代:{done:false,value:'x'}
        // 可以使用Generator或自己实现对象,next

Generator法:

javascript 复制代码
   <script>
        const obj = {
            // Symbol.iterator 内置常量
            //[属性名表达式](){}
            [Symbol.iterator](){
               // 手写
               const arr = [1,2,3,4,5]
                let index = 0
                return {
                    next(){
                        if(index < arr.length){
                            // 可以继续迭代
                            return {
                                done:false,
                                value:arr[index++]
                            }
                        }else{
                            return {
                                // 已结束
                                done:true
                            }
                        }
                    }
                }
            }
        }
        for(const iterator of obj){
            console.log('iterator',iterator)
        }
    </script>

手写使用next和对象:

javascript 复制代码
   <script>
        const obj = {
            // Symbol.iterator 内置常量
            //[属性名表达式](){}
            [Symbol.iterator](){
                // 使用Generator
                function* gen(){
                    yield 1
                    yield 2
                    yield 3
                    yield 4
                    yield 5
                }
                return gen()
            }
        }
        for(const iterator of obj){
            console.log('iterator',iterator)
        }
    </script>
相关推荐
盐水冰几秒前
【HTML】(1)- 演示&标记语言
前端·html
卷卷说风控1 分钟前
工作流的 Skill 怎么写?
java·javascript·人工智能·chrome·安全
还是大剑师兰特2 分钟前
Pinia介绍及Vue3配置示例
前端·javascript·vue.js
前端摸鱼匠5 分钟前
【AI大模型春招面试题17】 过拟合、欠拟合在大模型中的表现与解决策略?
人工智能·ai·语言模型·面试·大模型
李少兄6 分钟前
网页应用化部署指南:基于 Edge 浏览器创建桌面快捷方式
前端·edge
IT_陈寒7 分钟前
Python的异步陷阱:我竟然被await坑了一整天
前端·人工智能·后端
光影少年7 分钟前
Android和iOS原生开发的基础知识对RN开发的重要性,RN打包发布时原生端需要做哪些配置?
android·前端·react native·react.js·ios
Fanfffff72010 分钟前
从 6s 到 3s:一次电商前端性能优化实践的系统性总结
前端·性能优化
cypking11 分钟前
npm 依赖包版本扫描提示插件Version Lens
前端·npm·node.js
还是大剑师兰特13 分钟前
Vue3 Mixin 与 Vue2 Mixin 核心区别
前端·javascript·vue.js