自己实现一个each迭代器

Posted 2020-10-14 三十亿少女的梦

什么是迭代器？

　　其实就是对一个对象内部进行遍历的方法，比如jquery的each方法，或者原生js的foreach方法。

 

迭代器的特点

　　针对迭代器，这里有几个特点：

　　 ☑ 访问一个聚合对象的内容而无需暴露它的内部。

　　 ☑ 为遍历不同的集合结构提供一个统一的接口，从而支持同样的算法在不同的集合结构上进行操作。

　　 ☑ 遍历的同时更改迭代器所在的集合结构可能会导致问题。

　　 简单的说：封装实现，然后迭代器的聚合对象不用关心迭代的过程，从而符合SRP原则。

        ps：SRP单一职责原则（Single Responsibility Principle）：就一个类而言，应该仅有一个引起它变化的原因。（说实话我也没看懂是什么东西哈哈哈哈）

 

首先实现一个简单的each方法，代码如下

 function  each(obj, callback) {
     var i = 0,
         length = obj.length
     for(i; i < length; i++) {
         callback(obj[i], i);
     }
 }
 var a = [2, 3, 1, 5];

 each(a, function (value, index) {
     console.log("第" + index + "的值为:"+ value);
 })

 

结果如下图：

 

 

 

可见，基本遍历的功能已经实现，下面进行一下优化，使之支持参数传递，改进代码如下：

 

 function  each(obj, callback, arg) {
     var i = 0,
         length = obj.length;
     for(i; i < length; i++) {
         callback.call(window, obj[i], i, arg);
     }
 }

 var a = [2, 3, 1, 5];
 var b = "我是传入的参数";
 
 each(a, function (value, index, b) {
     console.log("第" + index + "的值为:"+ value);
     console.log(b);
 }, b);

 

执行结果如下：

 

 

 

还有最后一步改进，就是可以通过判断回调返回的是不是false来提前终止循环，从而节省性能，改进代码如下：

 

 function  each(obj, callback, arg) {
     var i = 0,
         value,
         length = obj.length;
     for(i; i < length; i++) {
       value = callback.call(window, obj[i], i, arg);
         if(value === false) {
             break;
         }
     }
 }
 var a = [2, 3, 1, 5];
 var b = "我是传入的参数";

 each(a, function (value, index, b) {
     console.log("第" + index + "的值为:"+ value);
     console.log(b);
     if(index = 3) {
         return false;
     }
 }, b);

 

执行结果如下：

 

 

至此，一个简单的迭代器就完成啦！