JavaScript迭代器模式：从内置方法到自定义实现

作者：代码拾荒时间：2026-10-29 20:39:02浏览：607

本文详解JavaScript中的迭代器模式，对比jQuery.each与原生Array.prototype.forEach的参数差异。深入剖析内部迭代器与外部迭代器的实现原理及终止机制，并通过文件上传组件的兼容处理案例，展示迭代器在解决实际问题中的应用。

迭代器模式的核心在于提供一种统一的接口，用于按顺序访问聚合对象中的各个元素，同时隐藏对象内部的表示细节，使访问者无需了解内部结构即可遍历数据。

JavaScript内置迭代方法

在JavaScript中，[[t1]]是处理数组遍历的常用内置方法，它提供了简洁的遍历语法。

首先观察jQuery库中提供的迭代器实现，[[a0]]展示了如何使用$.each遍历数组元素并输出当前下标与值。


$.each([1, 2, 3], function(i, n) {
  console.log("当前下标为："+ i + " 当前元素为："+ n );
});

jQuery与自定义迭代器实现

接下来尝试手动实现一个通用的迭代器函数，[[a1]]定义了一个each函数，接收数组和回调函数作为参数，通过循环调用回调函数来处理每个元素。


var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    callback.call(ary[i], i, ary[i]);
  }  
};
each([1, 2, 3], function(i, n) {
  console.log("当前下标为："+ i + " 当前元素为："+ n );
});

需要特别注意，[[t4]]自定义实现的each函数与Array.prototype.forEach在参数顺序上存在显著差异：前者是(index, element)，后者是(element, index, array)。


[1, 2, 3].forEach(function(n, i, curAry){
  console.log("当前下标为："+ i + " 当前元素为："+ n + " 当前数组为：" + curAry);
})

内部与外部迭代器对比

迭代器根据控制权的归属可分为内部迭代器和外部迭代器两类，[[t6]]分别阐述了它们的定义与区别。

（1）内部迭代器：已定义迭代规则，完全接管迭代过程，外部仅需一次初始调用。前述自定义 each 即为内部迭代器！（2）外部迭代器：需显式请求迭代下一个元素。示例：判断两个数组是否相等

通过[[a3]]中的内部迭代器示例，可以看到compareAry函数利用each遍历数组1，并在回调中比较元素是否相等，若不等则抛出错误，否则打印相等。


// 内部迭代器
var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    callback.call(ary[i], i, ary[i]);
  }  
};
// 比较函数
var compareAry = function(ary1, ary2) {
  if(ary1.length != ary2.length) {
    throw new Error("不相等"); // return console.log("不相等"); 
  }
  // 且住
  each(ary1, function(i, n) {
    if(n !== ary2[i]) {
      // return console.log("不相等"); 
      // return 只能返回到each方法外，后续console.log("相等")会继续执行，所以这里得使用throw
      throw new Error("不相等");
    }
  });
  console.log("相等");
}

compareAry([1, 2, 3], [1, 2, 4]);

[[a4]]展示了外部迭代器的实现方式，Iterator构造函数返回包含next、isDone和getCurrentItem方法的对象，compareAry函数通过循环调用next和isDone来逐个比较两个迭代器对应的元素。


// 外部迭代器
var Iterator = function(obj) {
  var current = 0,
    next = function() {
      current++;
    },
    isDone = function() {
      return current >= obj.length;  
    },
    getCurrentItem = function() {
      return obj[current];
    };
  return {
    next: next,
    isDone: isDone,
    getCurrentItem: getCurrentItem
  };
};
// 比较函数
var compareAry = function(iterator1, iterator2) {
  while( !iterator1.isDone() && !iterator2.isDone() ){
    if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
      throw new Error("不相等");
    }
    iterator1.next();
    iterator2.next();
  }
  console.log("相等");
}

compareAry(new Iterator([1, 2, 3]), new Iterator([1, 2, 4]));

为了支持提前终止遍历，迭代器需要支持终止机制，[[a5]]展示了如何在each函数中检查回调函数的返回值，若返回false则使用break跳出循环。


var each = function(ary, callback) {
  for(var i = 0, l = ary.length; i < l; i++) {
    if(callback.call(ary[i], i, ary[i]) === false) {
      break;
    }
  }
}

each([1, 2, 4, 1], function(i, n) {
  if(n > 3) {
    return false;
  }
  console.log(n);
});

迭代器模式的实际应用

迭代器模式在实际开发中有广泛的应用场景，[[t11]]列举了文件上传组件的兼容处理案例。

在文件上传场景中，[[a6]]展示了iteratorUploadObj函数，它依次尝试调用getActiveUploadObj、getFlashUploadObj和getFormUploadObj等函数，一旦获取到非false的上传对象即返回，从而实现不同浏览器的兼容处理，这与责任链模式有异曲同工之妙。


var iteratorUploadObj = function() {
  for(var i = 0, fn; fn = arguments[i]; i++) {
    var uploadObj = fn();
    if(uploadObj !== false) {
      return uploadObj;
    }
  }
};

var uploadObj = iteratorUploadObj(getActiveUploadObj, getFlashUploadObj, getFormUploadObj);

function getActiveUploadObj() {
  try{
    return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE上传控件
  }catch(e) {
    return false;
  }
}

function getFlashUploadObj() {
  if(supportFlash().f === 1) {
    var str = '<object type="application/x-shockwave-flash"></object>';
    return $(str).appendTo($("body"));
  }
  return false;
}

function getFormUploadObj() {
  var str = '<input name="file" type="file" class="ui-file" />';
  return $(str).appendTo($("body"));
}

// 是否支持flash
function supportFlash() {
  var hasFlash = 0; //是否安装了flash
  var flashVersion = 0; //flash版本
  if (document.all) {
    var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
    if (swf) {
      hasFlash = 1;
      VSwf = swf.GetVariable("$version");
      flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
    }
  } else {
    if (navigator.plugins && navigator.plugins.length > 0) {
    var swf = navigator.plugins["Shockwave Flash"];
      if (swf) {
        hasFlash = 1;
        var words = swf.description.split(" ");
        for (var i = 0; i < words.length; ++i) {
          if (isNaN(parseInt(words[i]))) continue;
          flashVersion = parseInt(words[i]);
        }
      }
    }
  }
  return { f: hasFlash, v: flashVersion };
}

希望本文对上述JavaScript程序设计内容的阐述，能帮助大家更好地理解和应用迭代器模式。

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00