JS迭代器与生成器

2022-06-27 17:01:33 阅读：169 来源： 互联网

标签：console log 迭代 Symbol 生成器 JS let iterator

一、基本介绍(理解迭代)

在JavaScript中，计数循环就是一种最简单的迭代：

for (let i=1;i<=10;++i){
  console.log(i);  
}

　　循环时迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作，每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定好的。

　　迭代会在一个有序集合上进行。（”有序“可以理解为集合中所有项都可以按照既定的顺序被遍历到，特别是开始和结束项有明确定义。）数组是JavaScript中有序集合的最典型例子。

let collection=["foo",'bar','baz'];
for (let index=0;index<collection.length;++index){
　　console.log(collection[index]);
}

　　因为数组有已知的长度，且数组每一项都可以通过索引获取，所以整个数组可以通过递增索引来遍历。

　　由于以下原因，通过这种循环来执行例程并不理想。

1）迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象，然后再通过[ ]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。

2）遍历顺序并不是数据结构固有的。通过递增索引来访问数据是特定于数组类型的方式，并不适用于其他具有隐式顺序的数据结构。

　　ES5新增了Array.prototype.forEach()方法,向通用迭代需求迈进了一步（但仍然不够理想）：

let collection=["foo","bar","baz"];
collection.forEach((item)=>console.log(item));
// foo
// bar
// baz

　　这个方法解决了单独记录索引和通过数组对象取得值的问题。不过没有标识迭代何时终止，因此这个方法只适用于数组，而且回调结构也比较笨拙。

　　在ES较早的版本中，执行迭代必须使用循环或其他辅助结构。随着代码量，代码会变得越发混乱。。很多语言都通过原生语言结构解决了这个问题，开发者无需事先知道如何迭代就能实现迭代操作。这个解决方案就是迭代器模式。python、Java、、c++，还有其他很多语言都对这个模式提供了完备的支持。Javascript在ES6以后也支持了迭代器模式。

二、迭代器模式

　　迭代器模式（特别是在ES这个语境下）描述了一个方案，即可以把有些结构称为“可迭代对象”，因为它们实现了正式的Iterable接口，而且可以通过迭代器Iterator消费。

　　可迭代对象是一种抽象的方法。基本上，可以把可迭代对象理解成数组或集合这样的集合类型的对象。它们包含的元素都是有限的，而且都具有无歧义的遍历顺序：

//数组的元素都是有限的
//递增索引可以可以按序访问每个元素
let arr=[3,1,4]

//集合的元素是有限的
//可以按照插入顺序访问每个元素。
let set=new Set().add(3).add(1).add(4);

不过，可迭代对象不一定是集合对象，也可以是仅仅具有类似数组行为的其他数据结构，比如本章开头提到的计数循环。该循环中生成的值是暂时性的，但循环本身是在执行迭代。计数循环和数组都具有可迭代对象的行为。

注意：临时性可迭代对象可以实现为生成器

　　任何实现Iterable接口的数据结构都可以被实现Iterator接口结构“消费”（consume）。迭代器（Iterator）是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的API。迭代器无需了解与其关联的可迭代对象的结构，只需要知道如何取得连续的值。这种概念上的分离正是Iterable和Iterator的强大之处。

三、可迭代协议

　　实现Iterable接口（可迭代协议）要求同时具备两种能力：支持迭代的自我识别能力和创建实现Iterator接口的对象的能力。在ES中，这意味着必须暴露一个属性作为“默认迭代器”，而且这个属性必须使用特殊的Symbol.iterator作为键。这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新的迭代器。

　　很多内置类型都实现了Iterable接口：

1）字符串

2）数组

3）映射

4）集合

5）arguments对象

6）NodeList等DOM集合类型

检查是否存在默认迭代器属性可以暴露这个工厂函数：

let num=1;
let obj={};

//这两种类型没有实现迭代器工厂函数
console.log(num[Symbol.iterator]);   //undefined
console.log(obj[Symbol.iterator]);   //undefined

let atr='abc';
let arr=['a','b','c'];
let map=new Map().set('a',1).set('b',2).set('c',3);
let set=new Set().add("a").add("b").add("c");
let les=document.querySelectorAll('div');

