狼子笔记

# Iterator 和 for...of 循环

详情阅

# Iterator（遍历器）的概念

遍历器（Iterator)为各种不同的数据结构提供统一的访问机制。

任何数据结构只要部署 Iterator 接口，就可以进行遍历操作。

Iterator 的作用有三个：

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

# 遍历器生成函数(遍历器接口)

遍历器生成函数的结构：

function iteratiorMaker(){
    return {
        next:function(){
			value:"当前成员的信息",
            done:boolean, // 迭代是否结束
        }
    }
}

TypeScript 的写法，遍历器接口（Iterable）、指针对象（Iterator）和next方法返回值的规格可以描述如下：

interface Iterable {
  [Symbol.iterator]() : Iterator, // Symbol.iterator 实现遍历器的关键，后面会详细说明
}

interface Iterator {
  next(value?: any) : IterationResult,
}

interface IterationResult {
  value: any,
  done: boolean,
}
  
// 那么 实现一个可遍历类，可如下：
  class TestIterable implements Iterable{
      [Symbol.iterator](){
        return {
            next(){
                return {
                    value:"当前成员的信息",
                    done:boolean, // 迭代是否结束
                }
            }
        }
    }
  }

# 默认 Iterator 接口

简单直白说：只要实现了Symbol.iterator函数的数据结构，就是可遍历的。遍历时的每项的值，根据实现体自定。

Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for...of循环。 当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身就是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

如下：

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

上面代码中，对象obj是可遍历的（iterable），因为具有Symbol.iterator属性。执行这个属性，会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。

# 原生具备 Iterator 接口的数据结构

  • Array

  • Map

  • Set

  • String

  • TypedArray

  • 函数的 arguments 对象

  • NodeList 对象

# 手动部署Symbol.iterator接口

普通对象部署：

const obj = {
    name: "wanglongkai",
    age: 25,
    [Symbol.iterator]() {
        let nextIndex = 0;
        let entries = Object.entries(this);
        return {
            next() {
                if(nextIndex < entries.length){
                    return {
                        value: [entries[nextIndex][0], entries[nextIndex++][1]],
                        done: false
                    }
                }else{
                    return {
                        value: undefined,
                        done: true 
                    }
                }
            },
        }
    }
}

// 测试
for (let [key, value] of obj) {
    console.log(key, value)
}

构造函数部署：

function Obj(name,age){
    this.name = name;
    this.age = age;
}
Obj.prototype[Symbol.iterator] = function(){ // 在原型上实现Symbol.iterator接口
    let nextIndex = 0;
        let entries = Object.entries(this);
        return {
            next() {
                if(nextIndex < entries.length){
                    return {
                        value: [entries[nextIndex][0], entries[nextIndex++][1]],
                        done: false
                    }
                }else{
                    return {
                        value: undefined,
                        done: true 
                    }
                }
            },
        }
}
// 测试
let obj = new Obj("wanglongkai",25);
for (let [key, value] of obj) {
    console.log(key, value)
}

class部署：

class Obj{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    [Symbol.iterator]() {
        let nextIndex = 0;
        let entries = Object.entries(obj);
        return {
            next() {
                if(nextIndex < entries.length){
                    return {
                        value: [entries[nextIndex][0], entries[nextIndex++][1]],
                        done: false
                    }
                }else{
                    return {
                        value: undefined,
                        done: true 
                    }
                }
            },
        }
    }
}
// 测试 
let obj = new Obj("wanglongkai",25);
for (let [key, value] of obj) {
    console.log(key, value)
}

如果Symbol.iterator方法对应的不是遍历器生成函数，解释引擎将会报错。

var obj = {};

obj[Symbol.iterator] = () => 1;

[...obj] // TypeError: [] is not a function

上面代码中，变量obj的Symbol.iterator方法对应的不是遍历器生成函数，因此报错。

# 获取可遍历数据结构的遍历器对象

var $iterator = ITERABLE[Symbol.iterator](); // 执行Symbol.iterator方法获取遍历器对象
var $result = $iterator.next();
while (!$result.done) {
  var x = $result.value;
  // ...
  $result = $iterator.next();
}

上面代码中，ITERABLE代表某种可遍历的数据结构，$iterator是它的遍历器对象。遍历器对象每次移动指针（next方法），都检查一下返回值的done属性，如果遍历还没结束，就移动遍历器对象的指针到下一步（next方法），不断循环。

# 调用 Iterator 接口的场合

有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法）。

（1）解构赋值

对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。

let set = new Set().add('a').add('b').add('c');

let [x,y] = set;
// x='a'; y='b'

let [first, ...rest] = set;
// first='a'; rest=['b','c'];

（2）扩展运算符

扩展运算符（...）也会调用默认的 Iterator 接口。

// 例一
var str = 'hello';
[...str] //  ['h','e','l','l','o']

// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

上面代码的扩展运算符内部就调用 Iterator 接口。

实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构，转为数组。也就是说，只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。

let arr = [...iterable];

（3）yield*

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;
};

var iterator = generator();

iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

（4）其他场合

由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。

  • for...of

  • Array.from()

  • Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）

  • Promise.all()

  • Promise.race()

# for...of的优势

  1. 普通for循环比较复杂
  2. forEach不可以用break、continue等跳出循环
作者：王龙楷； 标签：原创； 提交时间: 11/28/2020, 9:43:23 PM

← Set和Map数据结构 →