es6学习笔记--Interator和Generator(以及for-of的用法)

这几天学习了遍历器和生成器，看着资料学，有点雾里缭绕的感觉，让人忍不住放弃，还好多看了好几遍，怼着资料里的例子让自己学会了Interator和Generator。

 

Interator，中文简称：遍历器，是一种接口，为具有遍历结构的或者说有length长度的集合提供一个接口，从而进行遍历操作。

Generator，中文简称：生成器，从语法上讲是一种状态机，通过遍历操作，展示不同的状态情况。

 

Interator(遍历器)

Iterator 接口的目的，就是为所有数据结构(集合)，提供了一种统一的访问机制，为for-of这个遍历方法提供接口，任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

ps: 数据结构=集合

在 JavaScript 中 迭代器是一个对象，它提供了一个next() 方法，(除了next()方法还有return和throw方法),用来返回序列中的下一项。这个方法返回包含两个属性：done和 value。done属性是个布尔值，代表遍历是否结束,即是否还有必要再一次调用next方法。value属性代表当前成员的值。

迭代器对象一旦被创建，就可以反复调用next()。

以下代码是模拟迭代器：

function makeIterator(array){
    var nextIndex = 0;
    return {
    next: function(){
        return nextIndex < array.length ?
            {value: array[nextIndex++], done: false} :
            {done: true};
    }
    };
}
let a = makeIterator(['apple','pear','orange'])
console.log(a.next())   // {value: "apple", done: false}
console.log(a.next())   // {value: "pear", done: false}
console.log(a.next())   // {value: "orange", done: false}
console.log(a.next())   // {done: true}

由上述例子可知：next方法返回的是一个对象，有value和done属性，如果还有下一个next()可遍历，那么done为false，如果done为true，说明不可再次遍历。

ps：遍历器创建之后不会自动触发，而是由next()触发。

 

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

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性, Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

常见的具有Iterator接口的遍历器:

　　Array

　　Map

　　Set

　　String

　　TypedArray

　　函数的 arguments 对象

　　NodeList 对象

　　生成器

ps:普通的对象不具有Iterator接口，原因是对象的遍历是没有顺序的，没有相应的索引值可言，所以想要使普通的对象要有Iterator接口，需要给它加上Object方法变成有顺序的对象即可。

Iterator遍历器简单来说，就是在具有Iterator的对象(Array，Map，Set，String，TypedArray，函数的 arguments 对象，NodeList 对象，生成器)上进行for-of的循环，并且用next()方法获取遍历的值.

 

学习一下新型的for-of循环。可在具有Iterator 接口的元素进行遍历。

for-of循环和以前的以前的for循环和es5的forEach循环一样，遍历操作。

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

let arr = [1,2,3];
for(let v of arr){
    v +=1;
    console.log(v)
} // 2  3  4

for-of替代了以前的所有的循环遍历，融合了其优点，摒弃了其缺点。

 

for-of与for，forEach，for-in相比的优缺点:

1 forEach循环不能用 break 中断循环，否则会报错.也不能使用 return 语句返回到外层函数

[1,2,3,4,5].forEach((i,v) => {
    console.log(v)
    if(i > 3){
        break;
    }
})  // Uncaught SyntaxError: Illegal break statement

2 for-in 遍历,只获取键名，获取不到键值。以任意顺序遍历键名，只能遍历带有字符串的key。通常不推荐循环数组。

for(let v in ['a','b','c']){
    console.log(v)
}  // 0   1   2

3 for循环书写太复杂，emmmm，只能这么说。

 

for-of的优点：

1 最简洁、最直接的遍历数组元素的语法

let arr = [1,2,3,4];
for(let v of arr){
    console.log(v)
}  // 1    2    3    4

上个方法避开了for-in循环的所有缺陷。

let a = ['a','b','c','d']
for(let v of a){
    console.log(v)
}   // a   b   c    d

上述代码for-of可以直接获取键值，如果想要获取其索引值可以采用Object扩展方法keys()和entires()

2 与forEach()不同的是，它可以正确响应break、continue和return语句

for(let v of [1,2,3,4,5]){
    console.log(v)
    if(v > 3){
        break
    }
} //  1   2   3    4     5

3 可以遍历其他的所有集合(Nodelist,Set,Map),还有生成器

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

let doms = document.querySelectorAll('div')
for(let v of doms){
    console.log(v.innerHTML)
}    // 1   2   3   4

for-of可以遍历dom元素，并且进行相应的操作

let set = new Set([1,2,3,4,5])
for(let v of set){
    console.log(v)
}   //  1   2  3  4  5

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

Set和Map本身具有 Iterator 接口，所以用for-of循环，set返回的是一个值，而map返回的是一个数组。

