JavaScript迭代器怎么自定义

发布时间：2021-12-23 09:39:32 作者：iii
来源：亿速云阅读：205

# JavaScript迭代器怎么自定义

## 什么是迭代器

在JavaScript中，**迭代器（Iterator）**是一种特殊的对象，它提供了一种标准的方式来遍历数据集合。迭代器必须实现`next()`方法，该方法返回一个包含`value`和`done`两个属性的对象：

```javascript
const iterator = {
  next() {
    return {
      value: 'some value', // 当前迭代的值
      done: false         // 是否迭代完成
    };
  }
};

为什么需要自定义迭代器

JavaScript内置的数据结构（如Array、Map、Set等）都实现了默认的迭代器行为。但在以下场景中，我们可能需要自定义迭代器：

为自定义数据结构提供遍历能力
控制迭代的顺序和逻辑
实现惰性计算或无限序列
封装复杂的遍历逻辑

如何实现自定义迭代器

1. 直接实现迭代器协议

最简单的自定义迭代器方式是直接创建一个满足迭代器协议的对象：

const countdown = {
  value: 3,
  next() {
    if (this.value >= 0) {
      return { value: this.value--, done: false };
    }
    return { value: undefined, done: true };
  }
};

// 使用迭代器
let result = countdown.next();
while (!result.done) {
  console.log(result.value); // 3, 2, 1, 0
  result = countdown.next();
}

2. 实现可迭代协议

更常见的做法是实现可迭代协议，即对象包含一个[Symbol.iterator]方法，该方法返回一个迭代器：

class Countdown {
  constructor(start) {
    this.start = start;
  }

  [Symbol.iterator]() {
    let value = this.start;
    return {
      next: () => {
        if (value >= 0) {
          return { value: value--, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
}

// 使用for...of循环
for (const num of new Countdown(3)) {
  console.log(num); // 3, 2, 1, 0
}

3. 使用生成器函数

ES6的生成器函数可以更简洁地实现迭代器：

function* countdownGenerator(start) {
  for (let i = start; i >= 0; i--) {
    yield i;
  }
}

const countdown = countdownGenerator(3);
for (const num of countdown) {
  console.log(num); // 3, 2, 1, 0
}

实际应用示例

1. 自定义范围迭代器

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end = end;
    this.step = step;
  }

  *[Symbol.iterator]() {
    for (let i = this.start; i <= this.end; i += this.step) {
      yield i;
    }
  }
}

for (const num of new Range(1, 10, 2)) {
  console.log(num); // 1, 3, 5, 7, 9
}

2. 树结构的深度优先遍历

class TreeNode {
  constructor(value, children = []) {
    this.value = value;
    this.children = children;
  }

  *[Symbol.iterator]() {
    yield this.value;
    for (const child of this.children) {
      yield* child; // 使用yield*委托给子节点的迭代器
    }
  }
}

const tree = new TreeNode(1, [
  new TreeNode(2, [
    new TreeNode(4),
    new TreeNode(5)
  ]),
  new TreeNode(3)
]);

for (const value of tree) {
  console.log(value); // 1, 2, 4, 5, 3
}

3. 无限序列

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
// 可以无限继续...

高级技巧

1. 迭代器组合

可以将多个迭代器组合起来：

function* chain(...iterables) {
  for (const iterable of iterables) {
    yield* iterable;
  }
}

const combined = chain([1, 2], new Set([3, 4]), '56');
for (const value of combined) {
  console.log(value); // 1, 2, 3, 4, '5', '6'
}

2. 迭代器工具函数

function* map(iterable, fn) {
  for (const value of iterable) {
    yield fn(value);
  }
}

function* filter(iterable, predicate) {
  for (const value of iterable) {
    if (predicate(value)) {
      yield value;
    }
  }
}

const numbers = [1, 2, 3, 4, 5];
const squaredEvens = filter(map(numbers, x => x * x), x => x % 2 === 0);
for (const num of squaredEvens) {
  console.log(num); // 4, 16
}

3. 异步迭代器

ES2018引入了异步迭代器，用于处理异步数据流：

async function* asyncSequence() {
  for (let i = 1; i <= 3; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

(async () => {
  for await (const value of asyncSequence()) {
    console.log(value); // 每秒输出1, 2, 3
  }
})();

注意事项

迭代器是一次性的：大多数迭代器遍历一次后就耗尽，需要重新创建才能再次遍历
性能考虑：对于大型数据集，迭代器比数组操作更节省内存
错误处理：迭代器内部可以抛出错误，需要在遍历时处理
与数组方法的区别：迭代器是惰性求值的，只在需要时才计算下一个值

总结

JavaScript的迭代器协议为自定义遍历逻辑提供了强大的灵活性。通过实现[Symbol.iterator]方法或使用生成器函数，我们可以：

为自定义数据结构提供标准的遍历接口
实现复杂的遍历算法
创建内存高效的惰性序列
组合多个迭代器实现复杂的数据处理管道

掌握自定义迭代器技巧可以显著提升代码的表达能力和性能，特别是在处理大型或复杂数据结构时。 “`