//这些类型都实现了迭代器工厂函数
console.log(str[Symbol.iterator]);  //f values() { [native code] }
console.log(arr[Symbol.iterator]);  //f values() { [native code] }
console.log(map[Symbol.iterator]);//f values() { [native code] }
console.log(set[Symbol.iterator]);  //f values() { [native code] }
console.log(els[Symbol.iterator]);  //f values() { [native code] }


//调用这个工厂函数会生成一个迭代器
console.log(str[Symbol.iterator]());   //StringIterator{}
console.log(arr[Symbol.iterator]());   //ArrayIterator{}
console.log(map[Symbol.iterator]());   //MapIterator{}
console.log(set[Symbol.iterator]());   //SetIterator{}
console.log(els[Symbol.iterator]());   //ArrayIterator{}

实际写代码的过程中，不需要显式调用这个工厂函数来生成迭代器。实现可迭代协议的所有类型都会自动兼容接收可迭代对象的任何语言特性。接收可迭代对象的原生语言特性包括：

1）for-of循环

2）数据解构

3）扩展操作符

4）Array.from（）

5）创建集合

6）创建映射

7）Promise.all（）接收由期约组成的可迭代对象

8）Promise.race（）接收由期约组成的可迭代对象

9）yield*操作符，在生成器中使用。

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

let arr=['foo','bar','baz']


//for-of循环
for (let el of arr){
  console.log(el);  
}

//foo
//bar
//baz

//数组解构
let [a,b,c]=arr;
console.log(a,b,c);       //foo,bar,baz

//扩展操作符
let arr2=[...arr];
console.log(arr2);    //['foo','bar','baz'];

//Array.from()
let arr3=Array.from()
console.log(arr3);    //['foo','bar','baz']


//Set构造函数
let set=new Set(arr);
console.log(set);       //Set(3)  {'foo','bar','baz'}


//Map构造函数
let pairs=arr.map((x,i)=>[x,i]);
console.log(pairs);      //[['foo',0],['bar',1],['baz',2]]
let map=new Map(pairs);
console.

如果对象原型链上的父类实现了Iterable接口，那这个对象也就实现了这个接口：

class FooArray extends Array{}
let fooArr =new FooArray('foo','bar','baz');

for (let el of fooArr){
  console.log(el);  
}

//foo
//bar
//baz

四、迭代器协议

　　迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。迭代器API使用next（）方法在可迭代对象中遍历数据。每次成功调用next（），都会返回一个IteratorResult对象，其中包含迭代器返回的下一个值。若不调用next（），则无法知道迭代器的当前位置。

　　next（）方法返回的迭代器对象IteratorResult包含两个属性：done和value。done是一个布尔值，表示是否还可以再次调用next（）取得下一个值；value包含可迭代对象的下一个值（done为false），或者undefined（done为true）。done：true状态称为“耗尽”。表示可以通过以下简单的数组来演示：

//可迭代对象
let arr=['foo','bar'];

//迭代器工厂函数
console.log(arr[Symbol.iterator]);      //f values(){ [native code] }

//迭代器
let iter=arr[Symbol.iterator]();
console.log(iter);      //ArrayIterator()

//执行迭代
console.log(iter.next());       //{done:false,value:"foo"}
console.log(iter.next());      //{done:false,value:"bar"}
console.log(iter.next());      //{done:false,value:undefined}

　　这里通过创建迭代器并调用next（）方法按顺序迭代了数组，直至不再产生新值。迭代器并不不知道怎么从可迭代对象中取得下一个值，也不知道可迭代对象有多大。只要迭代到达done:true状态后续调用next（）就一直返回同样的值了：

let arr=['foo'];
let iter=arr[Symbol.iterator]();
console.log(iter.next());   //{done:false,value:'foo'}
console.log(iter.next());   //{done:true,value:undefined}
console.log(iter.next());   //{done:true,value:undefined}
console.log(iter.next());   //{done:true,value:undefined}

　　每个迭代器都表示对可迭代对象的一次性有序遍历。不同迭代器的实例相互之间没有联系，只会独立地遍历可迭代对象：

let arr=['foo','bar'];
let iter1=arr[Symbol.iterator]();
let iter2=arr[Symbol.iterator]();

