认识

2023年06月17日

柏拉文

越努力，越幸运

一、认识

**遍历器（Iterator）**就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

二、作用

为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费

三、遍历

Iterator的遍历机制:

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

创建

原生具备`Iterator`数据结构

原生具备Iterator接口的数据结构如下,这些数据结构都有一个Symbol.iterator属性，可以直接通过这个属性来直接创建一个迭代器

Array

const array = [1,2,3,4];
const iterator = array[Symbol.iterator]();
console.log(iterator); // Array Iterator {}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}

Map

const map = new Map([[1,"哈哈"],[2,"嘻嘻"]]);
const iterator = map[Symbol.iterator]();
console.log(iterator); // MapIterator {1 => '哈哈', 2 => '嘻嘻'}
console.log(iterator.next()); // {value: Array(2), done: false}
console.log(iterator.next()); // {value: Array(2), done: false}
console.log(iterator.next()); // {value: undefined, done: true}

Set

const set = new Set([1,2,3]);
const iterator = set[Symbol.iterator]();
console.log(iterator); // SetIterator {1, 2, 3}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}

String
TypedArray
函数里的arguments对象
NodeList对象

原生不具备`Iterator`数据结构

对于原生不具备Iterator接口的数据结构，比如Object，我们可以采用自定义的方式来创建一个遍历器。

Object

const obj = {
    a: 1,
    b: 2,
};

function createIterator(data) {
    const keyList = Object.keys(data);
    let i = 0;
    return {
        next() {
            const done = i >= keyList.length;
            const value = !done ? data[keyList[i++]] : undefined;
            return {
                value,
                done,
            };
        },
    };
}

const iterator = createIterator(obj);
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

场景

场景一、for……of

for ... of的循环内部实现机制其实就是Iterator

for …… of 首先调用被遍历集合对象的 Symbol.iterator 方法
该方法返回一个迭代器对象，迭代器对象是可以拥有.next()方法的任何对象
然后，在 for ... of 的每次循环中，都将调用该迭代器对象上的 .next 方法。然后使用for i of打印出来的i也就是调用.next方法后得到的对象上的value属性。

因此,如果数据结构没有Iterator迭代器接口,不可以使用for …… of , 比如object

一、认识​

二、作用​

三、遍历​

创建​

原生具备Iterator数据结构​

原生不具备Iterator数据结构​

场景​

场景一、for……of​