JS 迭代器（Iterator）|极客笔记

JS 迭代器（Iterator）

迭代器（Iterator）是 JavaScript 中的一个重要概念，用于提供一种遍历数据结构的方法。在旧版本的 JavaScript 中，遍历数组或对象是比较复杂的，需要使用for循环或forEach等方法。而通过引入迭代器，可以更加简洁和灵活地进行迭代操作。

本文将详细介绍迭代器的概念、创建迭代器的方法以及如何使用迭代器进行数据遍历。

什么是迭代器？

迭代器是一个对象，实现了next()方法，用于按顺序访问集合中的元素。每次调用next()方法，迭代器返回一个包含value和done两个属性的对象。

value：表示集合中的当前元素的值。
done：表示迭代器是否已经迭代完毕，如果迭代已经结束，返回true；否则返回false。

创建迭代器

在 JavaScript 中，可以通过两种方式来创建迭代器：生成器函数和可迭代对象。

生成器函数（Generator Function）

生成器函数是一种特殊类型的函数，可以通过function*语法创建。生成器函数使用yield关键字来定义暂停点，每次调用生成器函数时，都会返回一个带有对应yield语句的迭代器对象。

以下是一个简单的生成器函数的示例：

function* generatorFunc() {
  yield 'apple';
  yield 'banana';
  yield 'orange';
}

const generator = generatorFunc();

console.log(generator.next()); // { value: 'apple', done: false }
console.log(generator.next()); // { value: 'banana', done: false }
console.log(generator.next()); // { value: 'orange', done: false }
console.log(generator.next()); // { value: undefined, done: true }

在上述代码中，generatorFunc是一个生成器函数，通过yield关键字定义了三个暂停点。调用生成器函数返回的是一个迭代器对象，并且每次调用next()方法时，都会在对应的yield语句处暂停执行，并返回一个包含value和done属性的对象。

可迭代对象（Iterable）

可迭代对象是指实现了Symbol.iterator方法的对象。Symbol.iterator方法返回一个迭代器对象，用于遍历该对象中的元素。可以使用for...of循环或者...扩展运算符遍历可迭代对象。

以下是一个自定义可迭代对象的示例：

const iterableObj = {
  items: ['apple', 'banana', 'orange'],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (let item of iterableObj) {
  console.log(item);
}
// Output:
// apple
// banana
// orange

在上述代码中，iterableObj是一个自定义的可迭代对象，它实现了Symbol.iterator方法来定义迭代逻辑。Symbol.iterator方法返回一个包含next()方法的对象，用于按顺序返回集合中的元素。

使用迭代器

生成器函数和可迭代对象创建的迭代器可以被用于遍历数据结构，例如数组、集合和字符串等。以下是一些常见的使用迭代器的案例。

遍历数组

可以使用生成器函数或可迭代对象来遍历数组。

const fruits = ['apple', 'banana', 'orange'];

// 使用生成器函数
function* generatorFunc() {
  for (let fruit of fruits) {
    yield fruit;
  }
}

const generator = generatorFunc();
console.log(generator.next()); // { value: 'apple', done: false }
console.log(generator.next()); // { value: 'banana', done: false }
console.log(generator.next()); // { value: 'orange', done: false }
console.log(generator.next()); // { value: undefined, done: true }

// 使用可迭代对象
const iterableObj = {
  items: fruits,
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.items.length) {
          return { value: this.items[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (let fruit of iterableObj) {
  console.log(fruit);
}
// Output:
// apple
// banana
// orange

遍历集合

可以使用生成器函数或可迭代对象来遍历集合。

const set = new Set(['apple', 'banana', 'orange']);

// 使用生成器函数
function* generatorFunc() {
  for (let item of set) {
    yield item;
  }
}

const generator = generatorFunc();
console.log(generator.next()); // { value: 'apple', done: false }
console.log(generator.next()); // { value: 'banana', done: false }
console.log(generator.next()); // { value: 'orange', done: false }
console.log(generator.next()); // { value: undefined, done: true }

// 使用可迭代对象
const iterableObj = {
  items: set,
  [Symbol.iterator]() {
    let iterator = this.items.values();
    return {
      next: () => iterator.next()
    };
  }
};

for (let item of iterableObj) {
  console.log(item);
}
// Output:
// apple
// banana
// orange

遍历字符串

可以使用生成器函数或可迭代对象来遍历字符串。

const str = 'Hello';

// 使用生成器函数
function* generatorFunc() {
  for (let char of str) {
    yield char;
  }
}

const generator = generatorFunc();
console.log(generator.next()); // { value: 'H', done: false }
console.log(generator.next()); // { value: 'e', done: false }
console.log(generator.next()); // { value: 'l', done: false }
console.log(generator.next()); // { value: 'l', done: false }
console.log(generator.next()); // { value: 'o', done: false }
console.log(generator.next()); // { value: undefined, done: true }

// 使用可迭代对象
const iterableObj = {
  string: str,
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.string.length) {
          return { value: this.string.charAt(index++), done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (let char of iterableObj) {
  console.log(char);
}
// Output:
// H
// e
// l
// l
// o

结语

通过迭代器的概念，在 JavaScript 中可以更加方便地遍历各种数据结构。无论是使用生成器函数还是可迭代对象，都可以用来创建迭代器，并通过调用next()方法来按顺序访问集合中的元素。这种遍历方法既简洁又灵活，大大提高了对数据结构的操作性和可读性。

迭代器不仅可以用于遍历数组、集合和字符串等常见的数据结构，还可以用于遍历自定义的对象。通过实现Symbol.iterator方法和next()方法，可以为任何对象添加可迭代的能力。

以下是一个自定义对象的示例：

const person = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming', 'hiking'],
  [Symbol.iterator]() {
    let index = 0;
    const keys = Object.keys(this);
    return {
      next: () => {
        if (index < keys.length) {
          const key = keys[index++];
          return { value: this[key], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (let property of person) {
  console.log(property);
}
// Output:
// John
// 30
// [ 'reading', 'gaming', 'hiking' ]

在上述代码中，person对象实现了Symbol.iterator方法，返回一个迭代器对象。迭代器对象按顺序返回了对象的各个属性值。

迭代器还具有可选的return()和throw()方法，用于手动结束迭代或抛出异常。这些方法可以在迭代过程中做一些额外的操作。

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

const generator = generatorFunc();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.return('Finished')); // { value: 'Finished', done: true }

console.log(generator.next()); // { value: undefined, done: true }

在上述代码中，通过调用迭代器的return()方法，可以手动结束迭代并返回指定的值。

总结而言，迭代器是 JavaScript 中一种用于遍历数据结构的方法。它通过使用生成器函数或可迭代对象来创建迭代器对象，并通过调用next()方法来按顺序访问集合中的元素。迭代器可以大大简化数据遍历的过程，提高代码的可读性和可维护性。