console.log(iter1.next());       //{done:false,value:'foo'}
console.log(iter2.next());       //{done:false,value:'foo'}
console.log(iter1.next());       //{done:false,value:'bar'}
console.log(iter2.next());       //{done:false,value:'bar'}

迭代器与不与可迭代对象某个时刻的快照绑定，而仅仅是使用游标来记录遍历可迭代对象的历程。如果可迭代对象在迭代期间被修改了，那么迭代器也会反映相应的变化：

let arr=['foo','baz'];
let iter=arr[Symbol.iterator]();

console.log(iter.next());         //{done:false,value:'foo'}


//在数组中间插入值
arr.splice(1,0,'bar')

console.log(iter.next());         //{done:false,value:'bar'}
console.log(iter.next());         //{done:false,value:'baz'}
console.log(iter.next());         //{true,value:undefined}

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

“迭代器”的概念有时候容易模糊，因为它可以指通用的迭代，也可以指接口，还可以指正式的迭代器类型。下面的例子比较了一个显式迭代器实现和一个原生的迭代器实现。

//这个类实现了可迭代接口（Iterator）、
//调用默认的迭代器工厂函数会返回
//一个实现迭代器接口的迭代器对象
class FOO{
  [Symbol.iterator](){
       return {
           next(){
               return {done:false,value:'foo'}
            }
        }  
  }    

}

let f=new Foo();

//打印出实现迭代器接口的对象
console.log(f[Symbol.iterator]());      //{next:f(){} }

//Array 类型实现了可迭代接口的对象。
//调用Array类型的默认迭代器工厂函数
//会创建一个ArrayIterator的实例
let a=new Array();

//打印出ArrayIterator的实例
console.log(a[Symbol.iterator]());     //Array Iterator{}

五、自定义迭代器

与Iterable接口类似，任何实现Iterator接口的对象都可以作为迭代器使用。下面这个例子中的Counter类只能被迭代一定次数：

class Counter{
  //Counter的实例应该迭代limit次
  constructor(limit){
    this.count=1;
    this.limit=limit;      
  }
  next(){
     if(this.count<=this.limit){
         return {done:false,value:this.count++}
      }else{
         return (done:true,value:undefined)
      }
  }
  [Symbol.iterator](){
      return this;
  }          
}

let counter=new Counter(3);

for(let i of counter){
  console.log(i);  
}
//1
//2
//3

这个类实现了Iterator接口，但不理想。这是因为它的每个实例只能被迭代一次：

for (let i of counter){
  console.log(i);  
}

//1
//2
//3

for (let i of counter){
  console.log(i);  
}
//(nothing logged)

为了让一个可迭代对象能够创建多个迭代器，必须每创建一个迭代器就对应一个新计数器。为此，可以把计数器变量放到闭包里，然后通过闭包返回迭代器：

class Counter{
  constructor(limit){
     this.limit=limit
  }
  [Symbol.iterator](){
       let count=1,
            limit=this.limit;
       return {
             next(){
                if(count <=limit){
                     return {done:false,value:count++};
                 }else{
                     return {done:true,value:undefined}
                 }
             }
          };  
    }  
}
let counter=new Counter(3);

for(let i ofcounter){ console.log(i); }
//1
//2
//3

for(let i of counter){ console.log(i) }
//1
//2
//3

每个以这种方式创建的迭代器也实现了Iterable接口。Symbol.iterable属性引用的工厂函数会返回相同的迭代器。

let arr=['foo','bar','baz'];
let iter1=arr[Symbol.iterator]();
console.log(iter1[Symbol.iterable]);    //f value(){ [native code]}

let iter2=iter1[Symbol.iterator]();
console.log(iter1===iter2);    //true

注意：因为每个迭代器也实现了Iterable接口，所以它们可以用在任何期待可迭代对象的地方，比如for-of循环：

let arr=[3,1,4]
let iter=arr[Symbol.iterator]();
for (let item of arr){ console.log(item) ;}
//3
//1
//4

for (let item of iter){ console.log(item );}
//3
//1
//4

标签：console,log,迭代,Symbol,生成器,JS,let,iterator
来源： https://www.cnblogs.com/jaetyn/p/16412114.html