资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS迭代器模式《JavaScript设计模式与开发实践》阅读笔记

JS迭代器模式《JavaScript设计模式与开发实践》阅读笔记

djfml / 2104人阅读

摘要：但实际中，内部迭代器和外部迭代器两者并无优劣。迭代器并不只迭代数组迭代器模式不仅能迭代数组，还可以迭代一些类数组对象。晚安了，参考设计模式与开发实践曾探本文作者本文链接迭代器模式设计模式与开发实践阅读笔记

迭代器模式：一个相对简单的模式，目前绝大多数语言都内置了迭代器，以至于大家都不觉得这是一种设计模式

迭代器模式 
</>复制代码 
  1. 迭代器模式指提供一种方法访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示

个人理解成遍历聚合对象中的各个（某些）元素，并执行一个回调方法，如今大多数语言都已经内置了迭代器，但这里记录一下，理解其中的实现目的。

jQuery 中的$.each 
</>复制代码 
  1. $.each([1,2,3,4,5], function(i, el) {
  2.     console.log("index: ",i)
  3.     console.log("item: ", el)
  4. })

如何自定义一个each函数，实现以上的效果呢？

</>复制代码 
  1. var each = function (arr, callback) {
  2.     for (var i = 0, len = arr.length; i
  3. 这里实现了一个较为简单的内部迭代器方法，然而迭代器同时还有一种类似——外部迭代器
  4. 内部迭代器和外部迭代器
  5. 内部迭代器
  6. 如刚刚自定义个each方法，这种迭代器在内部已经定义好了迭代规则，如，迭代的方向，迭代是否在满足条件是中止。
  7. 内部迭代器在调用时非常方便，外界不用去关心其内部的实现。在每一次调用时，迭代器的规则就已经制定，如果遇到一些不同样的迭代规则，此时的内部迭代器并不很优雅
  8. like this:
  9. </>复制代码 
    1. // 当需要同时迭代两个数组时
    2. var compare = function(ary1, ary2) {
    3.     if (ary1.length !== ary2.length) {
    4.         throw new Error ("ary1 和 ary2 不相等")
    5.     }
    6.     
    7.     each(ary1, function(i, n){
    8.         if (n !== ary2[i]) {
    9.             throw new Error ("ary1 和 ary2 不相等")
    10.         }
    11.     })
    12.     alert ("ary1, ary2相等")
    13. }
    14. compare([1,2,3,4], [2,3,4,5,6])
  10. 但如果用外部迭代器来实现一个这样的需求时，就显得更加清晰易懂
  11. 外部迭代器
  12. 外部迭代器必须显示地请求迭代下一个元素（ltertor.next()）
  13. 外部迭代器虽然增加了调用的复杂度，但增强了迭代器的灵活性，我们可以手工控制迭代过程或者顺序。Generators 应该就是一种外部迭代器的实现。那么接下来看看如何自己实现一个外部迭代器：
  14. </>复制代码 
    1. var Iterator = function(obj) {
    2.     var current = 0
    3.     var next = function() {
    4.         current += 1
    5.     }
    6.     var isDone = function() {
    7.         return current >= obj.lenght
    8.     }
    9.     var getCurrent = function() {
    10.         return obj[current]
    11.     }
    12.     return {
    13.         next: next,
    14.         length: obj.length,
    15.         isDone:isDone,
    16.         getCurrent:getCurrent
    17.     }
    18. }
  15. 通过这个迭代器，我们就可以更加优雅的实现刚刚的compare方法来迭代两个数组了：
  16. </>复制代码 
    1. var compare = function(iteraotr1, iteraotr2) {
    2.     if (iteraotr1.length !== iteraotr2.length) {
    3.         alert("不相等")
    4.     }
    5.     //外部设定条件来决定迭代器的进行
    6.     while (!iteraotr1.isDone() && !iteraotr2.isDone()) {
    7.         if (iteraotr1.getCurrent() !== iteraotr2.getCurrent()) {
    8.             alert("不相等")
    9.         }
    10.         iteraotr1.next()
    11.         iteraotr2.next()
    12.     }
    13.     alert("相等")
    14. }
    15. var iteraotr1 = Iterator([1,2,3])
    16. var iteraotr2 = Iterator([1,2,3])
    17. compare(iteraotr1,iteraotr2) // 相等
  17. 通过外部迭代器，较为优雅的实现了这个同时迭代两个数组的需求。但实际中，内部迭代器和外部迭代器两者并无优劣。具体使用何种，需更具实际情况来决定。
  18. 迭代器并不只迭代数组
  19. 迭代器模式不仅能迭代数组，还可以迭代一些类数组对象。比如arguments，{a:1,n:2,c:3}等。其须具备的就是对象拥有一个length属性可以访问，并能通过下标来访问对象中的各个元素。
  20. 其中for ... of 可以来循环数组，对象字面量则可以通过for ... in来访问其中的各个属性的值来达到目的。
  21. 迭代器可以中止
  22. 在for循环中，我们可以通过break来跳出循环，所以在迭代器模式中。我们可以利用这个来提前终止迭代。接下来我们改在一下最开始的each函数
  23. </>复制代码 
    1. var each = function(arr, callback) {
    2.     var result
    3.     for (var i = 0, len = arr.length; i < len; i++) {
    4.         result = callback.call(arr[i], i, arr[i])
    5.         if (result === false) {
    6.             break
    7.         }
    8.     }
    9. }
    10. each([1,2,3,4,5,6,7], function(i, el) {
    11.     if (el > 3) {
    12.         return false
    13.     }
    14.     console.log(el)
    15. })
  24. 最后
  25. 迭代器模式的实现原理较为简单，JavaScript中有更多针对不同需求的迭代器实现。我们也可以自己定义一个适合的规则来处理数组，类数组这样的对象。但往往最常见的也是最容易被忽视的，而一个常见的东西往往是更好用更受用的。
  26. 晚安了，skr skr skr
  27. 参考
  28. 《JavaScript设计模式与开发实践》—— 曾探
  29. </>复制代码 
    1. 本文作者： Roy Luo
      本文链接： JS迭代器模式《JavaScript设计模式与开发实践》阅读笔记
               
  30.                
  31.                                            
  32.                        
  33.
云服务器 GPU云服务器 迭代器模式 设计模式学习笔记 head-first设计模式笔记 javascript基础与实践教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96627.html

相关文章

  • JavaScript中常用的设计模式

    摘要：本文已同步到中常见的设计模式如果感觉写的还可以，就给个小星星吧，欢迎和收藏。本文中关于各种设计模式定义都是引用书中的，部分引用自百度百科已标出。下面把我整理出的常用设计模式按类型做个表格整理。 本文已同步到Github JavaScript中常见的设计模式,如果感觉写的还可以，就给个小星星吧，欢迎star和收藏。 最近拜读了曾探大神的《JavaScript设计模式与开发实践》，真是醍醐...

    NSFish 评论0 收藏0

  • 【译】前端练级攻略

    摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。 译者：前端小智 原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0

  • JS策略模式《JavaScript设计模式与开发实践》阅读笔记

    摘要：策略模式可以避免代码中的多重判断条件。策略模式在程序中或多或少的增加了策略类。此文仅记录本人阅读设计模式与开发实践这个本时的感受，感谢作者曾探写出这么好的一本书。设计模式中很重要的一点就是将不变和变分离出来。参考设计模式与开发实践曾探 策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且是它们可以相互替换。 策略模式可以避免代码中的多重判断条件。 策略模式很好的体现了开放-...

    Amos 评论0 收藏0

  • js设计模式--迭代器模式

    摘要：文章系列设计模式单例模式设计模式策略模式设计模式代理模式概念迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。 前言 本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。 文章系列 js设计模式--单例模式 js设计模式--策略模式 js设计模式--代理模式 概念 迭代器模式是指...

    binta 评论0 收藏0

  • JS代理模式《JavaScript设计模式与开发实践》阅读笔记

    摘要：保护代理和虚拟代理保护代理当有许多需求要向某对象发出一些请求时，可以设置保护代理，通过一些条件判断对请求进行过滤。虚拟代理在程序中可以能有一些代价昂贵的操作。而虚拟代理是最常用的一种代理模式。 代理模式 代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。 保护代理和虚拟代理 保护代理：当有许多需求要向某对象发出一些请求时，可以设置保护代理，通过一些条件判断对请求进行过滤。...

    mist14 评论0 收藏0

发表评论

登陆后可评论

0条评论

djfml

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<