迭代器模式、for...of、生成器函数(前端进阶1.7)

Iterator迭代器(又叫遍历器)

概念

迭代器的出现有其原因是：因为ES6开始数据结构新增了Set和Map，再加上已有的Array和Object，此外用户还可以自行组合它们来形成组合数据结构，复杂的数据结构导致循环遍历难度加大，为简化和统一循环方式，ES6就给出了迭代器(Iterator)这个接口来提供统一访问机制for..of。

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

Iterator 的作用有三个：

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

Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

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

先用ES5语法模拟一个迭代器：

function createIterator(item){
    var i = 0;
    return {    // 返回一个迭代器对象
        next: function () {  //迭代器对象一定有next()方法
            var done = (i>item.length);
            var value = !done ? item[i++] : undefined;

            return {    //next()方法返回结果对象
                value: value,
                done: done
            }
        }
    }
}
var it = createIterator([10, 2, 3]);
console.log(it.next().value);       // 10
console.log(it.next().value);       // 2
console.log(it.next().value);       // 3
console.log(it.next().value);       // undefined

上面代码定义了一个createIterator遍历器生成函数，作用就是返回一个遍历器对象(即it指针对象)。

前面说过，ES6中为迭代器提供了统一的访问机制for..of..，ES6中原生的迭代器有Array、Set、Map和String，for..of能够遍历它们是因为它们具有Symbol.iterator属性，该属性指向该数据结构的默认迭代器方法，当使用for...of..迭代该数据结构时，js引擎就会调用其Symbol.iterator方法，从而返回相应的默认迭代器。举例：

var arr = [10, 2, 3];     //数组是一个迭代器
// 使用for..of..来遍历迭代器
for(var v of arr){
    console.log(v); // 10  2  3
}

//也可以使用ES6提供的next()方法手工遍历
var it = arr[Symbol.iterator]();
console.log(it.next().value);       // 10 
console.log(it.next().value);       // 2
console.log(it.next().value);       // 3

所以改造一下上面ES5的createIterator函数返回的对象添加Symbol.iterator方法，人为将其改造成迭代器，从而使其可以使用for..of来遍历：

function createIterator(item){
    var i = 0;
    return {    // 返回一个迭代器对象
        //看，模仿原生迭代器添加Symbol.iterator方法
        [Symbol.iterator]: function () { return this; },
        next: function () {  //迭代器对象一定有next()方法
            var done = ( i >= item.length );
            var value = !done ? item[i++] : undefined;
            return {    //next()方法返回结果对象
                value: value,
                done: done
            }
        }
    }
}
//执行函数后返回一个人造迭代器对象
var it = createIterator([10, 2, 3]);
for(var v of it){   // 使用迭代器的循环机制遍历
    console.log(v);
}

我们先把上面的createIterator函数[Symbol.iterator]: function () { return this; }注释，用for..of..循环，会报如下错误：迭代器模式、for...of、生成器函数(前端进阶1.7) 将注释放开后，会输出如下结果：可以看到这是完全可以的。只要在返回的对象中添加Symbol.iterator属性，就可以达到ES6设定的迭代器成立条件。

所以可以这样说明：一个数据结构只要有Symbol.iterator方法和next()方法（即部署了 Iterator 接口），就可以认为它是迭代器，是可迭代的(iterable)。

可迭代对象(iterable)

原生具备 Iterator 接口的数据结构如下。

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

下面的例子是数组的Symbol.iterator属性。

var arr = [10, 2, 3, 5];    // 数组是个可迭代对象
var it = arr[Symbol.iterator]();    // 调用可迭代对象的Symbol.iterator方法可以获取默认迭代器，将迭代器引用赋给it变量
console.log(it.next());     // {value: 10, done: false}
console.log(it.next());     // {value: 2, done: false}
console.log(it.next());     // {value: 3, done: false}
console.log(it.next());     // {value: 5, done: false}
console.log(it.next());     // {value: undefined, done: true}

上面代码中，变量arr是一个数组，原生就具有遍历器接口，部署在arr的Symbol.iterator属性上面。所以，调用这个属性，就得到遍历器对象。

所以可以用Symbol.iterator来检测对象是否为可迭代对象：

