JavaScript设计模式——迭代器模式

迭代器模式

迭代器模式,用于顺序地访问聚合对象内部的元素,友无需知道对象内部结构。

关于ES6的迭代器语法,请查看阮一峰大神的书籍:ES6的Iterator

手动实现一个 forEach,完成迭代功能

js 复制代码
const forEach = (arr, callback) => {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i], i, arr);
  }
}
forEach(['a', 'b', 'c'], (item, index, arr) => {
  console.log(item, index, arr);
})

了解迭代器语法

js 复制代码
function makeIterator(array) {
  let nextIndex = 0;
  return {
    next: function () {
      return nextIndex < array.length
        ? { value: array[nextIndex++], done: false }
        : { value: undefined, done: true };
    }
  };
}

const iterator = makeIterator([1, 2, 3]);

let item;
do {
  item = iterator.next();
  console.log(item.value);
} while (!item.done); // 1 2 3 undefined

ES6规定,一个数据结构只要具有Symbol.iterator属性,就可以认为是"可遍历的"。Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。

js 复制代码
class RangeIterator {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  [Symbol.iterator]() {
    return this;
  }

  next() {
    if (this.start <= this.end) {
      let value = this.start;
      this.start++;
      return { value, done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
}

function range(start, end) {
  return new RangeIterator(start, end);
}

for (const i of range(4,6)) {
  console.log(i);
}

也可以通过 Generator 函数,实现迭代器 Generator函数

js 复制代码
let myIterator = {
  start: 7,
  end: 9,
  [Symbol.iterator]: function* () {
    for (let i = this.start; i <= this.end; i++) {
      yield i;
    }
  }
}

for (const i of myIterator) {
  console.log(i); // 7 8 9
}
相关推荐
摘星编程2 小时前
深入解析迭代器模式:优雅地遍历聚合对象元素
设计模式·迭代器模式·软件开发·编程技巧·面向对象设计
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT6 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js