迭代器模式

顺序访问一个集合

使用者无需知道集合内部结构（封装）

jQuery 示例

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Document</title>

  </head>

  <body>

    <p>jquery each</p>

    <p>jquery each</p>

    <p>jquery each</p>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>

      var arr = [1, 2, 3];

      var nodeList = document.getElementsByTagName("p");

      var $p = $("p");

      // 要对这三个变量进行遍历，需要写三个遍历方法

      // 第一

      arr.forEach(function(item) {

        console.log(item);

      });

      // 第二

      var i,

        length = nodeList.length;

      for (i = 0; i < length; i++) {

        console.log(nodeList[i]);

      }

      // 第三

      $p.each(function(key, p) {

        console.log(key, p);

      });

      // 如何能写出一个方法来遍历这三个对象呢

      function each(data) {

        var $data = $(data);

        $data.each(function(key, p) {

          console.log(key, p);

        });

      }

      each(arr);

      each(nodeList);

      each($p);

    </script>

  </body>

</html>

传统 UML 类图

javascript 中的 UML 类图

class Iterator {

  constructor(conatiner) {

    this.list = conatiner.list;

    this.index = 0;

  }

  next() {

    if (this.hasNext()) {

      return this.list[this.index++];

    }

    return null;

  }

  hasNext() {

    if (this.index >= this.list.length) {

      return false;

    }

    return true;

  }

}

class Container {

  constructor(list) {

    this.list = list;

  }

  getIterator() {

    return new Iterator(this);

  }

}

// 测试代码

let container = new Container([1, 2, 3, 4, 5]);

let iterator = container.getIterator();

while (iterator.hasNext()) {

  console.log(iterator.next());

}

使用场景

jQuery each

上面的 jQuery 代码就是

ES6 Iterator

ES6 Iterator 为何存在？

  • es6 语法中，有序集合的数据类型已经有很多了
  • Array Map Set String TypedArray argument Nodelist
  • 需要有一个统一的遍历接口来遍历所有的数据类型
  • （注意，object 不是有序集合，可以用 Map 代替）

es6 Interator 是什么？

  • 以上数据类型，都有[Symbol.iterator]属性
  • 属性值是函数，执行函数返回一个迭代器
  • 这个迭代器就有 next 方法可以顺序迭代子元素
  • 可运行 Array.prototype[Symbol.iterator]来测试

示例

let arr = [1, 2, 3, 4]

let nodeList = document.getElementsByTagName('p')

let m = new Map()

m.set('a', 100)

m.set('b', 200)

