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>
相关推荐
沙振宇1 分钟前
【Web】使用Vue3+PlayCanvas开发3D游戏(六)模拟自驾场景SR+3D可视化
前端·游戏·3d·vue3·playcanvas
@大迁世界4 分钟前
6 款轻量级 CLI 工具,取代了我臃肿的开发软件
开发语言·lua
吴所畏惧7 分钟前
前端打包cdn或者dll打包方式
前端
小鲤鱼ya10 分钟前
vue3 + ts + uni-app 移动端封装图片上传添加水印
前端·typescript·uni-app·vue3
霍理迪12 分钟前
Vue—条件渲染与循环渲染
前端·javascript·vue.js
MegaDataFlowers12 分钟前
依赖注入(DI)
java·开发语言
前端摸鱼匠13 分钟前
面试题3:自注意力机制(Self-Attention)的计算流程是什么?
人工智能·ai·面试·职场和发展
csbysj202014 分钟前
Foundation 输入框尺寸指南
开发语言
码云数智-园园16 分钟前
Tailwind CSS vs. 传统CSS/Sass:2026年前端样式开发的深度博弈
开发语言
xixixin_16 分钟前
【CSS】字体大小不一致?px与vw渲染差异的底层原理与解决方案
前端·css