javascript設計模式之迭代器模式的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了javascript設計模式之迭代器模式的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站設計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的吳起網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

迭代器模式分為內(nèi)部迭代器和外部迭代器，內(nèi)部迭代器就是在函數(shù)內(nèi)部定義好迭代的規(guī)則，它完全接手整個迭代的過程，外部只需一次初始調(diào)用。

內(nèi)部迭代器

以下自行實現(xiàn)的類似jquery中$.each()的each()函數(shù)就是內(nèi)部迭代器

//實現(xiàn)一個jq的$.each()迭代器

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

var each = function(arr, callback){
  for(var i=0; i<arr.length; i++){
    callback.call(null, i, arr[i])  //把下標和元素當作參數(shù)傳遞給callback參數(shù)
  }
}

each(arr, function(i, n){
  console.log(i, n);
})

//類似于jquery的 $.each(arr, function(i,n){})

內(nèi)部迭代器在調(diào)用時非常方便，但是有一個缺點，就是無法同時迭代兩個目標值，比如上述each函數(shù)就無法同時迭代兩個數(shù)組。

對兩個數(shù)組做相等性判斷時，如果不改迭代器內(nèi)部方法實現(xiàn)，只能通過each的回調(diào)函數(shù)進行實現(xiàn)，雖然能實現(xiàn)，但不是很優(yōu)雅。

//對兩個數(shù)組做相等性判斷時，如果不改迭代器內(nèi)部方法實現(xiàn)，只能通過each的回調(diào)函數(shù)進行實現(xiàn)，雖然能實現(xiàn)，但不是很優(yōu)雅。
let compare = function (ary1, ary2) {
  if(ary1.length !== ary2.length){
    throw new Error('ar1和ary2長度不相等。')
  }

  each(ary1, function (i, n) {
    if(n !== ary2[i] ){
      throw new Error('ary1和ary2不相等。')
    }
  })

  console.log('ary1和ary2相等!');
}

compare([1,2,3], [1,2, 3])

外部迭代器

外部迭代器必須顯示請求迭代下一個元素，雖然這樣做會增加調(diào)用的復雜度，但也會增強迭代的操作靈活性，程序可以手工控制迭代的過程和順序。

外部迭代器示例代碼1：

let Iterator = function (obj) {
  let current = 0;

  let next = function () {
    current += 1
  }

  let isNotDone = function () {
    return current <= obj.length
  }

  let getCurrentItem = function () {
    return obj[current];
  }

  return {
    next,
    isNotDone,
    getCurrentItem
  }
}

//外部迭代器通過next方法進行手工迭代
let arr = ['a', true, false, '10', 88, 741]
let iterator1 = Iterator(arr)
console.log(iterator1.getCurrentItem()); // a
iterator1.next() 
console.log(iterator1.getCurrentItem()); // true
iterator1.next() 
console.log(iterator1.getCurrentItem()); // false
iterator1.next() 
console.log(iterator1.getCurrentItem()); // '10'


//改寫compare函數(shù)
let compare = function (iterator1, iterator2) {
  while(iterator1.isNotDone() && iterator2.isNotDone()){
    if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()){
      throw new Error('iterator1和iterator2不相等。')
    }
    iterator1.next()
    iterator2.next()
  }

  console.log('iterator1和iterator2相等。');
}

let iterator1 = Iterator([1, 2, 3, 4])
let iterator2 = Iterator([1, 2, 3, 4, 5])

compare(iterator1, iterator2)  //iterator1和iterator2不相等。

外部迭代器示例代碼2：

let Iterator = function (array) {
  let nextIndex = 0;

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

let it = Iterator(['a', 3, 10])
console.log(it.next().value);  //a
console.log(it.next().value);  //3
console.log(it.next().value);  //10  迭代到這步已經(jīng)把所有值都迭代完成
console.log(it.next().done);  //true

感謝你能夠認真閱讀完這篇文章，希望小編分享的“javascript設計模式之迭代器模式的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

分享題目：javascript設計模式之迭代器模式的示例分析-創(chuàng)新互聯(lián)
本文來源：http://muchs.cn/article20/csjdco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、響應式網(wǎng)站、面包屑導航、網(wǎng)站建設、手機網(wǎng)站建設、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設公司