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
}
相关推荐
heartmoonq5 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信5 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾5 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter5 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man9 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia15 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李16 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风17 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录18 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia18 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js