14_Generator

颛孙铭
2023-12-01
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        for...of 循环
        es6 借鉴 C++、Java、C# 和 Python 语言，引入了 for...of 循环，
        作为遍历所有数据结构的统一的方法。

        一个数据结构只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，
        就可以用 for...of 循环遍历他的成员。
        也就是说，for...of 循环内部调用的是数据结构的 Symbol.iterator 方法。

        for...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象
        （比如 arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串
     -->
    <script>

        /*
            数组：
                数组原生具备 iterator 接口（即默认了部署了 Symbol.iterator属性），
                for...of 循环本质上就是调用这个接口产生的遍历器：
        */
        const arr = ['red', 'green', 'blue'];

        for (let v of arr) {
            console.log(v)
        }

        const obj = {};
        obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);

        for (let c of obj) {
            console.log(c)
        }


        // for...of 循环可以代替数组实例的 forEach 方法：

        const arr1 = ['red', 'green', 'blue'];

        arr1.forEach(function (element, index) {
            console.log(element);
            console.log(index)   // 索引
        })

        // Javascript 原有的 for...in 循环，只能获得对象的键名，不能直接获取键值。es6 提供 for...of 循环，允许遍历获得键值。

        const arr2 = ['a', 'b', 'c', 'd'];

        for (let a in arr2) {
            console.log(a)   // 1 2 3 4  只能获得数组索引
        }

        for (let b of arr2) {
            console.log(b)   // a b c d  可以获得键值，如果要获取数组的索引，可以借助数组实例的 entries 方法和 keys 方法
        }

        // for...of 循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟 for...in 循环也不一样。

        let arr3 = [1, 2, 3];
        arr3.foo = 'hello';

        for (let i in arr3) {
            console.log(i)
        }
        for (let j of arr3) {
            console.log(j)    // 不会返回数组的 arr3 的 foo 属性
        }




        /*
            Set 和 Map 结构

            Set 和 Map 结构也原生具有 Itrator 接口，可以直接使用 for...of 循环。
        */


        let engines = new Set(['aaa', 'bbb', 'ccc', 'sss']);
        for (let e of engines) {
            console.log(e)
        }

        let es6 = new Map()
        es6.set('aa', 5);
        es6.set('bb', 'dad');
        es6.set('cc', 'aaaf');
        for (let [name, value] of es6) {
            console.log(name) // 属性名
            console.log(value)// 属性值
        }

        // 注意：首先，遍历的顺序是按照各个成员被添加进数据结构的顺序。
        // 其次：Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别是当前 Map 成员的键名和键值。

        let map = new Map().set('a', 1).set('b', 2);
        for (let pair of map) {
            console.log(pair)
        }

        for (let [key, value] of map) {
            console.log(key)
            console.log(value)
        }



        /* 
            计算生成的数据结构

            有些数据结构是在现有数据结构基础上，计算生成的。比如：es6的数组、
            Set、Map 部署了以下三个方法，调用后都返回遍历器对象。

                - entries() 返回一个遍历器对象，用来遍历[键名，键值]组成的数组。对于数组，
                键名就是索引值，对于Set ，键名与键值相同。Map 结构的 Iterator 接口，默认
                就是调用 entries() 方法。

                

        */








    </script>
</body>

</html>
14_Generator

相关阅读

相关文章

相关问答
