在线咨询
QQ咨询
服务热线
服务热线:13125520620
TOP

深入理解ES6之——迭代器与生成器

发布时间:2018-3-7 浏览:3008

迭代器
迭代器是被设计专用于迭代的对象,带有特定接口。所有的迭代器对象都有next方法,会返回一个结果对象。该结果对象有两个属性:对应下一个值的value,以及一个布尔类型的done,其值为true时表示没有更多对值可供使用。
 
//es5创建迭代器
function createIterator(items) {
var i = 0;
 
return {
    next: function() {
        var done = (i >= items.length);
        var value = !done ? items[i++] : "undefined";
 
        return {
            done: done,
            value: value
        }
    }
}
}
 
var iterator = createIterator([1, 2, 3]);
console.log(iterator.next());//{done:false,value:1}
console.log(iterator.next());//{done:false,value:2}
console.log(iterator.next());//{done:false,value:3}
console.log(iterator.next());//{done:true,value:"undefined"}
console.log(iterator.next());//{done:true,value:"undefined"}
生成器
生成器是一个能返回迭代器的函数。生成器函数由放在function关键字之后的一个星号(*)来表示,并使用新的yield关键字(指定迭代器在被next()方法调用时应当按顺序返回的值。)。
 
function* createIterator() {
    yield 1;
    yield 2;
    yield 3;
}
 
var iterator = createIterator();
 
console.log(iterator.next());//{done:false,value:1}
console.log(iterator.next());//{done:false,value:2}
console.log(iterator.next());//{done:false,value:3}
console.log(iterator.next());//{done:true,value:undefined}
console.log(iterator.next());//{done:true,value:undefined}
生成器最有意思的方面可能就是它们会在每个yield语句后停止执行。
 
//yield语句在for循环中的使用
function* createIterator(items) {
    for (let i = 0, len = items.length; i < len; i++) {
        yield items[i];
    }
}
 
var iterator = createIterator([1, 2, 3]);
 
console.log(iterator.next());//{done:false,value:1}
console.log(iterator.next());//{done:false,value:2}
console.log(iterator.next());//{done:false,value:3}
console.log(iterator.next());//{done:true,value:undefined}
console.log(iterator.next());//{done:true,value:undefined}
yield只能用于生成器内部,用于其他任何位置都会报错,即使在生成器内部的函数中也不行。因为yield无法穿越函数边界。从这点上来说,yield与return非常相似。
 
function *createIterator(items){
    items.forEach(function(item){
        yield item+1;//语法错误
    })
}
生成器函数表达式
你可以使用函数表达式来创建一个生成器,只需要在function关键字与圆括号之间使用一个星号(*)即可。
 
生成器对象方法
var o = {
    *createIterator(items){
         for (let i = 0, len = items.length; i < len; i++) {
                yield items[i];
            }
    }
}
可迭代对象与for-of循环
可迭代对象被设计用于与es新增的for-of循环配合使用。
 
for-of循环在循环每次执行时会调用可迭代对象的next()方法,并将结果对象的value储存在一个变量上。循环过程会持续到结果对象的done属性编程true为止。
 
let values = [1, 2, 3];
for (let num of values) {
    console.log(num);
}
 
//输出内容为
1,2,3
 
let set = new Set([1, 3, 3, 2, 4, 5, 1, 3]);
 
for (let val of set) {
    console.log(val);
}
 
//输出内容为
1,3,2,4,5
 
let map = new Map();
 
map.set("name", "cc");
map.set("age", 26);
 
for (let val of map) {
    console.log(val);
}
 
//输出内容为
["name","nicolas"]
["age",52]
访问默认迭代器
你可以使用Symbo.iterator来访问对象上的默认迭代器。
 
let values = [1, 2, 3];
 
var iterator = values[Symbol.iterator]();
 
console.log(iterator.next());//{value:1,done:false}
console.log(iterator.next());//{value:2,done:false}
console.log(iterator.next());//{value:3,done:false}
console.log(iterator.next());//{value:undefined,done:true}
内置的迭代器
集合的迭代器
 
ES6具有三种集合对象类型:数组、Map和Set。这三种类型都拥有如下迭代器:
 
entries():返回一个包含键值对的迭代器
values():返回一个包含集合中值的迭代器
keys():返回一个包含集合中键的迭代器
let colors = ["red", "green", "blue"];
let set = new Set([1234, 5678, 9012]);
let map = new Map();
 
map.set("title", "unde");
map.set("format", "ebook");
 
//entries
for (let entry of colors.entries()) {
    console.log(entry);
}
for (let entry of set.entries()) {
    console.log(entry);
}
for (let entry of map.entries()) {
    console.log(entry);
}
 
//values
for (let value of colors) {
    console.log(value);
}
for (let value of set.values()) {
    console.log(value);
}
for (let value of map.values()) {
    console.log(value);
}
 
//keys
for (let key of colors.keys()) {
    console.log(key);
}
for (let key of set.keys()) {
    console.log(key);
}
for (let key of map.keys()) {
    console.log(key);
}
字符串的迭代器
let message = "A  B";
 
for (let s of message) {
    console.log(s);
}
 
//输出内容为
A
(BLANK)
(BLANK)
B
NodeList的迭代器
let p = document.getElementsByTagName("p");
 
for (let c of p) {
    console.log(c.className);
}
传递参数给迭代器
function* createIterator() {
    let first = yield 1;
    let second = yield first + 2;
    yield second + 3;
}
 
let iterator = createIterator();
console.log(iterator.next());//1
console.log(iterator.next(4));//6
console.log(iterator.next(5));//8
在包含赋值操作的第一个yield语句中,表达式右侧再第一次调用next()时被计算,而表达式左侧则在第二次调用next()方法时,并在生成器函数执行之前被计算。
 
生成器委托
function* createNumI() {
    yield 1;
    yield 2;
}
 
function* createColI() {
    yield "red";
    yield "green";
}
 
function* createComb() {
    yield* createNumI();
    yield* createColI();
    yield true;
}
 
let iterator = createComb();
 
console.log(iterator.next());//{value:1,done:false}
console.log(iterator.next());//{value:2,done:false}
console.log(iterator.next());//{value:"red",done:false}
console.log(iterator.next());//{value:"green",done:false}
console.log(iterator.next());//{value:true,done:false}
console.log(iterator.next());//{value:undefined,done:false}

TAG
软件定制,软件开发,瀚森HANSEN
0
该内容对我有帮助