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
}
相关推荐
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
小菜全6 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904276 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路6 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa6 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事6 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss6 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3