Fungsi Generator dalam JavaScript

Dalam artikel ini, kami akan menerangkan fungsi generator dalam JavaScript.

YouTube Video

Fungsi Generator dalam JavaScript

Fungsi generator JavaScript ialah fungsi khas yang berbeza daripada fungsi biasa kerana ia boleh menjalankan pelaksanaan secara malas dan berhenti dan sambung semula. Dengan memahami fungsi generator, anda boleh mengendalikan operasi tak segerak dan pemprosesan susulan data besar dengan cekap. Di sini, kami akan memberikan penerangan terperinci tentang bagaimana fungsi generator berfungsi, cara menggunakannya, dan kes penggunaan praktikal.

Apakah Fungsi Generator?

Fungsi generator didefinisikan dengan function* (definisi fungsi dengan asterisk) dan, tidak seperti fungsi biasa, ia boleh berhenti di tengah-tengah pelaksanaan dan sambung semula sambil mengekalkan statusnya. Fungsi generator membenarkan "pelaksanaan secara malas" dan mengembalikan hasil secara berperingkat, membolehkan pengurusan memori yang cekap dan pemprosesan susulan.

Sintaks

1function* generatorFunction() {
2    yield 'First value';
3    yield 'Second value';
4    return 'Done';
5}

Dengan cara ini, fungsi generator boleh mempunyai pelbagai ekspresi yield dan menggunakan yield untuk menghentikan pelaksanaannya. Apabila fungsi generator dipanggil, badan fungsi tidak dilaksanakan serta-merta, dan sebuah objek generator dikembalikan. Anda boleh memanggil kaedah next() pada objek ini untuk menyambung semula fungsi daripada titik ia dihentikan.

Penggunaan Asas Fungsi Generator

Seterusnya, mari kita lihat contoh asas penggunaan fungsi generator.

 1function* simpleGenerator() {
 2    yield 1;
 3    yield 2;
 4    yield 3;
 5}
 6
 7const gen = simpleGenerator();
 8
 9console.log(gen.next()); // { value: 1, done: false }
10console.log(gen.next()); // { value: 2, done: false }
11console.log(gen.next()); // { value: 3, done: false }
12console.log(gen.next()); // { value: undefined, done: true }

Satu perkara utama yang perlu diberi perhatian di sini ialah generator mengembalikan nilai setiap kali dengan yield, dan selagi sifat done adalah false, ia menunjukkan terdapat lebih banyak nilai yang akan datang. Panggilan terakhir kepada next() mengembalikan done: true, menunjukkan bahawa generator telah selesai.

Kata Kunci yield dan Menghentikan Nilai

yield adalah kata kunci yang menunjukkan titik henti dalam fungsi generator. Nilai di sebelah kanan yield dikembalikan apabila next() dipanggil. Selain itu, yield membolehkan komunikasi dua hala. Dalam erti kata lain, apabila menghantar nilai sebagai argumen kepada kaedah next(), nilai tersebut dihantar ke fungsi generator.

 1function* generatorWithYield() {
 2    const value1 = yield 'First yield';
 3    console.log('Received value:', value1);
 4    const value2 = yield 'Second yield';
 5    console.log('Received value:', value2);
 6}
 7
 8const gen = generatorWithYield();
 9
10console.log(gen.next());        // { value: 'First yield', done: false }
11console.log(gen.next('Apple')); // Received value: Apple
12                                // { value: 'Second yield', done: false }
13console.log(gen.next('Banana'));// Received value: Banana
14                                // { value: undefined, done: true }

Dalam contoh ini, panggilan next('Apple') menghantar nilai 'Apple' ke fungsi generator, di mana ia digunakan dalam fungsi tersebut.

Menguruskan Status Generator

Generator boleh mengekalkan status pelaksanaannya, yang membolehkan perwakilan ringkas bagi gelung panjang atau pemprosesan susulan. Contoh berikut menunjukkan penjana yang menghasilkan nombor secara berterusan.

 1function* infiniteGenerator() {
 2    let i = 0;
 3    while (true) {
 4        yield i++;
 5        if (i > 10) {
 6            break;
 7        }
 8    }
 9}
10
11const gen = infiniteGenerator();
12
13console.log(gen.next().value); // 0
14console.log(gen.next().value); // 1
15console.log(gen.next().value); // 2
16// Continues...

Penjana ini terus menghasilkan nombor menggunakan gelung while(true), membolehkan anda mendapatkan nilai apabila diperlukan. Ini membolehkan pemprosesan set data yang besar dengan cekap.

Aplikasi Fungsi Penjana

Fungsi penjana sesuai untuk melaksanakan pelbagai proses secara berurutan. Sebagai contoh, ia berguna dalam memproses permintaan API secara berurutan atau membahagi serta memproses fail besar.

1function* apiRequestGenerator() {
2    yield fetch('https://codesparklab.com/json/example1.json');
3    yield fetch('https://codesparklab.com/json/example2.json');
4    yield fetch('https://codesparklab.com/json/example3.json');
5}

Oleh itu, penjana, yang boleh digunakan untuk pemprosesan asinkron, sangat bermanfaat untuk pengendalian data berurutan yang cekap.

Penjana Asinkron

Penjana asinkron yang diperkenalkan dalam ES2018 membolehkan anda mengembalikan nilai asinkron secara berurutan dengan menggabungkan async dan yield. Ini memungkinkan untuk menulis pemprosesan asinkron dengan ringkas menggunakan gabungan await.

Sintaks

 1async function* asyncGenerator() {
 2    yield await Promise.resolve(1);
 3    yield await Promise.resolve(2);
 4    yield await Promise.resolve(3);
 5}
 6
 7const gen = asyncGenerator();
 8
 9(async () => {
10    for await (const value of gen) {
11        console.log(value); // 1, 2, 3
12    }
13})();

Penjana asinkron dapat mendapatkan nilai secara berurutan menggunakan gelung for await...of. Corak ini sangat berguna apabila mengendalikan aliran data asinkron.

Contoh Praktikal: Memudahkan Pemprosesan Asinkron dengan Penjana

Fungsi penjana juga digunakan untuk memudahkan aliran pemprosesan asinkron. Sebagai contoh, dengan menggabungkan yield dan Promise seperti yang ditunjukkan di bawah, anda boleh menulis operasi asinkron agar kelihatan seperti sinkron.

 1function* asyncFlow() {
 2    const data1 = yield fetch('https://codesparklab.com/json/example1.json');
 3    console.log(data1);
 4    const data2 = yield fetch('https://codesparklab.com/json/example2.json');
 5    console.log(data2);
 6}
 7
 8const gen = asyncFlow();
 9
10function handleAsync(generator) {
11    const next = (promise) => {
12        promise.then((result) => {
13        const { value, done } = generator.next(result);
14        if (!done) {
15            next(value);
16        }
17        });
18    };
19
20    next(generator.next().value);
21}
22
23handleAsync(gen);

Kod ini membuat permintaan API secara berurutan menggunakan penjana dan memproses hasilnya.

Ringkasan

Fungsi penjana adalah salah satu ciri kuat JavaScript yang mempunyai keupayaan untuk memberhentikan dan menyambung semula pelaksanaan fungsi. Ini membolehkan pemprosesan berurutan, pemprosesan asinkron, dan manipulasi set data besar dengan cekap. Memahami penjana adalah langkah penting dalam menguasai teknik lanjutan dalam JavaScript.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video