Amalan Terbaik untuk Iterasi dalam JavaScript

Artikel ini menjelaskan amalan terbaik untuk iterasi dalam JavaScript.

YouTube Video

Amalan Terbaik untuk Iterasi dalam JavaScript

Dalam JavaScript, adalah biasa menggunakan gelung for untuk iterasi. Di sini, kami akan memberikan penjelasan terperinci mengenai amalan terbaik untuk menggunakan gelung for bagi menulis kod yang cekap dan mudah dibaca.

Pilih Struktur Gelung yang Tepat

JavaScript menyediakan pelbagai struktur gelung, masing-masing sesuai untuk tujuan yang berbeza.

 1// Example of a for loop
 2for (let i = 0; i < 5; i++) {
 3    console.log(i);
 4}
 5
 6// Example of a for...of loop
 7const array = [10, 20, 30];
 8for (const value of array) {
 9    console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15    console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21    console.log(count);
22    count++;
23}

• Pernyataan for sesuai apabila bilangan ulangan telah ditentukan.
• Pernyataan for...of sesuai untuk memproses tatasusunan dan objek yang boleh diulang dengan ringkas.
• Pernyataan for...in digunakan untuk mengulangi sifat-sifat objek. Walau bagaimanapun, ia tidak sesuai untuk tatasusunan.
• Pernyataan while dan do...while digunakan untuk mengawal gelung berdasarkan keadaan.

Menggunakan kaedah forEach dan pernyataan for...of.

Apabila mengulang tatasusunan, menggunakan pernyataan for untuk mengakses indeks adalah biasa, tetapi kaedah forEach atau pernyataan for...of mungkin lebih mudah dibaca.

 1// Using a standard for loop
 2const array = ["apple", "banana", "cherry"];
 3for (let i = 0; i < array.length; i++) {
 4    console.log(array[i]);
 5}
 6
 7// Using forEach
 8array.forEach(item => console.log(item));
 9
10// Using for...of
11for (const item of array) {
12    console.log(item);
13}

• Pernyataan for membolehkan pengurusan indeks secara eksplisit semasa mengulangi.
• Kaedah forEach menggunakan fungsi panggil balik untuk memproses setiap elemen dengan ringkas.
• Pernyataan for...of sangat mudah dibaca dan membolehkan akses langsung ke setiap elemen dalam tatasusunan.

Optimumkan Syarat Gelung

Oleh kerana syarat gelung dinilai berulang kali, mengelakkan pengiraan yang tidak perlu dapat meningkatkan prestasi.

 1const names = ["Alice", "Bob", "Charlie"];
 2const scores = [85, 92, 78];
 3
 4// Inefficient example
 5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
 6    console.log(`${names[i]} scored ${scores[i]}`);
 7}
 8
 9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11    console.log(`${names[i]} scored ${scores[i]}`);
12}

• Seperti yang ditunjukkan dalam contoh ini, menyimpan hasil pengiraan dalam pembolehubah terlebih dahulu membolehkan pelaksanaan gelung yang lebih cekap.

 1const scores = [85, 92, 78];
 2let sum = 0;
 3let sum2 = 0;
 4
 5// Inefficient example
 6for (let i = 0; i < scores.length; i++) {
 7    sum += scores[i];
 8}
 9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13    sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);

• Seperti yang ditunjukkan dalam contoh ini, membalikkan keadaan kadangkala boleh menjadi lebih cekap.

Mengoptimumkan Pemprosesan Gelung

Oleh kerana pemprosesan gelung dilaksanakan berulang kali, mengelakkan pengiraan yang tidak perlu boleh meningkatkan prestasi.

 1const array = ["apple", "banana", "cherry"];
 2
 3// Inefficient example
 4for (let i = 0; i < 100; i++) {
 5    const element = document.querySelector("#myElement");
 6    element.textContent = `Count: ${i}`;
 7}
 8
 9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12    element.textContent = `Count: ${i}`;
13}

• Dalam contoh ini, dengan memindahkan kaedah querySelector ke luar gelung, pengiraan berulang yang tidak perlu dapat dielakkan.

Sedar tentang Lingkup

Gunakan let atau const untuk memastikan pemboleh ubah dalam gelung mempunyai lingkup yang sesuai. Oleh kerana var terhad kepada lingkup fungsi, ia mungkin menyebabkan tingkah laku yang tidak dijangka.

 1// Using let
 2for (let i = 0; i < 3; i++) {
 3    console.log(i);
 4}
 5
 6// Potential issue with var
 7for (var i = 0; i < 3; i++) {
 8    setTimeout(() => console.log(i), 1000); // 3, 3, 3
 9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13    setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}

• var mempunyai skop fungsi, jadi selepas gelung, nilai i ialah 3, dan semua fungsi yang dilaksanakan oleh setTimeout mengeluarkan 3.
• Dengan menggunakan let, nilai i dalam fungsi panggil balik setTimeout merujuk kepada nilai baharu untuk setiap gelung, jadi 0, 1, 2 dikeluarkan seperti yang diharapkan.

Perbaiki Kebolehbacaan dengan Keluar Awal

