Bagaimana saya cuba memahami dalam Nested For Loop dalam JavaScript

Apa yang ada dalam panduan ini?

Ini ialah panduan asas di mana saya cuba memberikan penjelasan langkah demi langkah tentang "untuk gelung" bersarang dalam JavaScript. Memecahkan logik dan lelaran gelung secara terperinci dengan menulis program, yang mencetak corak segi empat tepat pada konsol penyemak imbas. Saya akan menerangkan perkara yang berlaku di dalam minda gelung serta lelaran di dalam gelung bersarang dan susunan kerjanya.

Panduan untuk siapa?

Panduan ini bertujuan untuk pemula mutlak, yang mempelajari asas JavaScript asas atau jika anda mempunyai kekeliruan tentang susunan kerja "untuk gelung".

Prasyarat: JavaScript Asas, Jenis Data (rentetan, nombor), Operator(=, <, >, , =) dan Untuk gelung.

Artikel ini pada asalnya diterbitkan di Webdevstack.hashnode.dev

pengenalan

Mencetak corak Solid Square ialah cabaran peringkat pemula. Cabarannya melibatkan penulisan program yang mencetak corak membuat bentuk segi empat sama pepejal ke konsol menggunakan aksara yang diberikan. Sepanjang panduan ini, kami akan menulis program langkah demi langkah menggunakan gelung for untuk memahami cara gelung berfungsi, memecahkan setiap langkah secara terperinci tentang perkara yang berlaku di dalam apabila gelung for mula berfungsi.

Memahami masalah

Visualkan corak dalam bentuk segi empat sama pepejal yang diperbuat daripada sebarang aksara, cth., #, dalam saiz grid aksara 4 × 4. Ini bermakna empat baris empat aksara membina segi empat sama pepejal bersaiz 4 x 4 (lajur & baris). Begini rupanya pada konsol.

Perlu untuk memahami susunan corak. Setiap baharu terdapat 4 aksara (sebagai kiraan lajur), membuat satu baris. Kami perlu mengulang set ini dalam setiap baris baharu sebanyak 4 kali untuk mencetak corak khusus kami.

Memulakan Asas

Pertama, mari mulakan dengan mengisytiharkan pembolehubah untuk menyimpan beberapa nilai. Pembolehubah pertama ialah saiz, yang menyimpan nombor 4, yang diperlukan untuk mengira corak. Yang kedua ialah hasil, yang diberikan rentetan kosong untuk menyimpan output akhir. Memandangkan ia akan memegang nilai rentetan, rentetan kosong ditetapkan sebagai nilai awal untuk hasil. (Anda boleh menyemak output pada penghujung, perkara yang dikembalikan, jika anda tidak menyimpan sebarang rentetan kosong)

let size = 4;
let result = "";

(Adalah mungkin untuk melakukannya tanpa memulakan pembolehubah, tetapi pembolehubah digunakan untuk penyelenggaraan yang lebih baik. Selain itu, selain daripada gelung for, atur cara boleh ditulis menggunakan gelung sementara atau dalam kaedah lain tetapi ini bukan matlamat kami dalam panduan ini)

Sebagai contoh, mari tulis "untuk gelung" asas kami untuk memahami gelung dengan memecahkannya kepada langkah-langkah kecil. Memahami asas dengan jelas akan menjadikan langkah seterusnya lebih mudah untuk dipertimbangkan.

let size = 4;
let result = "";

Memahami Persediaan Asas

• Penyediaan Pembolehubah

  saiz = 4; - Bilangan kali gelung berulang.

  hasil = ""; - Rentetan kosong untuk menyimpan output akhir.

• Permulaan Gelung: kiraan = 0; menetapkan nilai permulaan untuk "Untuk Gelung".

• Penyamanan Gelung: kira < saiz; menyemak jika kiraan kurang daripada saiz. Gelung berjalan sehingga keadaan kembali palsu.

• Badan Gelung: hasil = "#"; menambahkan aksara “#” untuk menghasilkan setiap lelaran gelung.

• Kemas kini pembolehubah gelung: kiraan ; kenaikan dikira sebanyak 1 pada akhir setiap lelaran.

  kira → kira = kira 1

  Peningkatan adalah perlu, atau gelung akan berjalan tanpa had.

Melampirkan: menambah nilai baharu pada penghujung nilai sedia ada. Sebagai contoh, biarkan teks = "Hello"; Jika saya menggabungkan nilai lain kepada pembolehubah teks, seperti teks = "Dunia"; ia akan menambahkan rentetan "Dunia" kepada nilai sedia ada "Hello", menghasilkan output "HelloWorld". teks = “Dunia” → teks = teks “Dunia” → teks = “Hello” “Dunia” → teks = “HelloWorld”

Apakah yang berlaku pada setiap lelaran?

saiz = 4; hasil = ““;

Lelaran 1:

• kira = 0; → kira < saiz; → 0 < 4 → keadaan benar → Badan Gelung

• hasil = “#"; → hasil = hasil “#”; → hasil = ““ “#” → hasil = “#”;

• kira → kiraan = kiraan 1 → kiraan = 0 1 → kiraan = 1

Lelaran 2:

• kira = 1; → kira < saiz; → 1 < 4 → benar → Badan Gelung

• hasil = “#"; → hasil = hasil “#”; → hasil = “#“ “#” → hasil = “##”;

• kira → kiraan = kiraan 1 → kiraan = 1 1 → kiraan = 2

Lelaran 3:

• kira = 2; → 2 < 4 → benar → badan gelung

• hasil = “#”; → keputusan ialah “###”

• kiraan → kiraan ialah 3

Lelaran 4:

• bilangan = 3; → 3 < 4 → benar → badan gelung

