JavaScript对象怎么实现迭代(iterator)功能？

一、迭代功能是什么？

可迭代对象，需要具备 Symbol.iterator 和 next 这两个函数，即可用 for...of 进行迭代。譬如：String、Array、TypedArray、Map 和 Set，都是可迭代对象。

var myIterator = {
    next: function() {
        // ...
    },
    [Symbol.iterator]: function() { return this }
}

二、怎么用？

1、转换 class 为迭代对象

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>Symbol</title>
    <script>
        class SimpleClass {
            constructor(data) {
                this.data = data
            }

            [Symbol.iterator]() {
                let index = 0;
                return {
                    next: () => {
                        if (index < this.data.length) {
                            return { value: this.data[index++], done: false }
                        } else {
                            return { done: true }
                        }
                    }
                }
            }
        }

        const simple = new SimpleClass([1, 2, 3, 4, 5])

        for (const val of simple) {
            console.log(val)   //'1' '2' '3' '4' '5'
        }

    </script>
</head>

<body>
    <h1>Symbol : 打开 Console 看结果！</h1>
</body>

</html>

2、转换 object 为迭代对象

<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>Symbol</title>
    <script>
        let SimpleClass = {
            data: [1, 2, 3, 4, 5],
            [Symbol.iterator]() {
                let index = 0;
                return {
                    next: () => {
                        if (index < this.data.length) {
                            return { value: this.data[index++], done: false }
                        } else {
                            return { done: true }
                        }
                    }
                }
            }
        }

        for (const val of SimpleClass) {
            console.log(val)   //'1' '2' '3' '4' '5'
        }

    </script>
</head>

<body>
    <h1>Symbol : 打开 Console 看结果！</h1>
</body>

</html>

三、参考文章

JavaScript对象怎么实现迭代(iterator)功能？

JavaScript对象怎么实现迭代(iterator)功能？

一、迭代功能是什么？

二、怎么用？

1、转换 class 为迭代对象

2、转换 object 为迭代对象

三、参考文章

Learn_anything

引用和评论

学习Git和Github，从这里开始！

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

原生electron起步-从零到一完成构建和打包

Base64编码的“暗坑”：解密失败？可能是这些原因！

LRU算法，你别跑，我就要吃透你