JavaScript - 使用者定義迭代器：初學者指南

你好，未來的JavaScript法師們！今天，我們將踏上一段令人興奮的旅程，進入使用者定義迭代器的世界。別擔心如果你是編程新手；我將成為你的友好指南，一步一步地解釋一切。所以，來一杯咖啡，我們一起來看看吧！

迭代器是什麼？

在我們跳進深水區之前，我們先從基礎開始。想像你有一盒巧克力（美味！）。迭代器就像一隻神奇的手，幫助你一次拿起一個巧克力，並記錄你已经吃過哪些。

在JavaScript的術語中，迭代器是一個定義了next()方法的對象，该方法返回序列中的下一個項目。這個方法是迭代器魔法關鍵！

next() 方法：迭代的中心

next()方法是所有動作的發生地。這就像我們迭代器汽車的引擎。讓我們來分解它：

next() 的結構

{
value: any,
done: boolean
}

這個方法返回一個對象，具有兩個屬性：

1. value：序列中的下一個值。
2. done：一個布爾值，指示序列是否結束。

讓我們通過一個簡單的例子來看看它是如何工作的：

function simpleIterator() {
let count = 0;
return {
next: function() {
count++;
if (count <= 3) {
return { value: count, done: false };
}
return { value: undefined, done: true };
}
};
}

const iterator = simpleIterator();
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。每次我們調用next()，它會給我們下一個數字，直到我們達到結束。這就像一個小計數機！

使用者定義迭代器：創造自己的魔法

現在我們了解了基礎知識，讓我們創建我們自己的迭代器。想像我們正在創建一個我們最喜歡歌曲的播放清單。我們將創建一個迭代器來遍歷這個播放清單。

function playlistIterator(songs) {
let currentIndex = 0;

return {
next: function() {
if (currentIndex < songs.length) {
return {
value: songs[currentIndex++],
done: false
};
} else {
return { done: true };
}
}
};
}

const myPlaylist = ['Bohemian Rhapsody', 'Stairway to Heaven', 'Hotel California'];
const myMusicIterator = playlistIterator(myPlaylist);

console.log(myMusicIterator.next()); // { value: 'Bohemian Rhapsody', done: false }
console.log(myMusicIterator.next()); // { value: 'Stairway to Heaven', done: false }
console.log(myMusicIterator.next()); // { value: 'Hotel California', done: false }
console.log(myMusicIterator.next()); // { done: true }

在這裡，我們創建了一個playlistIterator，它遍歷我們的歌曲數組。每次我們調用next()，它會給我們下一首歌，直到我們都聽過为止。這就像擁有自己的個人DJ！

讓對象可迭代

我們也可以讓我們自己的對象可迭代。讓我們創建一個Book對象，我們可以遍歷它的頁面：

const Book = {
title: 'The Great Gatsby',
pages: ['It was the best of times...', 'Call me Ishmael...', 'The end.'],
[Symbol.iterator]: function() {
let pageIndex = 0;
return {
next: () => {
if (pageIndex < this.pages.length) {
return { value: this.pages[pageIndex++], done: false };
} else {
return { done: true };
}
}
};
}
};

for (let page of Book) {
console.log(page);
}

這個例子創建了一個Book對象，我們可以使用for...of循環遍歷它。這就像翻閱書頁一樣！

實際應用：我們可以在哪裡使用這個？

使用者定義迭代器在許多場景中非常有用：

1. 自定義數據結構：如果你創建了自己的數據結構，你可以定義它應該如何被迭代。
2. 懶評估：在飛行中生成值，而不是將它們全部存儲在記憶中。
3. 無窮序列：為可能的無窮序列創建迭代器，如斐波那契數字。

讓我們看一個無窮斐波那契序列迭代器的例子：

function fibonacciIterator() {
let [prev, curr] = [0, 1];
return {
next: function() {
[prev, curr] = [curr, prev + curr];
return { value: prev, done: false };
}
};
}

const fib = fibonacciIterator();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5

這個迭代器將不斷生成斐波那契數字！這就像擁有一個數學的精靈。

結論：迭代的力量

使用者定義迭代器給我們提供了控制我們如何遍歷數據的能力。它們就像定製的工具，幫助我們精確地導航我們的代碼。無論你是翻閱書頁、穿梭播放清單，還是生成無窮數學序列，迭代器都能為你提供支持！

記住，精通迭代器的關鍵是練習。嘗試為不同的場景創建自己的迭代器。也許是一副牌的迭代器，或者是一個生成質數的迭代器。可能性無限！

高興編程，願你的迭代器總是能找到下一個值！ | 方法 | 描述 | 返回值 | |------|------|--------| | next() | 返回迭代序列中的下一個值 | 帶有 'value' 和 'done' 屬性的對象 | | [Symbol.iterator]() | 讓一個對象可迭代 | 返回一個迭代器對象 |

Credits: Image by storyset