JavaScript迭代器

JavaScript迭代器

迭代器（Iterator）是JavaScript中用于遍历数据集合的一种机制，它提供了一种标准的方式来逐个访问集合中的元素。迭代器是ES6（ECMAScript 2015）引入的重要特性，用于简化循环和数据处理操作。

基本概念

迭代器是一个对象，它遵循迭代器协议，即必须实现一个`next()`方法。该方法返回一个包含`value`和`done`属性的对象：

• `value`：当前迭代的值。
• `done`：布尔值，表示迭代是否完成（`true`表示迭代结束）。

迭代器使得任何数据结构都可以被遍历，只要它实现了`Symbol.iterator`方法。

迭代器协议

一个对象要成为迭代器，必须满足以下条件：

• 包含`next()`方法。
• `next()`方法返回`{ value: any, done: boolean }`。

示例：

const myIterator = {
  data: [1, 2, 3],
  index: 0,
  next() {
    if (this.index < this.data.length) {
      return { value: this.data[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
};

console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { value: undefined, done: true }

可迭代对象

如果一个对象实现了`Symbol.iterator`方法，并且该方法返回一个迭代器，则该对象称为可迭代对象。JavaScript中的数组、字符串、Map、Set等都是可迭代对象。

示例：

const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

迭代器的实际应用

迭代器广泛应用于JavaScript的现代特性中，例如：

• `for...of`循环
• 展开运算符（`...`）
• 解构赋值
• `Array.from()`

`for...of`循环

const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
  console.log(fruit);
}
// 输出：
// apple
// banana
// orange

展开运算符

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // [1, 2, 3, 4, 5]

自定义迭代器

可以为自定义对象实现迭代器，使其支持`for...of`循环。

示例：

const myCollection = {
  items: ['a', 'b', 'c'],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (const item of myCollection) {
  console.log(item);
}
// 输出：
// a
// b
// c

生成器与迭代器

生成器（Generator）是ES6引入的一种特殊函数，它可以简化迭代器的创建。生成器函数使用`function*`声明，并通过`yield`返回值。

示例：

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

迭代器的优势

1. 统一访问方式：为不同数据结构提供一致的遍历接口。 2. 惰性求值：仅在需要时计算下一个值，节省内存。 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
// 可以无限调用...

迭代器与性能

迭代器采用惰性求值策略，仅在需要时生成值，因此适合处理大型数据集或无限序列。但频繁调用`next()`可能带来微小性能开销。

总结

JavaScript迭代器提供了一种标准化的数据遍历机制，是许多现代语言特性（如`for...of`、展开运算符）的基础。通过实现`Symbol.iterator`方法，任何对象都可以变为可迭代对象。生成器进一步简化了迭代器的创建过程。

掌握迭代器对于理解JavaScript的异步编程（如`async/await`）和函数式编程（如`Array`的高阶方法）至关重要。

graph LR A[可迭代对象] -->|实现| B[Symbol.iterator] B --> C[迭代器] C -->|包含| D[next方法] D --> E[返回 value/done]

迭代器是JavaScript现代编程中的重要概念，为数据处理提供了灵活且高效的解决方案。