高级前端必会设计模式之迭代器模式

前端JavaScript设计模式-迭代器模式：

迭代器模式是通过一种方法兼容多种格式的有序数据集合的方式进行循环运算

// Iterator是一个统一的遍历接口来遍历所有数据类型
// 例如Array、Map Set、String、TypedArray、arguments、NodeList
class Iterator{
  constructor(container){
    this.list = container.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)
  }
}

var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
let container = new Container(arr)
let iterator = container.getIterator()
while(iterator.hasNext()){
  console.log(iterator.next())
}

// 实用案例
// 在页面中写入3个p标签<p>1</p><p>2</p><p>3</p>
// 循环方法
function each(data){
  // ES6 for of语法 简化以上操作,推荐这种方法做循环(data必须是带有遍历器特性的对象)
  for(let item of data){
    console.log(item)
  }
}

let arr = [1,2,3,4]
let nodeList = document.getElementByTagName('p')
let m = new Map()
m.set('a',100)
m.set('b',100)

// 针对三种不同类型的数组进入到each方法中进行循环运算
each(arr)
console.log('==============')
each(nodeList)
console.log('==============')
each(m)

Tags：前端设计模式

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。