Pemprosesan pengulangan dalam JavaScript

Dalam artikel ini, kami akan menerangkan pemprosesan pengulangan dalam JavaScript.

YouTube Video

Penyata for dalam JavaScript

Sintaks Asas

1for (initialization; condition; update) {
2  // Code to repeat
3}

Penyata for dalam JavaScript adalah satu sintaks untuk menjalankan iterasi. Ia melaksanakan blok kod tertentu berulang kali selagi syarat tertentu dipenuhi. Dengan menggunakan pernyataan for, proses yang sama boleh dijalankan dengan cekap berkali-kali.

• Inisialisasi (initialization): Bahagian yang dilaksanakan hanya sekali sebelum memulakan pengulangan. Inisialisasikan pembolehubah seperti kaunter pengulangan.
• Kondisi (condition): Syarat yang menentukan sama ada untuk meneruskan pengulangan. Jika true, pengulangan diteruskan; jika false, ia berakhir.
• Kemas Kini (update): Ini dilaksanakan pada akhir setiap pengulangan untuk mengemas kini kaunter pengulangan.

Contoh

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

Dalam kes ini, i bermula dari 0, dan pengulangan berjalan selagi i < 5 adalah true. i++ meningkatkan nilai i sebanyak 1 pada setiap iterasi gelung. Hasilnya, nombor dari 0 hingga 4 dipaparkan.

Skop Kaunter Pengulangan

Isytiharkan atau inisialisasikan pembolehubah dalam bahagian inisialisasi pernyataan for. Pembolehubah yang diisytiharkan di sini hanya sah dalam pengulangan.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Seperti ditunjukkan dalam contoh ini, merujuk kepada pemboleh ubah di luar pernyataan for akan menghasilkan ralat.

Pengulangan Tak Terbatas

Menetapkan syarat yang tidak menamatkan pengulangan akan menghasilkan pengulangan tak terbatas. Ini mungkin membebankan pelayar atau sistem, jadi berhati-hati diperlukan.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Array dan pernyataan for

Adalah perkara biasa menggunakan pernyataan for bersama dengan array. Ia mudah untuk memproses setiap elemen dalam array.

Contoh

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

Dengan cara ini, anda boleh memproses setiap elemen dalam array menggunakan indeks.

Struktur Gelung Lain

Pernyataan for...of

Pernyataan for...of digunakan untuk objek boleh iterasi seperti array dan string.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Ini membolehkan anda memproses setiap elemen tanpa menggunakan indeks.

Pernyataan for...in

Pernyataan for...in digunakan untuk mengitar melalui sifat-sifat sesuatu objek.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

Dengan cara ini, anda boleh melakukan operasi pada setiap elemen menggunakan kunci.

Ringkasan

• Pernyataan for adalah struktur gelung dengan tiga bahagian: inisialisasi, syarat, dan kemas kini.
• Anda boleh mengawal tingkah laku gelung menggunakan break atau continue.
• Apabila digabungkan dengan array atau objek, elemen atau sifat boleh diproses secara efisien.

Pernyataan while dalam JavaScript

Sintaks Asas

1while (condition) {
2    // Code that repeats while the condition is true
3}

Pernyataan while dalam JavaScript adalah struktur gelung yang melaksanakan operasi berulang selagi syarat yang dinyatakan adalah true. Serupa dengan pernyataan for, pernyataan while hanya menyatakan syarat.

• Syarat: Tuliskan ekspresi bersyarat yang menentukan sama ada untuk meneruskan gelung. Gelung terus berjalan apabila true dan tamat apabila ia menjadi false.

Contoh

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

Dalam contoh ini, gelung bermula dengan pembolehubah i pada 0 dan dijalankan selagi i < 5 adalah true. Dalam setiap iterasi gelung, i ditambah 1, dan apabila i menjadi 5, syarat menjadi false dan gelung tamat. Hasilnya, pernyataan while memaparkan dari 0 hingga 4.

Berbeza dengan pernyataan for, dalam pernyataan while, inisialisasi dan kemas kini pembolehubah ditulis sebagai pernyataan berasingan. Anda juga boleh merujuk kepada pembolehubah selepas pernyataan while. Dalam kes ini, 5 dipaparkan selepas pernyataan while telah tamat.

Pengulangan Tak Terbatas

Jika syarat sentiasa true, satu gelung tak terhingga akan berlaku yang tidak berakhir. Gelung tak terhingga seharusnya dielakkan, tetapi jika digunakan dengan sengaja, anda boleh menamatkan gelung dengan pernyataan break.

Contoh

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Memproses Array dengan Gelung while

Ia juga boleh memproses array dengan pernyataan while.

Contoh

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Pernyataan do...while

Sintaks Asas

1do {
2    // Code that is executed at least once
3} while (condition);

Pernyataan do...while, variasi daripada pernyataan while, memeriksa keadaan selepas melaksanakan gelung sekurang-kurangnya sekali. Sementara pernyataan while memeriksa keadaan terlebih dahulu, pernyataan do...while melaksanakan proses sekali sebelum mengesahkan keadaan.

