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
}
相关推荐
会豪1 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子1 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶1 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子1 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_2 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit2 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天2 小时前
ts中的函数重载
前端