JavaScript高级程序设计学习笔记(五) —迭代器和生成器迭代器与生成器

迭代器与生成器

1.理解迭代

计数循环就是一种最简单的迭代，循环是迭代机制的基础，每次可以指定迭代多少次，以及要执行什么操作

循环只能用在提前知道的数据类型，而且遍历顺序并不是数据结构固有的，所以使用循环有很大的限制

2.迭代器模式

可以吧有些结构成为可迭代对象，因为他们实现了正式的Iterator接口，而且可以通过接待器Iterator消费

可迭代对象不一定是集合对象，也可以是仅仅具有类似数组行为的其他数据结构。迭代器是按需创建的一次性对象，每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代器关联可迭代对象的API。

实现iterable接口，要求同时具备两种能力，：支持迭代的自我识别能力和创建实现iterator接口的能力。在es中，者必须暴露一个属性作为默认迭代器，而这个属性必须使用特殊的Symbol。iterator作为键，这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新迭代器

以下类型实现了iterable接口：

• 字符串
• 数组
• 映射
• 集合
• arguments对象
• nodelist等dom集合对象

接收可迭代对象的原生语言特性：

• for-of循环
• 数组解构
• 拓展操作符
• Array.from()
• 创建集合
• 创建映射
• Promise.all()接收由期约组成的可迭代对象
• Promise.race()接收由期约组成的可迭代对象
• yield*操作符，在生成器中使用

这些解构会在后台调用提供的可迭代对象的这个工厂函数，从而创建一个迭代器

注意：迭代器维护这一个指向可迭代对象的引用，因此迭代器会阻止垃圾回收程序回收可迭代对象

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

var arr = [10, 2, 3, 4, 5];     //数组是一个迭代器

// 使用for..of..来遍历迭代器
for(var v of arr){
    console.log(v); // 10  2  3  4  5
}

//也可以使用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

所以可以为上面的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, 4, 5]);
for(var v of it){   // 使用迭代器的循环机制遍历
    console.log(v);
}

可以看到这是完全可以的。只要在返回的对象中添加Symbol.iterator属性，就可以达到ES6设定的迭代器成立条件。

所以我认为，一个数据结构只要有Symbol.iterator方法和next()方法，就可以认为它是迭代器，是可迭代的(iterable)。

可迭代对象(iterable)

在ES6中，所有的集合对象(数组、Set集合和Map集合)和字符串都是可迭代对象，可迭代对象都绑定了默认的迭代器。for..of循环之所以能够遍历可迭代对象，正是利用了可迭代对象上的默认迭代器。大致过程是：for-of循环每执行一次都会调用可迭代对象的next()方法，并将迭代器返回的结果对象的value属性存储在变量中，循环将继续执行这一过程直到返回对象的done属性的值为true。

如果只需要迭代数组或集合中的值，用for..of循环代替普通for循环是个好选择。

访问默认迭代器

所有的可迭代对象，必定会有一个Symbol.iterator方法，通过调用可迭代对象的Symbol.iterator方法就能获取默认迭代器，这一过程是由JS引擎完成的。具体示例前文有举过，可以再看下：

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}

在这段代码中，通过Symbol.iterator获取了数组values的默认迭代器，并用它遍历数组中的元素。在JavaScript引擎中执行for-of循环语句也是类似的处理过程。

所以可以用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

3.生成器

生成器拥有在一个函数块内暂停和恢复代码执行的能力

生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。

(箭头函数不能用来定义生成器函数)

调用生成器函数会产生一个生成器对象，生成器对象一开始处于暂停执行的状态，与迭代器像是，生成器对象也实现了iterator接口，因此具有next()方法，调用这个方法会让生成器开始或恢复执行

function *createIterator(item) {
    for(let i=0; i<item.length; i++){
        yield item[i];
    }
}

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

从上例可以看到，使用了ES6的生成器，明显简化迭代器的创建过程，给生成器函数createIterator()传入一个item数组，函数内部，for循环不断从数组中生成新的元素放入迭代器中，每遇到一个yield语句循环都会停止；每次调用迭代器的next()方法，循环便继续运行并停止在下一条yield语句处。

生成器函数createIterator()执行后创建的迭代器赋值给变量it，变量it就作为这个迭代器的引用。既可以通过手工调用next()方法来执行迭代过程，也可以使用for..of..来完成迭代过程。

通过生成器给迭代器传参

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

// 生成器
function *createIterator() {
    var first = yield 2;
    var second = yield first * 3;
    yield second + 3;
}

// 创建迭代器实例
var it = createIterator();

// 启动迭代器
it.next();      // {value: 2, done: false}
it.next(4);     // {value: 12, done: false}
it.next(7);     // {value: 10, done: false}
it.next();      // {value: undefined, done: true}

最后总结下，迭代器是可迭代对象，具有Symbol.iterator方法和next()方法，可以通过for..of代替普通for循环来迭代，省去循环引用变量，简化了循环过程。而生成器是创建迭代器的函数，生成器函数内部有yield关键字来提供暂停接口，作为创建的迭代器调用next()方法执行的节点。生成器函数与普通函数的区别是前者在function关键字后有星号(*)，并且生成器函数执行后会创建一个新的迭代器实例，其他则和普通函数一样，可以传参和返回值。迭代器的next()方法可以传入参数，传入的参数值将会代替迭代器内上一条yield语句的返回值。

提前终止生成器

生成器对象有三个方法：(用于强制终止生成器)

• next()
• return()
• throw()

function *generator() {}
const g = generator();
console.log(g);
console.log(g.next);
console.log(g.return);
console.log(g.throw);

return:return会强制生成器进入关闭状态，提供给return()的值，就是终止迭代器对象的值

所有生成器都有return方法，只要通过他进入关闭转态，就无法恢复了，后续调用next会显示donw:true状态，而提供的任何返回值都不会被存储或者转播

for-of等内置语言结构会忽略转态为done:true的iteratorobjec内部返回的值

throw：会在暂停的时候将一个提供的错误注入到生成器对象中，如果错误未被处理，生成器就会关闭

相反，如果处理了，就不会关闭，而且还可以恢复执行，错误处理会跳过对象的tield

最后

以上就是个性铃铛为你收集整理的JavaScript高级程序设计学习笔记(五) —迭代器和生成器迭代器与生成器的全部内容，希望文章能够帮你解决JavaScript高级程序设计学习笔记(五) —迭代器和生成器迭代器与生成器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。