【JavaScript】Iterator 迭代器

Iterator

迭代器：迭代器是一种接口；其本质就是一个指针对象

Iterator 的作用：

1. 为各种数据结构，提供一个统一的、简便的访问接口
2. 使得数据结构的成员能够按某种次序排列
3. 主要供 for … of 使用

逻辑过程：

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第 1 次调用指针对象的 next()，指针就指向数据结构的第 1 个元素
3. 第 2 次调用指针对象的 next()，指针就指向数据结构的第 2 个元素
4. 不断调用指针对象的 next()，直到它指向数据结构的结束位置

具有 Iterator 接口的数据结构：
① Array、② Map、③ Set、④ String、⑤ 函数的 arguments 类数组对象、⑥ DOM 中的 NodeList 类数组对象

数组的 Symbol.iterator 属性

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator](); // 返回一个迭代器对象
console.log(iter.next()); // { value: 'a', done: false }
console.log(iter.next()); // { value: 'b', done: false }
console.log(iter.next()); // { value: 'c', done: false }
console.log(iter.next()); // { value: undefined, done: true }

类数组的对象调用数组的迭代器 Symbol.iterator

类数组：下标作为属性名，有 length 属性的对象

let iterable = {
    0: 'a', // 属性名与下标一样
    1: 'b',
    2: 'c',
    length: 3,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};

for (let item of iterable) {
    console.log(item); // 'a', 'b', 'c'
}

注意，普通对象部署数组的迭代器 Symbol.iterator，无效果

let iterable = {
    a: 'a', // 属性名与下标不一样
    b: 'b',
    c: 'c',
    length: 3,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
    console.log(item); // undefined, undefined, undefined
}

字符串的包装类是一个类数组的对象，也具有 Iterator 接口

let str = "hi";
console.log(typeof str[Symbol.iterator]); // function

let iterator = str[Symbol.iterator](); // 返回一个迭代器对象
console.log(iterator.next()); // {value: "h", done: false}
console.log(iterator.next()); // {value: "i", done: false}
console.log(iterator.next()); // {value: undefined, done: true}

封装迭代器

let arr = [1, 2];

arr.myIterator = function () {
    let i = 0;
    return {
        next: () => { // 这里使用箭头函数，才能使 this 指向 arr
            let done = i >= this.length;
            let value = done ? undefined : this[i++];
            return {
                value,
                done
            };
        }
    };
};

let obj = arr.myIterator();
console.log(obj.next()); // {value: 1, done: false}
console.log(obj.next()); // {value: 2, done: false}
console.log(obj.next()); // {value: undefined, done: true}