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>
相关推荐
志尊宝几秒前
Vue3 零基础每日笔记(027):组件上的 v-model——让自定义组件也能双向绑定
前端·javascript·vue.js·笔记·html5
云浪8 分钟前
从 0 手写一个 MCP Server:让 Copilot 调用 Tool 完成四则运算
javascript·node.js·mcp
江湖十年13 分钟前
Go GOPROXY 兜底链的坑:从一次诡异的 CI lint 失败说起
后端·面试·go
萧行之2 小时前
可视化技术复盘:从图形语法看 D3、Vega-Lite、ECharts、Observable Plot
前端·学习·数据可视化
小此方2 小时前
「C++AI大模型接入SDK」(一) API接入与本地两种方式对比、API Key获取、API报文详解与简单API的构建
开发语言·c++·人工智能
wuyk5552 小时前
Python实战项目02:学生成绩管理系统(控制台|CSV导出|完整落地)
开发语言·python
浪子明X9 小时前
十六位账本怎样发现传输差错:Internet Checksum 生活类比
开发语言
尾善爱看海10 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
驳是10 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea11 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法