8. 迭代器与生成器

在别的语言中,从使用 for 循环转变到使用迭代器对象。for 循环需要初始化变量以便追踪集合内的位置,而迭代器则以编程方式返回集合中的下一个项。新增的 for-of 与它协同工作,扩展运算符( ... )也使用了。

8.1 循环的问题

var colors = ["red", "green", "blue"];
for (var i = 0, len = colors.length; i < len; i++) {
  console.log(colors[i]);
}

缺点:它被嵌套使用并要追踪多个变量时,情况就会变得非常复杂。

8.2 何为迭代器

  1. 所有的迭代器对象都拥有 next() 方法,会返回一个结果对象。该结果对象有两个属性:对应下一个值的 value ,以及一个布尔类型的 done ,其值为 true 时表示没有更多值可供使用。
  2. 迭代器持有一个指向集合位置的内部指针,每当调用了 next() 方法,迭代器就会返回相应的下一个值。
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]);

8.3 何为生成器?

生成器( generator )是能返回一个迭代器的函数。。生成器函数由放在 function 关键字之后的一个星号( * )来表示,并能使用新的 yield 关键字。 yield 表示迭代器在被 next() 方法调用时应当按顺序返回的值。

function *createIterator(items) {
  for (let i = 0; i < items.length; i++) {
    yield items[i];
  }
}
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"

每当遇到 yield ,循环就会停止;而每当iterator 上的 next() 方法被调用,循环就会再次执行到 yield 语句处。
yield 关键字只能用在生成器内部,用于其他任意位置都是语法错误,即使在生成器内部的函数中也不行

function *createIterator(items) {
items.forEach(function(item) {
// 语法错误
yield item + 1;
});
}

尽管yield严格位于 createIterator() 内部,此代码仍然有语法错误,因为 yield无法穿越函数边界。从这点上来说, yield 与 return 非常相似,在一个被嵌套的函数中无法将值返回给包含它的函数。

8.4 生成器函数表达式

let createIterator = function *(items) {
  for (let i = 0; i < items.length; i++) {
    yield items[i];
  }
};
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"

8.5 生成器对象方法

var o = {
  createIterator: function *(items) {
    for (let i = 0; i < items.length; i++) {
      yield items[i];
    }
  }
};
let iterator = o.createIterator([1, 2, 3]);

8.6 可迭代对象与 for-of 循环

可迭代对象( iterable )是包含 Symbol.iterator 属性的对象。其定义了为指定对象返回迭代器的函数

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]
console.log(iterator);// ƒ values() { [native code] }

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();
console.log(iterator)// Array Iterator {}

我们判断一类对象是否可以迭代

function isIterable(object) {
  return typeof object[Symbol.iterator] === "function";
}
console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true

8.7 创建可迭代对象

可以创建一个包含生成器的Symbol.iterator 属性,让它们成为可迭代对象。

let collection = {
  items: [],
  *[Symbol.iterator]() {
    for (let item of this.items) {
      yield item;
    }
  }
};
collection.items.push(1);
collection.items.push(2);
collection.items.push(3);
for (let x of collection) {
console.log(x); // 1,2,3
}

8.8内置的迭代器

ES6 具有三种集合对象类型:数组、 Map 与 Set 。这三种类型都拥有如下的迭代器。用法都相同
entries() :返回一个包含键值对的迭代器;
values() :返回一个包含集合中的值的迭代器;
keys() :返回一个包含集合中的键的迭代器。

let tracking = new Set([1234,5678,9012])
for(let entry fo tracking.entries()) {
  console.log(entry);// [1234, 1234],[5678,5678],[9012,9012]
}

不同集合类型的默认迭代器。
在没有显示的指定则使用默认的迭代器。数组和set集合是value()方法。map是entries().
解构与for....of...循环

let data = new Map();
data.set('title', 'ebook');
for(let [key,value] of data){
  console.log(key,value);
}

8.9 字符串的迭代器

用for of 可以避免非bmp字符的读取。使用数组下标方式,会出现bmp字符无法读取导致为空并且字符个数出错。

