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
}
相关推荐
Tajang7 分钟前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多12 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
努力努力再努力wz38 分钟前
【C++进阶系列】:万字详解特殊类以及设计模式
java·linux·运维·开发语言·数据结构·c++·设计模式
bkspiderx41 分钟前
C++设计模式之行为型模式:策略模式(Strategy)
c++·设计模式·策略模式
龙仔CLL43 分钟前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李43 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview