web前端中迭代器模式的示例分析

這篇文章將為大家詳細講解有關web前端中迭代器模式的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

迭代器模式（Iterator Pattern）

如果你看到這，ES6中的迭代器 Iterator 相信你還是有點印象的，上面第60條已經做過簡單的介紹。迭代器模式簡單的說就是提供一種方法順序一個聚合對象中各個元素，而又不暴露該對象的內部表示。

迭代器模式解決了以下問題：

• 提供一致的遍歷各種數據結構的方式，而不用了解數據的內部結構

• 提供遍歷容器（集合）的能力而無需改變容器的接口

一個迭代器通常需要實現以下接口：

• hasNext()：判斷迭代是否結束，返回Boolean

• next()：查找并返回下一個元素

為Javascript的數組實現一個迭代器可以這么寫：

const item = [1, 'red', false, 3.14];function Iterator(items) {
  this.items = items;
  this.index = 0;}Iterator.prototype = {
  hasNext: function () {
    return this.index < this.items.length;
  },
  next: function () {
    return this.items[this.index++];
  }}

驗證一下迭代器是否工作：

const iterator = new Iterator(item);while(iterator.hasNext()){
  console.log(iterator.next());}
  /輸出：1, red, false, 3.14

ES6提供了更簡單的迭代循環語法 for…of，使用該語法的前提是操作對象需要實現 可迭代協議（The iterable protocol），簡單說就是該對象有個Key為 Symbol.iterator 的方法，該方法返回一個iterator對象。

比如我們實現一個 Range 類用于在某個數字區間進行迭代：

function Range(start, end) {
  return {
    [Symbol.iterator]: function () {
      return {
        next() {
          if (start < end) {
            return { value: start++, done: false };
          }
          return { done: true, value: end };
        }
      }
    }
  }}

驗證一下：

for (num of Range(1, 5)) {
  console.log(num);}// 輸出：1, 2, 3, 4

關于“web前端中迭代器模式的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。