var message = "a 🐔 b"
for (let i=0; i<message.length;i++){
  console.log(message[i]);
}
for (let item of message){
  console.log(item);
}

8.10NodeList迭代器

NodeList,代表页面文档中所有元素的集合。NodeList类型也可以进行for...of...

8.11 展开运算符与非数组可迭代对象

在之前我们用...把Set对象转化为数组

let set = new Set([1,2,3,4,5]), array=[...set];
console.log(array);

展开运算符可以操作所有的可迭代对象,并且根据默认迭代器来选择要引用的值。

let map = new map([['name', 'Nicholas'], ['age', 15]]), array=[...map];
console.log(array);

数组字面量可以之心多次展开运算符

8.12高级迭代器功能

1. 给迭代器传递参数:如果给迭代器next()传递参数,则这个参数的值就会替代生成器内部上的一条yield语句的返回值。

function *createIterater() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(4)// {value: 6, down: false}
iterater.next(5)// {value: 8, down: false}
iterater.next()// {value: undefined, down: false}

第一次调用next()方法无论传递什么参数都会被丢弃。
2. 在迭代器中抛出错误:通过throw方法,当迭代器恢复执行时可以令其抛出错误。

function *createIterater() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(iterater.throw(new Error('Boom')))

-* - * - * - * -* 错误是在赋值之前错误 但是在上一条的yeild之后报错-* - * - * - * -*
错误拦截

function *createIterater() {
let first = yield 1;
let second;
try { 
   second = yield first + 2;
} catch(ex) {
  second = 6;
}
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(4))// {value: 6, down: false}
iterater.next(iterater.throw(new Error('Boom')))// {value: 9, down: false}

3. 生成器返回语句
由于生成器也是函数,因此可以通过return语句提前退出函数执行。对于最后一次next调用,可以主动为其制定一个返回值。return表示已经完成,down会设置为true。

function *createIterator() {
  yeild 1;
  return 42;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next()// {value: 42, down: true}
iterater.next()// {value: undefined, down: true}

展开运算符与for...of 会忽略通过return语句制定的任何返回值。只要down为true就立即停止读取其他的值。

8.13 委托生成器

在某些情况下我们需要将两个迭代器合二为一,这时候可以创建一个生成器,再给yield语句添加一个*,就可以将生成数据过程委托给其他迭代器。
eg:

function *creatNumberIterator() {
    yield 1;
    yield 2;
    return 3;
}
function *creatRepeatingIterator(count) {
    for(let i=0; i<count; i++) {
        yield "repeat"
    }
}
function *creatCombineIterator() {
    let result = yield *creatNumberIterator();
    yield *creatRepeatingIterator(result);
}

var iterator = creatCombineIterator();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: undefined, done: true}

yield *也可以直接作用于字符串,此时将使用字符串的默认迭代器

8.14异步任务执行

在nodeJS中可以读取文件之后做别的事情,但是如果读取文件之后再去读取文件,等进行嵌套,将会非常的复杂。生成器和yield就派上了用场
1.简单任务执行器

function run(taskDef) {
  // 创建一个无使用限制的迭代器
  let tast = taskDef();
  //开始执行任务
  let result = task.next();
  
  function step() {
    if(!result.down) {
      result = task.next();
      step();
    }
  }
}

run(function*() {
  console.log(1);
  yield;
  console.log(2);
  yield;
  console.log(3);
})

2.向任务执行器传递数据

function run(taskDef) {
  // 创建一个无使用限制的迭代器
  let tast = taskDef();
  //开始执行任务
  let result = task.next();
  
  function step() {
    if(!result.down) {
      result = task.next();
      step();
    }
  }
}

run(function*() {
  let value = yield 1;
  console.log(value);// 1
  value = yield value + 3
  console.log(value)// 4
})

4. 异步任务执行

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,294评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,780评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,001评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,593评论 1 289
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,687评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,679评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,667评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,426评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,872评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,180评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,346评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,019评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,658评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,268评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,495评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,275评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,207评论 2 352

推荐阅读更多精彩内容