es--Iterator遍历器与for...of循环

一、Iterator遍历器

1.1 Iterator是什么

Iterator：遍历器（迭代器）

Symbol.iterator：可遍历对象的生成方法

它规定了不同数据类型统一访问的机制, 这里的访问机制主要指数据的遍历在ES6中Iterator接口主要供for...of消费

默认情况下以下数据类型都实现的Iterator接口：Array/Map/Set/String/TypedArray/函数的 arguments 对象/NodeList 对象

过程：Symbol.iterator（可遍历对象的生成方法）--it(可遍历对象)--it.next()--it.next()...直到done为true

• 只要一个数据已经实现了Iterator接口, 那么这个数据就有一个叫做[Symbol.iterator]的属性
• [Symbol.iterator]的属性会返回一个函数
• [Symbol.iterator]返回的函数执行之后会返回一个对象
• [Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
• next方法每次执行都会返回一个对象{value: 1, done: false}
• 这个对象中存储了当前取出的数据和是否取完了的标记

示例：

 <script>
        const it = [1, 8][Symbol.iterator]();
        console.log(it.next());
        console.log(it.next());
        console.log(it.next());
</script>

---

2. Iterator解惑

a.为什么需要iterator遍历器

遍历数组：for循环和forEach方法  其中forEach方法不能与break和continue一起使用

遍历对象：for in循环

terator是一个统一的遍历方式，无论是遍历数组还是

示例：

<script>
        const arr = [1, 2, 7, 5];
        const it = arr[Symbol.iterator]();
        let next = it.next();
        while (!next.done) {
            console.log(next.value);
            next = it.next();
            console.log(next);
        }
       
</script>

---

二、for...of循环

1.概述

for...of循环只会遍历出那些done为false时，对应的value值

示例：

<script>
        const arr = [1, 2, 7, 5];

        for (const item of arr) {
            console.log(item);
        }
</script>

a.与break、continue一起使用

示例：

<script>
        //
        const arr = [1, 2, 7, 5];

        for (const item of arr) {
            // if (item == 2) {
            //     break;
            // }

            if (item == 2) {
                continue;
            }

            //for (const item of arr.values()) {
            //console.log(key);
            //}

            console.log(item);
        }
</script>

b.在for...of中取得数组的索引

keys()得到的是索引的可遍历对象，可以遍历出索引值

示例1：

 <script>
        // 
        const arr = [1, 2, 7, 5];

        for (const key of arr.keys()) {
            console.log(key);
        }
</script>

示例2：

 <script>
        // 同时得到索引和值
        const arr = [1, 2, 7, 5];

        for (const entries of arr.entries()) {
            console.log(entries);
        }
</script>

示例3：

<script>
        // 同时得到索引和值--利用解构
        const arr = [1, 2, 7, 5];

        for (const [key, value] of arr.entries()) {
            console.log(key, value);
        }
</script>

---

2.原生可遍历和非原生可遍历

什么是可遍历？

只要有Symbol.iterator方法，并且这个方法可以生成可遍历对象，就是可遍历

只要可遍历，就可以使用for...of循环来统一遍历

原生可遍历：数组、字符串、Set、Map、arguments、NodeList

非原生可遍历：

a.一般的对象

示例1：

<script>
        const person = {
            name: 'zhangsan',
            age: 15
        }

        for (const item of person) {
            console.log(item);
        }
</script>

但是可以使用for...in循环遍历

如果非要使用for...of循环遍历的话，如下：

示例2：

 <script>
        const person = {
            name: 'zhangsan',
            age: 15
        }

        person[Symbol.iterator] = () => {
            let index = 0;
            return {
                next() {
                    index++;
                    if (index === 1) {
                        return {
                            value: person.name,
                            done: false
                        };
                    } else if (index === 2) {
                        return {
                            value: person.age,
                            done: false
                        };
                    } else {
                        return {
                            done: true
                        };
                    }
                }

            };
        };

        for (const item of person) {
            console.log(item);
        }
</script>

b.有length和索引属性的对象

<script>
//方式1
        const obj = {
            0: 'jack',
            1: 'male',
            length: 2
        };

        obj[Symbol.iterator] = () => {
            let index = 0;
            return {
                next() {

                    if (index < obj.length) {
                        value = obj[index];
                        done = false;
                    } else {
                        value = undefined;
                        done = true;
                    }

                    index++;

                    return {
                        value,
                        done
                    };
                }
            };
        };

        for (const item of obj) {
            console.log(item);
        }
</script>

 <script>
//方式2
        const obj = {
            0: 'alex',
            1: 'age',
            length: 2
        };

        obj[Symbol.iterator] = Array.prototype[Symbol.iterator];

        for (const item of obj) {
            console.log(item);
        }
</script>

---

三、使用了Iterator的场合

a.数组的展开运算符

 <script>
        console.log(...[1, 2, 47]);
        console.log(...
            'jack');
        console.log(...new Set([47, 89, 47]));
</script>

b.数组的解构赋值

<script>
        const [a, b] = [1, 3];
        const [c, d] = 'hi';
        const [e, f] = new Set([4, 7]);
        const [g, h] = new Map([
            ['name', 'jack'],
            ['age', 14]
        ]);
        console.log(a, b);
        console.log(c, d);
        console.log(e, f);

        console.log(g, h);
</script>

c.Set和Map的构造函数

其实说到底主要就是原生可遍历的：数组 字符串 arguments SetMap NodeList