function isIterator(obj) {
    // return typeof obj[Symbol.iterator] === "function";   // 这种方法也可以选用
    return Object.prototype.toString.call( obj[Symbol.iterator] ) === "[object Function]";
}
console.log(isIterator([10, 2, 3, 4, 5]));      // true
console.log(isIterator(new Set()));             // true
console.log(isIterator(new Map()));             // true
console.log(isIterator("abc"));                 // true

对于原生部署 Iterator 接口的数据结构，不用自己写遍历器生成函数，for...of循环会自动遍历它们。除此之外，其他数据结构（主要是对象）的 Iterator 接口，都需要自己在Symbol.iterator属性上面部署，这样才会被for...of循环遍历。

对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。不过，严格地说，对象部署遍历器接口并不是很必要，因为这时对象实际上被当作 Map 结构使用，ES5 没有 Map 结构，而 ES6 原生提供了。

一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

下面是一个为对象添加 Iterator 接口的例子。

let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

对于类似数组的对象（存在数值键名和length属性），部署 Iterator 接口，有一个简便方法，就是Symbol.iterator方法直接引用数组的 Iterator 接口。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];

[...document.querySelectorAll('div')] // 可以执行了

NodeList 对象是类似数组的对象，本来就具有遍历接口，可以直接遍历。上面代码中，我们将它的遍历接口改成数组的Symbol.iterator属性，可以看到没有任何影响。

下面是另一个类似数组的对象调用数组的Symbol.iterator方法的例子。

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'
}

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
}

如果Symbol.iterator方法对应的不是遍历器生成函数（即会返回一个遍历器对象），解释引擎将会报错。

var obj = {};

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

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

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

for...of 循环

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

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

let collection = {
   items:[],
   *[Symbol.iterator](){
        for(let item of this.items) {
            yield item
        }
    }
}
collection.items.push(1)
collection.items.push(2)
for(item of collection){
   console.log(item)// 1,2
}

数组

数组原生具备iterator接口（即默认部署了Symbol.iterator属性），for...of循环本质上就是调用这个接口产生的遍历器。

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

for(let v of arr) {
  console.log(v); // red green blue
}

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

for(let v of obj) {
  console.log(v); // red green blue
}

上面代码中，空对象obj部署了数组arr的Symbol.iterator属性，结果obj的for...of循环，产生了与arr完全一样的结果。

for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法;for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

for (let index of arr.keys()) {
  console.log(index);// "0", "1", "2",
}

for (let [index, elem] of arr.entries()) {
  console.log(index, elem);// "0 3","1 5","2 7"
}

Set 和 Map 结构

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

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit

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

for (let [key, value] of map) {
  console.log(key + ' : ' + value);
}
// a : 1
// b : 2

遍历 Set 结构和 Map 结构要注意两点：

遍历的顺序是按照各个成员被添加进数据结构的顺序
Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值

类似数组的对象

类似数组的对象包括好几类。下面是for...of循环用于字符串、DOM NodeList 对象、arguments对象的例子。

// 字符串
let str = "hello";

for (let s of str) {
  console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');
// 'a'
// 'b'

并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

对象

对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。但是，这样情况下，for...in循环依然可以用来遍历键名。

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};

for (let e in es6) {
  console.log(e);
}
// edition
// committee
// standard

for (let e of es6) {
  console.log(e);
}
// TypeError: es6[Symbol.iterator] is not a function

上面代码表示，对于普通的对象，for...in循环可以遍历键名，for...of循环会报错。

一种解决方法是，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。

let obj = {name:"张三",age:18};
for(let key of Object.keys(obj)){
  console.log(`${key} : ${obj[key]}`)
}
// name : 张三
// age : 18

另一个方法是使用 Generator 函数将对象重新包装一下。

let obj = {name:"张三",age:18};
function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

for (let [key, value] of entries(obj)) {
  console.log(key, '->', value);
}
//name -> 张三
//age -> 18//

与其他遍历语法的比较

以数组为例，JavaScript 提供多种遍历语法。最原始的写法就是for循环。

for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

这种写法比较麻烦，因此数组提供内置的forEach方法。

myArray.forEach(function (value) {
  console.log(value);
});

这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。我一般用try..catch抛出异常信息的方式，来跳出。

