JavaScript之 Iterable、Generators

Iterable

前言：ES5之前，我们有数组存储数据，遍历数组可以采用下标循环；
ES6出来之后，我们多了Map、Set类型，而这两个无法使用下标进行遍历，怎么办好呢？

为了统一集合类型，ES6标准引入了新的iterable迭代器，适用于Array、Map和Set等可迭代对象。这些集合都可以通过新的for……of循环来遍历。

可迭代对象
1.数组Arrays
2.字符串Strings
3.Map
4.Set
5.arguments实参
6.Generators(ES6新增:生成器函数)

for(let i of ['a','b','c']){
    console.log(i)//a,b,c
}
for(let i of 'abc'){
    console.log(i)//a,b,c
}
let map=new Map().set('a',1).set('b',2);
for(let i of map){
     console.log(i)//['a',1]['b',2]
}
let set=new Set().add('a').add('b');
for(let i of set){
    console.log(i)//a,b
}
function printArgs(){
    for(let i of arguments){ console.log(i);//a,b }
}
printArgs('a','b');

Extra ：for……of 与 for……in 与 forEach
1.for……in遍历的是对象的属性名称；for……of遍历的是集合本身的元素；

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

2.forEach是iterable内置的一个方法，它接收一个函数，每次迭代就自动回调该函数。

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});
//Map的回调函数参数依次为value，key和map本身
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});
//Set的前两个参数都是元素本身（element与sameElement相同），最后一个为set本身
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Generators

前言：generator(生成器函数)是什么？用来干嘛？
举例子：JavaScript是单线程的，那么在一个事务在运行的时候，另一个事务是得等待前一个事务运行完的。那么想要暂停前一个事务，插进去一个事务，也就是多个线程相互协作，是怎么完成的呢。（如下图）

线程问题解决方案：异步编程
1.promise JavaScript核心技术解密
2.generators：function*,比普通函数多出来一个;
2-1.yield：yield关键字使生成器函数执行暂停*，yield关键字后面的表达式的值返回给生成器的调用者。
生成器被打断，生成器的next()接收yield的值.
yield官方定义

function* gen(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return "结束";
    }
    let g = gen();
    let i = 0;
    let st = setInterval(() => {//每间隔500ms执行一次g.next()，执行7次，并在控制台打印
            i++;
            console.log(g.next()); 
            if(i>7){ 
                clearInterval(st);
            } 
        }, 500);

可以看出generator 遇到yleld就会暂停，只有当调用generator.next()才会向下执行，调用这个方法会返回{value: x, done: true/false},这个对象中value是yield的返回值，done表示generator是否执行结束，只有当执行到return时，这个对象中的done才会变成true，说明执行结束；如果仍然执行的话，如上图后两条，执行到done为true时就不要执行了