Rumah > Artikel > hujung hadapan web > Pembelajaran gelung JS: penggunaan penyataan untuk gelung (contoh terperinci)
Dalam artikel sebelumnya "Pembelajaran gelung JS: penggunaan pernyataan gelung while (contoh terperinci) ", kami secara ringkas mempelajari tentang gelung while dan gelung do while, dan hari ini kami akan memperkenalkan gelung lain - untuk penyataan gelung, harap ia membantu semua orang!
1: untuk gelung
Gelung for akan pra-takrif pembolehubah yang mengawal nombor daripada gelung dalam untuk pernyataan, jadi pernyataan gelung untuk boleh melakukan operasi gelung mengikut bilangan gelung yang diketahui, yang sesuai untuk situasi di mana bilangan kali skrip perlu dijalankan diketahui dengan jelas.
Format sintaks gelung for adalah seperti berikut:
for (初始化语句; 循环条件; 变量更新--自增或自减) { 语句块; }
Pernyataan gelung for boleh dibongkar kepada 4 bahagian: tiga ungkapan dalam nombor ()
dan Mari analisa "blok pernyataan" dalam {}
.
analisis pernyataan:
Pernyataan permulaan (ungkapan 1): terutamanya memulakan nilai pembolehubah, digunakan untuk menetapkan pembilang, iaitu nilai pada permulaan gelung ; Pernyataan ini hanya dilaksanakan semasa gelung pertama dan tidak akan dilaksanakan lagi pada masa hadapan.
Keadaan gelung (ungkapan 2): keadaan sekatan pelaksanaan gelung, digunakan untuk mengawal sama ada untuk melaksanakan kod dalam badan gelung jika keadaannya BENAR, gelung diteruskan, jika keadaan adalah FALSE , gelung tamat dan keluar dari gelung serta-merta.
Kemas kini pembolehubah (ungkapan 3): ungkapan dengan operasi kenaikan kendiri atau pengurangan kendiri Setiap kali gelung dilaksanakan, nilai pembilang diubah suai dengan serta-merta bahawa gelung Keadaan secara beransur-ansur menjadi "tidak boleh dipertahankan".
Blok penyata: Beberapa kod yang perlu dilaksanakan apabila syarat dinilai sebagai benar.
Adakah penerangan di atas agak berbelit-belit Mari kita lihat carta alir pelaksanaan penyataan gelung untuk untuk memahami pelaksanaan bagi? gelung secara lebih intuitif. !
Contoh: Kira jumlah daripada 1 hingga 100
<script type="text/javascript"> var sum=0; for(var i=1; i<=100; i++){ sum+=i; } console.log('1 + 2 + 3 +...+ 99 + 100 = '+sum); </script>Tiga ungkapan dalam gelung untukTiga ungkapan dalam kurungan dalam gelung JS untuk boleh diabaikan, tetapi koma bertitik yang digunakan untuk memisahkan tiga ungkapan tidak boleh ditinggalkan, seperti yang ditunjukkan dalam contoh berikut:
Dua: untuk sarang gelung
// 省略第一个表达式 var i = 0; for (; i < 5; i++) { // 要执行的代码 } // 省略第二个表达式 for (var y = 0; ; y++) { if(y > 5){ break; } // 要执行的代码 } // 省略第一个和第三个表达式 var j = 0; for (; j < 5;) { // 要执行的代码 j++; } // 省略所有表达式 var z = 0; for (;;) { if(z > 5){ break; } // 要执行的代码 z++; }
Tidak kira apa jenis gelung, ia boleh bersarang (iaitu, satu atau lebih gelung boleh ditakrifkan dalam gelung). Format tatabahasa:
Di sini, kami mentakrifkan tiga sarang untuk gelung gelung.
for (初始化语句1; 循环条件; 变量更新--自增或自减) { //语句块1; for (初始化语句2; 循环条件; 变量更新--自增或自减) { //语句块2; for (初始化语句3; 循环条件; 变量更新--自增或自减) { //语句块3; ..... } } }
Kes: for loop melaksanakan jadual pendarabanPertama, mari kita lihat jadual pendaraban
Corak carta boleh dilukis:
Terdapat sejumlah 9 baris dan 9 lajur, dan terdapat beberapa ungkapan dalam setiap baris.Hasil output:
for(var i = 1; i <= 9; i++){ //外层循环控制行 for(var j = 1; j <= i; j++) //内层循环控制列 { document.write(j+"*"+i+"="+j*i+" "); } document.write("</br>"); }
Kita juga boleh darab 99 seperti dalam gambar permulaan Letakkan jadual ke dalam jadual dan output:
Kemudian tambah gaya css untuk mengubah suainya:
document.write("<table>"); for (var i = 1; i <= 9; i++) { //外层循环控制行 document.write("<tr>"); for (var j = 1; j <= i; j++) //内层循环控制列 { document.write("<td>" + j + "*" + i + "=" + j * i + "</td>"); } //换行,控制每行的输出几个表达式 document.write("</tr>"); } document.write("</table>");Lihat hasil output:
table { width: 600px; border-collapse: separate; } table td { border: #000 1px solid; text-align: center; }
[Pembelajaran yang disyorkan:
]
Atas ialah kandungan terperinci Pembelajaran gelung JS: penggunaan penyataan untuk gelung (contoh terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!