ps:for-of不能遍历普通的对象，会报xxx is not iterable,需要把普通对象转化成具有Interator接口的即可。Object.keys(),Object.values()和Obejct.entries()也可以获取

let obj = {name:'peter',age:25}
for(let v of obj){
    console.log(v)
} // Uncaught TypeError: obj is not iterable

let obj = {name:'peter',age:25}
for(let v of Object.keys(obj)){
    console.log(v)
} // name  age

4 另外，for-of可以适用于字符串

let str = 'hello';
for(let v of str) {
    console.log(v)
}   // h  e  l  l  o

Interator不是很难懂，只要明白了哪些是数据集合，就说明具有Interator接口，自然就可以当作遍历器，从而使用for-of循环和使用next方法获取想要的数据。

Generator(生成器)

通过对Interator的理解，生成器也是具有Interator接口的对象，它本身带有遍历特性，返回一个遍历器对象。

从写法上看，它和普通函数差别不大，就多了两个特性：

　　1 在函数声明前加上星号(*),

　　2 函数内部多了一个关键字yield。

既然生成器是遍历器，那么可以使用遍历器的方法(本身函数不会实行，必须通过next()方法才能调用或者使用for-of返回)

function *fn(){
    yield 'peter';
    yield 1;
    yield {name:'peter'};
    yield [1,2,3,4];
    yield function *foo(){
        yield 123;
    }
}
let a = fn()
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
{value: "peter", done: false}
{value: 1, done: false}
{value: {…}, done: false}
{value: Array(4), done: false}
{value: ƒ, done: false}
{value: undefined, done: true}

从上述例子可知:每一个next()方法，就返回一个数据，这说明yield表达式代表一个进程，返回其后面的表达式。

学习一下yield:

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

2 yield 是关键字，其后面可以跟变量，常量，表达式，但是必须有next方法才能调用或者for-of返回,本身不是返回值

function *fn(){
    yield 'a';
    let b = yield 'b' + 'c';
    yield 'd'
}
let foo = fn()
for(let v of foo){
    console.log(v)
}  //  a   bc    d

由上述例子可知：yield返回的是后面的表达式，不影响前面的声明

3 遇到yield表达式时，进程暂停，next()方法才会调用yield后面的表达式。

function *fn(){
    yield '1'
    console.log('start')
    yield '2'
}
let a = fn()
console.log(a.next())
{value: "1", done: false}

4 作用和return差不多，但也有区别，return只能执行一回，yield能执行多次，每次遇到yield时就先暂停，然后下一次运行从暂停的位置开始。

5 yield只能在Genterator函数里才能运用，在其他地方运用会报错。

function fn(){
    yield 'a'
}
fn()   // Uncaught SyntaxError: Unexpected string

6 yield和return同时在一个函数里时，按照代码同步顺序执行的结果，到了return就直接返回，不继续执行下一步。

function *fn(){
    yield '1';
    yield '2';
    return '3';
    yield '4'
}
let a = fn()
console.log(a.next());  // {value: "1", done: false}
console.log(a.next());  // {value: "2", done: false}
console.log(a.next());  // {value: "3", done: true}
console.log(a.next());  // {value: undefined, done: true}
console.log(a.next());  // {value: undefined, done: true}

7 yield 也可以跟星号，代表在一个 Generator 函数里面执行另一个 Generator 函数。

在生成器函数里是无法进行另一个Generator函数的，没有效果,若单单使用yield，返回的是另一个生成器的对象

function *foo(){
    yield 'f'
}
function *fn(){
    yield 'a';
    yield foo()
    yield 'b'
}
for( let v of fn()){
    console.log(v)
}   // a   foo {<suspended>}     b

所以在yield* 可以用来进行另一个Generator函数(只要在一个Generator函数运行另一个Generator函数就可以直接yield*)

function *foo(){
    yield 1;
    yield 2
}
function *fn(){
    yield 'a';
    yield *foo()
    yield 'b'
}
for( let v of fn()){
    console.log(v)    // a   1  2    b
}

上面已经说到生成器也是具有Interator接口的对象，不可置否的，生成器本身带有Symbol.iterator，可以说生成器是遍历器的一种，所以可遍历，可以使用for-of来循环数据。

for...of循环可以自动遍历 Generator 函数时生成的Iterator对象，且此时不再需要调用next方法。

简单来说，for-of里返回的数据和next()中value一样.区别在于for-of循环完后不循环return后面的表达式。而next()则会。

function *fn(){
    yield 'a';
    yield 'b';
    yield 'c';
    yield 'd';
    return 'end'
}
let a = fn()
for(let v of a){
    console.log(v)  // a   b   c    d
}

