javascript 迭代器案例逐步认识

Soarkey 发布于2019-08-26 12:20 / 1809人阅读

摘要：一认识什么是传递参数注意这里打印函数睡眠函数改进版本，实现自执行迭代器自执行函数依次执行，，异步自执行可以借助上面函数执行，这里就直接执行依次执行结果是终极解决放啊在，我们一般使用大神的库来解决这个函数调用的问题可以参考我的博文章内容

es6 generate 是什么东西？

迭代器： 是一种协议，每一次迭代的值都跟上一次迭代的不一样，总会有一个next 总能拿到一个对象
生成器：生成一个可以返回迭代器的函数，本质上还是操作迭代器，更加方便的使用迭代器，每次返回的都是promise。

一：认识什么是generate

function* gen(){
  yield 1
  yield* add()
  yield x   // 传递参数
  return 4

}

function* add(){
   yield 11
   yield 12
}

const g = gen()
log( g.next() )  // {done:false,value;1}
log( g.next() )  // {done:false,value;11}
log( g.next() ) // {done:false,value;12}
log( g.next(3) ) // {done:false,value;3}  // 注意这里
log( g.next() ) // {done:false,value;4}
log( g.next() ) // {done:true,value;undefined}

2：

// log 打印函数
const log = s => console.log.call(this,s)
// sleep 睡眠函数
const sleep = (cb,t) => setTimeout( cb.bind(this) ,t)

function* request(resume){
  yield  sleep( ()=>{ console.log(1)} ,1000)
  yield  sleep( ()=>{ console.log(2)} ,2000)
  yield  sleep( ()=>{ console.log(3)} ,3000)
}

var g = request()
g.next() //  1
g.next() //  2
g.next() //  3

3: 改进版本，实现自执行

// 迭代器自执行函数
function run(generatorFunction) {
   var generatorItr = generatorFunction(resume)
   function resume(callbackValue) {
      generatorItr.next(callbackValue);
   }
   generatorItr.next()
}

function* request(resume){
  let a = yield  sleep( ()=>{

    console.log(1)
    resume()

  } ,1000)


  yield  sleep( ()=>{
     console.log(2)
     resume()
  } ,2000)

  yield  sleep( ()=>{ console.log(3) } ,3000)
}

run(request)  // 依次执行 1，2，3

4： ajax 异步自执行

const urls = ["url1","url2","url3"]
const req = (cb,url) => setTimeout( cb.bind(this,url) ,1000)


function* request(arr){
   for(let i=0; i{
      req((u)=>{
         if(u){
            resolve(u)
         }else{
            reject(u)
         }
      },url)
  })

  p.then((r)=>{
     g.next()
  })
}


// 可以借助上面run函数执行，这里就直接执行
var g = request(urls)
g.next()  // 依次执行结果是： url1  url2  url3

5：终极解决放啊在node，我们一般使用 TJ 大神的 co库来解决这个run 函数调用的问题：

co(function* (){
  var result = yield Promise.resolve(true)
  return result
}) .then((v)=>{
  log(v)
})

可以参考我的博文章内容

云服务器 GPU云服务器 -迭代器迭代器数组迭代器迭代器对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108511.html

《JavaScript 模式》知识点小抄本（上）

摘要：单体模式有以下优点用来划分命名空间，减少全局变量数量。通常我们使用操作符创建单体模式的三种选择，让构造函数总返回最初的对象使用全局对象来存储该实例不推荐，容易全局污染。实现该工厂模式并不困难，主要是要找到能够穿件所需类型对象的构造函数。介绍最近开始给自己每周订个学习任务，学习结果反馈为一篇文章的输出，做好学习记录。这一周(02.25-03.03)我定的目标是《JavaScri...

didikee 2019-08-23 15:37 评论0 收藏0
从观察者模式到迭代器模式系统讲解 RxJS Observable（一）

摘要：是的缩写，起源于，是一个基于可观测数据流结合观察者模式和迭代器模式的一种异步编程的应用库。是基于观察者模式和迭代器模式以函数式编程思维来实现的。学习之前我们需要先了解观察者模式和迭代器模式，还要对流的概念有所认识。 RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stre...

notebin 2019-08-23 18:02 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0