try{
  myArray.forEach(function (value) {
    if(value==""){
    	throw new Error("值不能为空");//报错，就跳出循环
    }
  });
}catch(e){
  console.log(e.message);
}

for...in循环可以遍历数组的键名。

for (var index in myArray) {
  console.log(myArray[index]);
}

for...in循环有几个缺点。

数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
某些情况下，for...in循环会以任意顺序遍历键名。

总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

for...of循环相比上面几种做法，有一些显著的优点。

有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

生成器函数（Generator ）

概念

Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个迭代器对象，也就是说，Generator 函数除了状态机，还是一个迭代器对象生成函数。返回的迭代器对象，可以依次遍历 Generator 函数内部的每一个状态。

Generator 函数有两个特征：

function关键字与函数名之间有一个星号;
函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）;

function *createIterator(item) {
    for(let i=0; i<item.length; i++){
        yield item[i];
    }
}
var it = createIterator([2,3,4]);  // 生成器函数执行返回一个新的迭代器实例it
// 调用迭代器it的next()方法
console.log(it.next());   // {value: 2, done: false}
console.log(it.next());   // {value: 3, done: false}
console.log(it.next());   // {value: 4, done: false}
console.log(it.next());   // {value: undefined, done:true}
// ----------------------------------------
// 注意，以下代码与上面不在同一个执行流程中
// 或者使用迭代器统一遍历器 for...of 
for(var v of it){
    console.log(v);     // 2  3  4
}

调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

ES6 没有规定，function关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过。

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

function* gen() {
  yield  123 + 456;
}

上面代码中，yield后面的表达式123 + 456，不会立即求值，只会在next方法将指针移到这一句时，才会求值。

yield表达式与return语句既有相似之处，也有区别。

相似之处：都能返回紧跟在语句后面的那个表达式的值。

不同指出:每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。

(function (){
  yield 1;
})()
// SyntaxError: Unexpected number

function* demo() {
  console.log('Hello' + yield); // SyntaxError
  console.log('Hello' + yield 123); // SyntaxError

  console.log('Hello' + (yield)); // OK
  console.log('Hello' + (yield 123)); // OK
}

function* demo() {
  foo(yield 'a', yield 'b'); // OK
  let input = yield; // OK
}

next 方法的参数

在生成器函数内部使用yield关键字暂停，在该函数执行返回的迭代器上调用next()获得暂停时的返回值。其实next()方法可以接收参数，这个参数的值会代替生成器内部上一条yield语句的返回值。

// 生成器
function *createIterator() {
    var first = yield 2;
    var second = yield first * 3;
    yield second + 3;
}
// 创建迭代器实例
var it = createIterator();
// 启动迭代器
console.log(it.next());      // {value: 2, done: false}
console.log(it.next(4));     // {value: 12, done: false}
console.log(it.next(7));     // {value: 10, done: false}
console.log(it.next());      // {value: undefined, done: true}

总结:

迭代器是可迭代对象，具有Symbol.iterator方法和next()方法，可以通过for..of代替普通for循环来迭代，省去循环引用变量，简化了循环过程。

而生成器是创建迭代器的函数，生成器函数内部有yield关键字来提供暂停接口，作为创建的迭代器调用next()方法执行的节点。生成器函数与普通函数的区别是前者在function关键字后有星号(*)，并且生成器函数执行后会创建一个新的迭代器实例，其他则和普通函数一样，可以传参和返回值。迭代器的next()方法可以传入参数，传入的参数值将会代替迭代器内上一条yield语句的返回值。

迭代器模式、for...of、生成器函数(前端进阶1.7)

Iterator迭代器(又叫遍历器)

概念

可迭代对象(iterable)

for...of 循环

数组

Set 和 Map 结构

类似数组的对象

对象

与其他遍历语法的比较

生成器函数（Generator ）

概念

yield 表达式

next 方法的参数

常见问题FAQ

掘金(神挫挫) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

Iterator迭代器(又叫遍历器)

概念

可迭代对象(iterable)

for...of 循环

数组

Set 和 Map 结构

类似数组的对象

对象

与其他遍历语法的比较

生成器函数（Generator ）

概念

yield 表达式

next 方法的参数

常见问题FAQ

掘金(神挫挫) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式