• hasil = “#”; → keputusan ialah “####”

• kiraan → kiraan ialah 4

Tamat Lelaran:

• kiraan = 4; → 4 < 4 → palsu → gelung berhenti.

console.log(hasil); mencetak nilai akhir daripada hasil ke konsol. Nilai akhir ialah nilai kemas kini terakhir. Dalam kes ini, Output: ####

Membina Sarang - Pembinaan Corak

Setakat ini, kami telah mencetak empat aksara "#" (setiap aksara boleh dianggap sebagai lajur) dalam satu baris (yang kami panggil baris) menggunakan For Loop. Kami memerlukan sejumlah 4 baris set aksara serupa #### untuk membina dimensi bagi segi empat sama. ✅

Kita boleh mencapai ini dengan mengulangi keseluruhan gelung empat kali dengan meletakkan gelung di dalam gelung baharu. Gelung baharu ini mencipta setiap set #### aksara empat kali. Ini membentuk gelung bersarang, bermakna gelung di dalam gelung lain, gelung dalam dan gelung luar.

?Setiap kali gelung luar berjalan, ia melaksanakan gelung dalam, yang berulang 4 kali juga. Ini bermakna empat lelaran gelung luar akan melaksanakan gelung dalam empat kali, menghasilkan sejumlah 16 lelaran untuk gelung dalam. Ini adalah seperti berikut.

Mari tukar kod kami mengikut idea kami, juga mengemas kini nama pembolehubah gelung dengan sewajarnya. Nama untuk gelung dalam ialah "col", kerana ia meletakkan aksara melalui kiraan lajur dan untuk gelung luar, ia ialah "baris".

let size = 4;
let result = "";

Kedua-dua gelung akan terus berulang sehingga baris keadaan < saiz dan kol < saiz menjadi palsu. Baris dan kol menambah nilainya sendiri satu demi satu dalam setiap lelaran.

Sekarang, jika kita menjalankan kod kita, output akan menjadi seperti ini: ################, yang bukan output yang kita inginkan. Ini berlaku kerana kami tidak memecahkan baris baharu untuk setiap satu baris.

• Sebagai gelung dalam yang bertanggungjawab untuk setiap set ####, kami akan menambahkan aksara baris baharu "n" pada hasil pembolehubah yang sama, selepas gelung dalam tetapi masih dalam badan gelung luar: result = "n ";

for(let count = 0; count < size; count++){
    result += "#";
}
console.log(result);
// Play with this code on a code playground or on console.

• Untuk setiap baris, gelung dalam menambahkan aksara “#” pada hasil carian. Setelah selesai menambah aksara dan keluar, gelung luar menambahkan “n” pada pembolehubah hasil untuk beralih ke baris baharu.

Membrek Lelaran bersarang

➿ Gelung Luar

Lelaran1: baris = 0 → baris < saiz → 0 < 4 → benar

-- Badan gelung luar

--- Gelung dalam

--- Lelaran1: kol = 0: hasil = “#”, jadi hasil menjadi “#”, kol

--- Lelaran2: kol = 1: hasil = “#”, jadi hasil menjadi “##”, kol

--- Lelaran3: kol = 2: hasil = “#”, jadi hasil menjadi “###”, kol

--- Lelaran4: kol = 3: hasil = “#”, jadi hasil menjadi “####”, kol

--- Keluar gelung dalam

--result = "n": Aksara baris baharu ditambah, jadi hasil menjadi "####n".

baris → nilai kenaikan baris kepada 1

Lelaran2: baris = 1 → baris < saiz → 1 < 4 → benar

-- Badan gelung luar

--- Gelung dalam

--- Lelaran1: col = 0: result = “#”, jadi hasil menjadi "###n#", col

--- Lelaran2: kol = 1: hasil = “#”, jadi hasil menjadi "####n##", kol

--- Lelaran3: kol = 2: hasil = “#”, jadi hasil menjadi "####n###", kol

--- Lelaran4: kol = 3: hasil = “#”, jadi hasil menjadi "####n####", kol

--- Keluar gelung dalam

-- result = "n": Aksara baris baharu ditambah, jadi hasil menjadi "####n####n".

baris → nilai kenaikan baris kepada 2

proses seterusnya berulang

-Lelaran3: baris = 2 → 2 < 4 → benar → "####n####n####n" → kenaikan baris nilainya kepada 3

-Lelaran4: baris = 3 → 3 < 4 → benar → "####n####n####n####n" → kenaikan baris nilainya kepada 4

-Lelaran Tamat: baris = 2 → 2 < 4 → palsu → Berhenti

➿ Keluar Gelung Luar

Consol.log (hasil) baris terakhir; mencetak nilai akhir.

"####n####n####n####n" ialah nilai akhir yang disimpan oleh pembolehubah hasil pada penghujungnya. “n” akan melaksanakan brek talian semasa mencetak output ke konsol.

let size = 4;
let result = "";

Kesimpulan

Melaksanakan tugas yang rumit seperti mengulang dan memaparkan struktur data berbilang dimensi selalunya melibatkan penggunaan gelung bersarang. Setakat ini, kami telah meneroka dalam gelung bersarang program asas untuk membina asas bagi pemahaman asas. Kami telah memecahkan langkah lelaran, untuk gelung asas dan yang bersarang. Saya cadangkan untuk mencuba menulis variasi yang berbeza bagi program ini, seperti membenarkan pengguna memasukkan saiz dan aksara untuk corak, mencipta corak segi empat tepat atau melaksanakan program yang sama menggunakan kaedah berbeza, untuk lebih banyak latihan.

console.log("Terima kasih kerana Membaca");

Atas ialah kandungan terperinci Bagaimana saya cuba memahami dalam Nested For Loop dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!