Untuk mempermudah pemprosesan gelung, gunakan break dan continue dengan tepat untuk meningkatkan kebolehbacaan.

 1// Example using break
 2for (let i = 0; i < 10; i++) {
 3    if (i === 5) {
 4        break; // Exit the loop
 5    }
 6    console.log(i);
 7}
 8
 9// Example using continue
10for (let i = 0; i < 10; i++) {
11    if (i % 2 === 0) {
12        continue; // Skip to the next iteration
13    }
14    console.log(i);
15}

• Menggunakan break membolehkan anda menghentikan pemprosesan gelung di pertengahan, dengan melangkaui semua iterasi berikutnya.
• Menggunakan continue membolehkan anda melangkaui proses gelung semasa dan bergerak ke iterasi seterusnya.

Elakkan Bersarang yang Mendalam

Bersarang yang mendalam menjadikan kod sukar dibaca, maka sasarkan untuk mengekalkan kedalaman sarang dengan menggunakan pengembalian awal atau memecahkan fungsi menjadi fungsi kecil.

 1// Deeply nested example
 2for (let i = 0; i < 5; i++) {
 3    for (let j = 0; j < 5; j++) {
 4        if (i + j > 5) {
 5            console.log(i, j);
 6        }
 7    }
 8}
 9
10// Improved using function decomposition
11function processPairs(i) {
12    for (let j = 0; j < 5; j++) {
13        if (i + j > 5) {
14            console.log(i, j);
15        }
16    }
17}
18
19for (let i = 0; i < 5; i++) {
20    processPairs(i);
21}

• Dalam contoh ini, fungsi digunakan untuk mengurangkan penceraman (nesting).

Pertimbangkan pengendalian ralat

Jika terdapat kemungkinan ralat berlaku dalam gelung, laksanakan pengendalian ralat yang betul.

 1const data = ["123", "abc", "456", "xyz"];
 2
 3// Without Error Handling
 4for (const item of data) {
 5    const result = parseInt(item);
 6    console.log(`Parsed value: ${result}`);
 7}
 8
 9// With Error Handling
10for (const item of data) {
11    try {
12        const result = parseInt(item);
13        if (isNaN(result)) {
14            throw new Error(`Invalid number: ${item}`);
15        }
16        console.log(`Parsed value: ${result}`);
17    } catch (error) {
18        console.error(`Error processing item: ${item}. ${error.message}`);
19    }
20}

• Dalam contoh ini, pengendalian ralat dilakukan untuk memproses data tidak sah, mengesan dan melaporkan isu.

Perkara yang perlu diperhatikan dalam pemprosesan tidak segerak

Apabila mengendalikan pemprosesan tidak segerak dalam gelung, penggunaan async/await boleh menghasilkan kod yang ringkas dan intuitif.

 1const urls = ["https://example.com/1", "https://example.com/2"];
 2
 3// Proper handling of asynchronous operations
 4async function fetchUrls() {
 5    for (const url of urls) {
 6        const response = await fetch(url);
 7        const data = await response.json();
 8        console.log(data);
 9    }
10}
11
12fetchUrls();

• Kod ini secara asinkron mengambil URL dari larik urls satu persatu dan memproses hasilnya dalam format JSON. Menggunakan async/await memudahkan operasi asinkron, dengan mendapatkan data secara berurutan untuk setiap URL dan keluarkan ke konsol.

Fahami perbezaan antara penyataan for...of dan forEach() dalam pemrosesan tak segerak

 1async function asyncTask(num) {
 2    return new Promise(resolve => {
 3        setTimeout(() => {
 4            console.log(`Task ${num} done`);
 5            resolve();
 6        }, 100);
 7    });
 8}
 9
10async function runWithForOf() {
11    console.log("Start for...of");
12    for (const num of [1, 2, 3]) {
13        await asyncTask(num);
14    }
15    console.log("End for...of");
16}
17
18async function runWithForEach() {
19    console.log("Start forEach");
20    [1, 2, 3].forEach(async num => {
21        await asyncTask(num);
22    });
23    console.log("End forEach");
24}
25
26async function executeExamples() {
27    await runWithForOf();
28    await runWithForEach();
29}
30
31executeExamples();

• Semasa mengendalikan pemrosesan tak segerak dalam gelung, perhatikan perbezaan dalam tingkah laku, seperti yang ditunjukkan dalam contoh ini, antara menggunakan for...of dengan async/await dan menggunakan forEach().

• Dengan for...of, kod dijalankan secara berurutan dan menunggu di await dalam gelung sebelum meneruskan ke iterasi seterusnya. Sebaliknya, forEach() melaksanakan pemrosesan secara selari.

Kesimpulan

Pernyataan for dalam JavaScript adalah alat yang mudah tetapi berkuasa. Dengan memanfaatkan amalan terbaik yang diperkenalkan di sini, anda boleh menulis kod yang cekap dan sangat mudah dibaca. Perhatikan pemilihan struktur gelung yang sesuai, pengurusan skop, pengendalian ralat, dan sasarkan untuk menghasilkan kod yang sangat mudah diselenggara.

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

YouTube Video