ES6 中新增的 iterator 接口详解

阅读时长 7 分钟读完

在 ES6 中,新增了一个 Iterator 接口,它使得 JavaScript 可以对集合进行统一的遍历操作。这个接口主要的作用在于,提供了一种统一的遍历机制,使得所有的数据结构都可以被遍历。本文将详细介绍该接口的各个方面以及在实际开发中的应用。

Iterator 简介

Iterator 接口是一组内部数据结构的统一接口,它定义了一种遍历访问集合中的元素的方式,使得各种不同的数据结构可以通过同样的方式被遍历。这种方式包含两个核心方法:

  • next() 方法:该方法返回一个对象,其中有两个属性:valuedone。其中 value 表示当前遍历到的值,done 表示遍历是否结束。
  • throw() 方法:该方法可以在遍历过程中抛出一个错误,如果捕获该错误则不会终止遍历,否则将会停止遍历。

Iterator 与 Iterable

在 ES6 中,除了要求具备 next() 方法外,还需要实现一个 [Symbol.iterator] 方法,这个方法返回一个 Iterator 对象,用于实现集合的可遍历性。

例如,我们创建一个 MyObj 对象,它实现了一个迭代器:

-- -------------------- ---- -------
----- ----- - -
    ------ ------- ------ -------

    ------------------- -
        --- ----- - --
        ------ -
            ----- -- -- -
                -- ------ - ------------------ -
                    ----- ----- - ------------------
                    --------
                    ------ - ------ ----- ----- --
                - ---- -
                    ------ - ----- ---- --
                -
            -
        -
    -
--

在这个例子中,我们创建了一个 MyObj 对象,并为其定义了一个数组 items 和一个迭代器。迭代器定义了 next() 方法,每次执行 next() 方法将会返回当前遍历的值以及遍历是否结束。然后我们为该对象实现了一个 [Symbol.iterator] 方法,它返回一个迭代器对象。

这样一来,我们就可以使用 for..of 语句对该集合进行遍历:

运行结果如下:

Iterator 示例

下面通过一个例子来演示 Iterator 接口的基本用法。

-- -------------------- ---- -------
----- ---------- - -
    ------------------ -- -- --
        ------ ------- ------ -------
        ------ --
        ----- ---------- -
            -- ----------- - ------------------ -
                ----- ----- - -----------------------
                -------------
                ------ - ------ ----- ----- --
            - ---- -
                ------ - ----- ---- --
            -
        -
    --
--

--- ------ ---- -- ----------- -
    ------------------
-

运行结果如下:

在这个例子中,我们定义了一个 myIterator 对象,并为其实现了一个 [Symbol.iterator] 方法,它返回一个将要被遍历的对象的迭代器。在迭代器中,我们定义了一个 items 属性,它是一个数组,然后定义了一个 next() 方法,在这个方法中对遍历的过程进行了控制。

最后,我们通过 for..of 语句对这个集合进行遍历。

应用场景

实际上, Iterator 接口被广泛地应用于比较复杂的数据结构之中,例如二叉树,链表等等。下面我们可以看一个二叉树遍历的例子。

-- -------------------- ---- -------
----- ---------------- -
    ------------------ -
        ---------- - ------
        --------- - -----
        ---------- - -----
    -

    ------------- -
        ----- ------- - --- ------------------------
        -- ------ - ----------- -
            -- ------------ -
                --------- - --------
            - ---- -
                ------------------------
            -
        - ---- -
            -- ------------- -
                ---------- - --------
            - ---- -
                -------------------------
            -
        -
    -

    ------------------- -
        ----- ----- - -------
        ------ -
            ------ -
                -- -------------- -
                    ----- ---- - ------------
                    -- ------------ -----------------------
                    -- ----------- ----------------------
                    ------ - ------ ----------- ----- ----- --
                - ---- -
                    ------ - ----- ---- --
                -
            -
        --
    -
-

----- ---- - --- ---------------------
----------------
----------------
---------------
----------------
---------------

--- ------ ---- -- ----- -
    ------------------
-

在这个例子中,我们创建了一个 BinarySearchTree 对象,并为其实现了一个 [Symbol.iterator] 方法。这个方法中,我们使用了一个栈来模拟递归的过程,将二叉树的遍历操作转化为迭代操作,从而实现了二叉树的遍历。

结论

通过本文的学习,我们了解了 Iterator 接口的基本概念和应用场景。Iterator 接口是一个非常强大的工具,它将数据结构、迭代算法、以及遍历过程统一起来,为 JavaScript 开发者提供了灵活而高效的数据遍历方案。在开发中使用 Iterator 接口可以大幅度地提升我们的代码质量和开发效率,是值得我们认真学习并掌握的。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/672dc06eeedcc8a97c85d2ae

纠错
反馈