微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ja_JavaScript_生成器

生成

什么是生成

image-20220221101156921

yield的返回值

image-20220221113324459

  1. yield后面的返回值,返回到调用next()返回的对象的value里面

生成器.return()代码提前终止执行

image-20220221114103864

  1. return()实现代码的提前终止执行

生成器代替迭代器

生成器代替迭代器-方式一

03_生成器代替迭代器.js

关键代码

image-20220221161411043

对比

image-20220221161930922

function makeIterator(array) {
  let nextIndex = 0;
  return {
    next: function () {
      return nextIndex < array.length
        ? { value: array[nextIndex++], done: false }
        : { value: undefined, done: true };
    },
  };
}

const it = makeIterator(['a', 'b']);

console.log(it.next()); //=> { value: 'a', done: false }
console.log(it.next()); //=> { value: 'b', done: false }
console.log(it.next()); //=> { value: undefined, done: true }
console.log('------------------------------------------------');
// ----------------------------------------------------

function* makeGenerator(array) {
  for (const item of array) {
    yield item;
  }
}

const gt = makeGenerator(['a', 'b']);

console.log(gt.next()); //=> { value: 'a', done: false }
console.log(gt.next()); //=> { value: 'b', done: false }
console.log(gt.next()); //=> { value: undefined, done: true }

生成器代替迭代器-方式二

04_生成器代替迭代器_方式二.js

function* makeGenerator(array) {
  yield* array;
}

const gt = makeGenerator(['a', 'b']);

console.log(gt.next()); //=> { value: 'a', done: false }
console.log(gt.next()); //=> { value: 'b', done: false }
console.log(gt.next()); //=> { value: undefined, done: true }

总结

image-20220221162448044

  1. 三种写法
    1. 自己手动操作,一步一步计算,不推荐
    2. 使用for...of...循环遍历,推荐
    3. 语法糖形式,推荐

类中使用生成器代替迭代器

代码对比

image-20220225105331872

关键代码

image-20220225105035075

class Classroom {
  constructor(address, name, students) {
    this.address = address;
    this.name = name;
    this.students = students;
  }

  *[Symbol.iterator]() {
    yield* this.students;
  }
}

const c1 = new Classroom('Beijing', 'Xuexi', ['Alice', 'Bruce', 'Celina']);
const iterator = c1[Symbol.iterator]();
console.log(iterator.next()); //=> { done: false, value: 'Alice' }
console.log(iterator.next()); //=> { done: false, value: 'Bruce' }
console.log(iterator.next()); //=> { done: false, value: 'Celina' }
console.log(iterator.next()); //=> { done: true, value: undefined }

console.log('------------------');
for (let item of c1) {
  console.log(item);
  //=> Alice
  //=> Bruce
  //=> Celina
}

生成函数自动执行

image-20220225105924680

  1. 采用的是递归调用的思路

image-20220225110011999

  1. 采用第三方co包,可以模拟上面的代码

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