javascript 迭代器案例逐步認識

Soarkey 發布于2019-08-26 12:20 / 1792人閱讀

摘要：一認識什么是傳遞參數注意這里打印函數睡眠函數改進版本，實現自執行迭代器自執行函數依次執行，，異步自執行可以借助上面函數執行，這里就直接執行依次執行結果是終極解決放啊在，我們一般使用大神的庫來解決這個函數調用的問題可以參考我的博文章內容

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云服務器 -迭代器迭代器數組迭代器迭代器對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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