首页 > 编程语言 >设计模式-javascript实现【迭代器模式】

设计模式-javascript实现【迭代器模式】

时间:2023-03-05 21:03:58浏览次数:45  
标签:const 迭代 ary javascript callback length each 设计模式

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

1. 内部迭代器

内部迭代器在调用的时候非常方便,外界不用关心迭代器的内部的实现,跟迭代器的交互也仅仅是一次初始
调用,但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定,某些场景就无法适用
了,Array.proptype.forEach 就是一个数组迭代器。

数组迭代器实现

const each = (ary, callback) => {
  for(let i = 0; i < ary.length; i++) {
    callback.call(ary[i], i, ary[i]);
  }
};

each([1, 2, 3 ], (i, n) => {
  console.log([i, n]);
});

2. 外部迭代器

外部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度,但相对也增强了迭代器的
灵活性,我们可以手工控制迭代的过程或者顺序。

外部迭代器的实现

const Iterator = (obj) => {
  let current = 0;
  const next = () => current += 1;
  const isDone = () => current >= obj.length;
  const getCurrItem = () => obj[current];
  const length = obj.length;
  return {
    next,
    isDone,
    getCurrItem,
    length
  };
};

3. 倒序迭代器

倒序迭代器实现

const reverseEach = (ary, callback) => {
  for (let i = ary.length-1; i >= 0; i--){
    callback(i, ary[i]);
  }
};
reverseEach([0,1,2],(i, n)=>{
  console.log(n);  // 2, 1, 0
});

4. 中止迭代器

迭代器可以像普通for循环中的break一样,提供一种跳出循环的方法,我们可以约定回调函数返回false
时,提前终止迭代。

中止迭代器实现

const each = (ary, callback) => {
  for(let i = 0; i < ary.length; i++) {
    if( callback( i, ary[i]) === false){
      break;
    }
  }
};

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

标签:const,迭代,ary,javascript,callback,length,each,设计模式
From: https://www.cnblogs.com/xiaodi-js/p/17181611.html

相关文章

  • Book-深入设计模式-适配器模式
    Book-深入设计模式-适配器模式https://refactoringguru.cn/design-patterns/adapter适配器模式亦称:封装器模式、Wrapper、Adapter适配器模式是一种结构型设计模式,它......
  • Book-深入设计模式-单例模式
    Book-深入设计模式-单例模式https://refactoringguru.cn/design-patterns/singleton单例模式亦称:单件模式、Singleton单例模式是一种创建型设计模式,让你能够保证一个......
  • Book-深入设计模式-原型模式
    Book-深入设计模式-原型模式https://refactoringguru.cn/design-patterns/prototype原型模式亦称:克隆、Clone、Prototype原型模式是一种创建型设计模式,使你能够复制......
  • Book-深入设计模式-生成器模式
    Book-深入设计模式-生成器模式https://refactoringguru.cn/design-patterns/builder生成器模式亦称:建造者模式、Builder生成器模式是一种创建型设计模式,使你能够分步......
  • Book-深入设计模式-抽象工厂模式
    Book-深入设计模式-抽象工厂模式https://refactoringguru.cn/design-patterns/abstract-factory抽象工厂模式亦称:AbstractFactory抽象工厂模式是一种创建型设计模式,......
  • Book-深入设计模式-工厂方法模式
    Book-深入设计模式-工厂方法模式https://refactoringguru.cn/design-patterns/factory-method工厂方法模式亦称:虚拟构造函数、VirtualConstructor、FactoryMethod工......
  • JavaScript 全选练习
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="t......
  • JavaScript dom查询的其他的方法
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> window.onload=function(){ //获取b......
  • JavaScript dom增删改
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <metahttp-equiv="Content-Type"content="text/html;......
  • JavaScript 表格中删除整行
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;ch......