function *fn(){
    yield 'a';
    yield 'b';
    yield 'c';
    yield 'd';
    return 'end'
}
let a = fn()
console.log(a.next());   // {value: "a", done: false}
console.log(a.next());   // {value: "b", done: false}
console.log(a.next());   // {value: "c", done: false}
console.log(a.next());   // {value: "d", done: false}
console.log(a.next());   // {value: "end", done: true}
console.log(a.next());   // {value: undefined, done: true}

扩展运算符也支持生成器的遍历

function *fn(){
    yield 'a';
    yield 'b';
    yield 'c';
    yield 'd';
    return 'end'
}
let a = fn()
console.log([...a])   //  ["a", "b", "c", "d"]

由此可见，遍历出来的依然不包含return的表达式

概要总结；只要具有Symbol.iterator属性的，就可以遍历yield表达式

Generator 函数也不能跟new命令一起用，会报错

function* f() {
    yield 2;
    yield 3;
}
new f()  // TypeError: F is not a constructor

Generator 函数的方法:

next() 返回 Generator 函数对象中yield后面的表达式，上面已经用到了next方法。yield表达式本身没有返回值，总是返回undefined

当next()有参数时,该参数就会被当作上一个yield表达式的返回值。

function *fn(x){
    let a = yield x;
    let b = yield 2 + a;
}
let a = fn(2);
console.log(a.next(5));   // {value: 2, done: false}
console.log(a.next(10));  // {value: 12, done: false}
console.log(a.next(20));  // {value: undefined, done: true}

由于next方法的参数表示上一个yield表达式的返回值，所以在第一次使用next方法时，传递参数是无效的。

所以第一个next方法用来启动遍历器对象，所以不用带有参数。

      第二个next()方法把第二个yield后面的2替换成了10，所以10+2=12

      第三个next()方法因为没有yield，返回undefined，参数无效

ps:如果一开始传了参数，第二个next没有传参数，则是undefined

function *fn(x){
    let a = yield x;
    let b = yield 2 + a;
}
let a = fn(2);
console.log(a.next());   // {value: 2, done: false}
console.log(a.next());  // {value: NaN, done: false}
console.log(a.next());  // {value: undefined, done: true}

第二个传参为空导致undefined+2等于NaN

next()方法的意义：Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。

throw() 在函数体外抛出错误，然后在 Generator 函数体内捕获。

let a = function* () {
    try {
        yield ;
    } catch ( e ){
        console.log(e);
    }
};
var i = a();
console.log(i.throw())  // Uncaught undefined

生成器的声明方式和普通的一样。    yield后面没有表达式，为undefined。

throw方法可以接受一个参数，该参数会被catch语句接收，建议抛出Error对象的实例。

let g = function* () {
    try {
        yield 1;
    } catch (e) {
        console.log(e);
    }
    yield 'a';
    yield 'b'
};

let i = g();
console.log(i.next())  //
i.throw(new Error('出错了！'));  // Error: 出错了！(…)   附带执行了一次yield ‘a’
console.log(i.next())  // b

throw()方法的作用就是捕获异常，并且继续执行下去,不因为异常而中断。throw方法被捕获以后，会附带执行下一条yield表达式。也就是说，会附带执行一次next方法。

ps:不要混淆遍历器对象的throw方法和全局的throw命令。上面的异常是用遍历器对象的throw方法抛出的，而不是用throw命令抛出的。后者只能被函数体外的catch语句捕获。

throw()的意义：大大方便了对错误的处理。多个yield表达式，可以只用一个try...catch代码块来捕获错误。如果使用回调函数的写法，想要捕获多个错误，就不得不为每个函数内部写一个错误处理语句，现在只在 Generator 函数内部写一次catch语句就可以了。

return() 返回给定的值，并且终结遍历 Generator 函数。

当return()不传参数时，默认是undefined，就相当于最后一步，done即为true时的操作，value值为undefined

function *fn(){
    yield 1;
    yield 2;
    return 3;
}
let a = fn();
console.log(a.next())   // {value: 1, done: false}
console.log(a.return());   // {value: undefined, done: true}
console.log(a.next())   // {value: undefined, done: true}

当return()传参数时，value值为传的参数

function *fn(){
    yield 1;
    yield 2;
    return 3;
}
let a = fn();
console.log(a.next())   // {value: 1, done: false}
console.log(a.return(100));   // {value: 100, done: true}
console.log(a.next())   // {value: undefined, done: true}

return()的意义：通常在生成器异步操作时需要在某个时段跳出来。

Generator生成器是异步编程提供了方便。

对于Interator和Generator，在平时使用时很少用到，只有那个for-of可以替代for循环使用，主要用于异步编程async当中。学习这个感觉没学全，过后我会再仔细学一遍。知识点我放到github里了，有需要可以去下载一起学习。

还是那句话。有什么问题或错误请私信或者下方评论，一起讨论进步。

参考资料：

阮一峰es6入门 http://es6.ruanyifeng.com/