JavaScript迭代器知識點有哪些

JavaScript迭代器知識點有哪些

JavaScript中的迭代器（Iterator）是一種用于遍歷數據集合的接口。它提供了一種統一的方式來訪問集合中的元素，而不需要關心集合的內部結構。迭代器在JavaScript中廣泛應用于數組、字符串、Map、Set等數據結構中。本文將介紹JavaScript迭代器的核心知識點。

1. 迭代器協議

迭代器協議定義了如何遍歷一個對象。一個對象要成為迭代器，必須實現next()方法。next()方法返回一個包含兩個屬性的對象：

• value：當前迭代的值。
• done：一個布爾值，表示迭代是否完成。如果為true，表示迭代結束；如果為false，表示還有更多的值可以迭代。

const iterator = {
  next() {
    return { value: 1, done: false };
  }
};

2. 可迭代對象

可迭代對象（Iterable）是指實現了[Symbol.iterator]()方法的對象。該方法返回一個迭代器。常見的可迭代對象包括數組、字符串、Map、Set等。

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

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

3. for...of循環

for...of循環是用于遍歷可迭代對象的語法糖。它會自動調用可迭代對象的[Symbol.iterator]()方法，并使用返回的迭代器進行遍歷。

const array = [1, 2, 3];
for (const value of array) {
  console.log(value); // 1, 2, 3
}

4. 生成器函數

生成器函數（Generator Function）是一種特殊的函數，它返回一個生成器對象。生成器對象既是迭代器，又是可迭代對象。生成器函數使用function*語法定義，并使用yield關鍵字來產生值。

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

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

5. 內置迭代器

JavaScript中的許多內置對象都實現了迭代器接口，例如數組、字符串、Map、Set等。這些對象可以直接使用for...of循環進行遍歷。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

for (const [key, value] of map) {
  console.log(key, value); // a 1, b 2, c 3
}

6. 自定義迭代器

我們可以通過實現[Symbol.iterator]()方法來創建自定義的可迭代對象。該方法需要返回一個迭代器對象，該對象必須實現next()方法。

const myIterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 3) {
          return { value: step, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

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

7. 迭代器的應用場景

迭代器在JavaScript中有廣泛的應用場景，例如：

• 遍歷數據結構：迭代器可以用于遍歷數組、字符串、Map、Set等數據結構。
• 異步編程：生成器函數可以與Promise結合使用，實現異步編程。
• 惰性求值：生成器函數可以實現惰性求值，只有在需要時才計算值。

8. 總結

JavaScript中的迭代器提供了一種統一的方式來遍歷數據集合。通過實現迭代器協議和可迭代對象，我們可以自定義迭代行為。生成器函數進一步簡化了迭代器的創建過程，并提供了更多的靈活性。掌握迭代器的知識，可以幫助我們更好地理解和應用JavaScript中的數據結構與算法。