ES6 语法详解(Iterator遍历器 for of) 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        /**
         * 概念: iterator是一种接口机制, 为各种不同的数据结构提供统一的访问机制
         * 作用:
         *     1. 为各种数据结构,提供一个统一的,渐变的访问接口
         *     2. 使得数据结构的成员能够按某种次序排序
         *     3. ES6创造了一种新的遍历命令for of循环,Iterator接口主要提供for of消费
         * 工作原理:
         *     创建一个指针对象(遍历器对象),指向数据结构的起始位置
         *     第一次调用next方法,指针自动指向数据结构的第一个成员
         *     接下来不断调用next方法,指针会一直往后移动,直到指向最后一个成员
         *     每调用next方法返回的是一个包含value和done的对象,{value: 当前成员的值,done: 布尔值}
         *         value表示当前成员的值,done对应的布尔值标识当前的数据的结构是否遍历结束
         *         当遍历结束的时候返回的value值是undefined,done的值是false
         * 原生具备iterator接口的数据(可用for of 遍历)
         * 扩展理解:
         *     1. 当数据结构部署了Symbol.iterator接口,该数据就是可以用for of遍历
         *     2. 当使用for of去遍历目标数据的时候,该数据会自动去找Symbol.iterator属性
         *     Symbol.iterator 属性指向对象的默认遍历器方法,(承接直接之前的Symbol.iterator)
         *     1. Array
         *     2. arguments
         *     3. set 容器
         *     4. map 容器
         *     5. String
         *     .....
         *     其实对于学过后端语言的人应该非常好理解
         *     就拿Java来说吧
         *         凡是Java中实现了 Iterator接口的对象 都可以使用 iterator 方法返回一个 迭代器
         *         然后通过 hasNext() 返回是否存在下一个元素 和 next() 获取下一个元素
         *     是一样的
         */
        
        // 遍历数组
        let arr = [1,2,3,4]
        for (let item of arr) {
            console.log(item)
        }
        
        // 遍历字符串
        let str = '1231231'
        for (let item of str) {
            console.log(item)
        }
        
        // 遍历arguments
        function foo(){
            for (let s of arguments) {
                console.log(s)
            }
        }
        foo(12,23,34,45)
    </script>
</html>

作者：彼岸舞

时间：2021\08\16

内容关于：前端知识库

本文属于作者原创,未经允许,禁止转发

posted @ 2021-08-16 22:32  彼岸舞  阅读(107)  评论(0)  编辑  收藏  举报