function each(data) {

    // 生成遍历器

    let iterator = data[Symbol.iterator]()

    console.log(iterator.next())  // 有数据时返回 {value: 1, done: false}

    console.log(iterator.next())

    console.log(iterator.next())

    console.log(iterator.next())

    console.log(iterator.next())  // 没有数据时返回 {value: undefined, done: true}

each(arr)

each(nodeList)

each(m)

上面代码改进

let arr = [1, 2, 3, 4];

let nodeList = document.getElementsByTagName("p");

let m = new Map();

m.set("a", 100);

m.set("b", 200);

function each(data) {

  // 生成遍历器

  let iterator = data[Symbol.iterator]();

  let item = { done: false };

  while (!item.done) {

    item = iterator.next();

    if (!item.done) {

      console.log(item.value);

    }

  }

}

each(arr);

each(nodeList);

each(m);

es6 很聪明提供了for of

let arr = [1, 2, 3, 4];

let nodeList = document.getElementsByTagName("p");

let m = new Map();

m.set("a", 100);

m.set("b", 200);

function each(data) {

  for (let item of data) {

    console.log(item);

  }

}

each(arr);

each(nodeList);

each(m);

ES6 Interator 与 Generator

  • Interator 的价值不限于上述几个类型的遍历
  • 还有 Generator 函数的使用
  • 即只要返回的数据符合 Interator 接口的要求

function* helloWorldGenerator() {

  yield "hello";

  yield "world";

  return "ending";

}

var hw = helloWorldGenerator();

console.log(hw.next());

console.log(hw.next());

console.log(hw.next());

console.log(hw.next());

//输出

// { value: 'hello', done: false }

// { value: 'world', done: false }

// { value: 'ending', done: true }

// { value: undefined, done: true }


function* foo() {

  yield 1;

  yield 2;

  yield 3;

  yield 4;

  yield 5;

  return 6;

}

for (let v of foo()) {

  console.log(v);

}

设计原则验证

  • 迭代器对象和目标对象分离
  • 迭代器将使用者与目标者对象隔离开
  • 符合开放封闭原则

JavaScript-迭代器模式的更多相关文章

  1. javascript设计模式与开发实践阅读笔记（7）——迭代器模式

    迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  2. Javascript设计模式之我见：迭代器模式

    大家好!本文介绍迭代器模式及其在Javascript中的应用. 模式介绍 定义 提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示. 类图及说明 Iterator抽象迭代器 抽象迭代器负 ...

  3. JavaScript设计模式 - 迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  4. 再起航，我的学习笔记之JavaScript设计模式25(迭代器模式)

    迭代器模式 概念介绍 迭代器模式(Iterator): 在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素. 迭代器 程序中的循环是一种利器,循环语句也使我们程序开发更简洁高效,但是有时一遍 ...

  5. javascript设计模式——迭代器模式

    前面的话 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示.迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也 ...

  6. 深入理解JavaScript系列（35）：设计模式之迭代器模式

    介绍 迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示. 迭代器的几个特点是: 1.访问一个聚合对象的内容而无需暴露它的内部表示. 2.为遍历不同的集合 ...

  7. 《JavaScript设计模式与开发实践》-- 迭代器模式

    详情个人博客:https://shengchangwei.github.io/js-shejimoshi-diedaiqi/ 迭代器模式 1.定义 迭代器模式: 是指提供一种方法顺序访问一个聚合对象中 ...

  8. javascript设计模式学习之七——迭代器模式

    一.迭代器模式定义 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,并且不需要暴露该对象的内部表示. 在当前大部分语言中,都已经内置了迭代器模式.迭代器有内部迭代器和外部迭代器之分,一般现有语 ...

  9. javascript设计模式-迭代器模式(Iterator)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 《Javascript设计模式与开发实践》关于设计模式典型代码的整理：单例模式、策略模式、代理模式、迭代器模式、发布-订阅模式、命令模式、组合模式

    1.单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 使用闭包封装私有变量// 使用闭包创建单例var user = (function () { var _name = 'sven' ...

随机推荐

  1. python函数和lambda表达式学习笔记

    1. python函数 不同于其他语言,python支持函数返回多个值 为函数提供说明文档:help(函数名)或者函数名.__doc__ def str_max(str1, str2): ''' 比较 ...

  2. [洛谷P1606] [USACO07FEB] 荷叶塘Lilypad Pond

    Description 为了让奶牛们娱乐和锻炼,农夫约翰建造了一个美丽的池塘.这个长方形的池子被分成了M行N列个方格(1≤M,N≤30).一些格子是坚固得令人惊讶的莲花,还有一些格子是岩石,其余的只是 ...

  3. [bzoj1875] [洛谷P2151] [SDOI2009] HH去散步

    Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但 是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又 ...

  4. 趣学CCNA 路由与交换

    第1章 OSI和TCP/IP 11.1 协议与协议分层 31.2 OSI参考模型 61.2.1 物理层 91.2.2 数据链路层 91.2.3 网络层 101.2.4 传输层 101.2.5 会话层 ...

  5. 安装 Xen

    安装 Xen 安装支持 Xen 的相关工具: $ sudo apt-get install ubuntu-xen-server 下载和安装支持 Xen 的 Linux 内核: http://secur ...

  6. c#数字图像处理（九）图像镜像

    private void mirror_Click(object sender, EventArgs e) { if (curBitmap!=null) { mirror mirForm = new ...

  7. CGI fastCgi php-fpm PHP-CGI 辨析

    CGI fastCgi php-fpm PHP-CGI 辨析 LNMP环境中的nginx是不支持php的,需要通过fastcgi插件来处理有关php的请求.而php需要php-fpm这个组件提供该功能 ...

  8. 《即时消息技术剖析与实战》学习笔记10——IM系统如何应对高并发

    一.IM 系统的高并发场景 IM 系统中,高并发多见于直播互动场景.比如直播间,在直播过程中,观众会给主播打赏.送礼.发送弹幕等,尤其是明星直播间,几十万.上百万人的规模一点也不稀奇.近期随着武汉新型 ...

  9. Fst指数说明

    群体遗传学--Fst指数,即群体间分化指数,用于群体间分化分析. 群体遗传学中衡量群体间分化程度的指标有很多种,最常用的就是Fst指数.Fst指数,由F统计量演变而来.F统计量(FIS,FIT,FST ...

  10. C++ 类模板详解(一)：概念和基本使用方式

    与函数模板类似地(C++函数模板详解(一):概念和特性) ,类也可以被一种或多种类型参数化.例如,容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,我们就可以实 ...