Contoh

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

Dalam contoh ini, i dipaparkan dari 0 hingga 4. Pernyataan do...while berbeza daripada pernyataan while kerana ia sentiasa dilaksanakan sekali, walaupun keadaan adalah false.

Ringkasan

• Pernyataan while digunakan untuk melaksanakan kod berulang kali selagi keadaan adalah true.
• Berhati-hati dengan gelung yang tidak berkesudahan, tetapi anda boleh mengawal aliran gelung menggunakan break dan continue.
• Pernyataan do...while berguna apabila anda mahu melaksanakan gelung sekurang-kurangnya sekali.

break dan continue

Anda boleh menggunakan break dan continue dalam gelung.

• break digunakan untuk menghentikan gelung secara awal.
• continue melangkau iterasi semasa dan meneruskan ke iterasi seterusnya.

Contoh break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

Dalam kes ini, break dilaksanakan apabila i menjadi 5. Hasilnya, nombor dari 0 hingga 4 dipaparkan.

Contoh continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

Dalam kes ini, continue dilaksanakan apabila i adalah 2. Akibatnya, nombor selain daripada 2 dipaparkan.

Gelung Bersarang dalam JavaScript

Dalam pengaturcaraan JavaScript, gelung bersarang adalah struktur di mana satu gelung wujud di dalam gelung yang lain. Gelung seperti ini sangat berkesan apabila algoritma atau proses tertentu merangkumi pelbagai dimensi atau lapisan. Sebagai contoh, memproses array multidimensi dengan array di dalam array adalah kes biasa.

Di sini, kami akan menerangkan struktur asas gelung bersarang, contoh penggunaan, langkah berjaga-jaga, dan pertimbangan pengoptimuman.

Struktur Asas Gelung Bersarang

Struktur asas bagi gelung bersarang adalah bentuk di mana satu atau lebih gelung terkandung di dalam gelung lain. Setiap kali gelung luar dijalankan sekali, gelung dalam dijalankan sebanyak itu kali.

Di bawah adalah contoh asas dua gelung bersarang.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

Dalam kod di atas, i dikira dalam gelung luar, dan j dikira dalam gelung dalam. Setiap kali gelung luar dijalankan sekali, gelung dalam dijalankan dua kali.

Contoh Praktikal Gelung Bersarang

Gelung bersarang sangat berguna untuk mengendalikan tatasusunan berbilang dimensi. Sebagai contoh, semasa memproses tatasusunan dua dimensi, anda perlu mengendalikan kedua-dua baris (gelung luar) dan lajur (gelung dalam).

Dalam contoh berikut, kami mengendalikan tatasusunan dua dimensi dan mencetak setiap elemen.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

Dengan cara ini, menggunakan gelung bersarang membolehkan akses ke setiap elemen dalam tatasusunan dua dimensi.

Nota

Terdapat beberapa perkara yang perlu diberi perhatian apabila menggunakan gelung bersarang.

1. Isu Prestasi

   Apabila gelung bersarang menjadi lebih dalam, masa pelaksanaan meningkat dengan mendadak. Sebagai contoh, jika gelung luar dijalankan sebanyak 100 kali dan gelung dalam sebanyak 100 kali, sejumlah 10,000 operasi dilakukan. Oleh itu, jika terdapat banyak ulangan gelung, anda harus mempertimbangkan pengoptimuman gelung untuk kecekapan.

2. Aplikasi kepada Algoritma Kompleks

   Gelung bersarang sangat berkuasa, tetapi apabila pemprosesan menjadi kompleks, kod boleh menjadi sukar untuk difahami. Oleh itu, untuk mengekalkan kebolehbacaan kod, adalah penting untuk menyusun pemprosesan dengan komen dan fungsi yang sesuai.

Pertimbangan Pengoptimuman

Apabila menggunakan gelung bersarang, pengoptimuman berikut boleh dipertimbangkan.

1. Penamatan Gelung Awal

   Jika keadaan tertentu dipenuhi di dalam gelung, anda boleh menggunakan pernyataan break untuk keluar daripada gelung. Ini boleh mengelakkan gelung yang tidak perlu dan meningkatkan prestasi.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Pindahkan Pengiraan ke Luar

   Daripada melakukan pengiraan yang sama di dalam gelung setiap kali, anda boleh melakukannya sekali di luar gelung dan menggunakan hasilnya untuk menjadikan proses lebih cekap.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Ringkasan

Gelung bersarang sangat berguna untuk mengendalikan struktur data dan algoritma yang kompleks dalam JavaScript. Walau bagaimanapun, jika tidak digunakan dengan betul, ia boleh mengakibatkan penurunan prestasi dan mengurangkan kebolehbacaan kod. Untuk menggunakan gelung bersarang dengan berkesan, adalah penting untuk berusaha mengoptimumkan gelung dan mengatur kod, serta mengambil pendekatan yang sesuai bergantung pada keadaan.

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

YouTube Video