Trung BìnhDesign Patterns iconDesign Patterns

Iterator pattern là gì? JavaScript Iterator Protocol hoạt động ra sao?

Iterator cung cấp cách access tuần tự các elements của collection mà không expose underlying representation.

  • JavaScript triển khai Iterator Protocol tự nhiên: object là iterator nếu có next() method trả về { value, done }.

Ví dụ custom iterator:

typescript
class Range {
  constructor(private start: number, private end: number) {}

  [Symbol.iterator]() {
    let current = this.start
    const end = this.end
    return {
      next() {
        return current <= end
          ? { value: current++, done: false as const }
          : { value: undefined, done: true as const }
      }
    }
  }
}

// Dùng trong for...of, spread, destructuring:
const range = new Range(1, 5)
for (const n of range) console.log(n) // 1 2 3 4 5
console.log([...new Range(1, 3)]) // [1, 2, 3]

Generator functions (function*) là sugar syntax tạo iterator/iterable.

  • Dùng khi: cần traverse collection mà không expose structure; khi muốn lazy evaluation (generate values on demand — tiết kiệm memory cho large datasets).
  • Trong React, Suspense và streaming server rendering dùng iterator concept.

Xem toàn bộ Design Patterns cùng filter theo level & chủ đề con.

Mở danh sách Design Patterns