JavaScript循環(huán)語(yǔ)句有哪些及怎么用
今天小編給大家分享一下JavaScript循環(huán)語(yǔ)句有哪些及怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元夏邑做網(wǎng)站,已為上家服務(wù),為夏邑各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575
.jpg)
while、for循環(huán)
在編程中，經(jīng)常需要使用循環(huán)語(yǔ)句處理各種各樣重復(fù)的工作。
例如，使用JavaScript生成一個(gè)學(xué)生名稱列表，這就需要?jiǎng)?chuàng)建一個(gè)HTML的子標(biāo)簽，從而生成如下的HTML結(jié)構(gòu)：
- 小明
- 小紅
- 小軍
- ...
不過(guò)，DOM操作不是本文的主要內(nèi)容，后續(xù)章節(jié)會(huì)逐步介紹的。
循環(huán)語(yǔ)句共有三種類型：while、do while和for，讀完本文就能掌握所有的循環(huán)了。
while 循環(huán)
語(yǔ)法
while語(yǔ)法：
while(exp){
//循環(huán)體}while語(yǔ)句主要包括執(zhí)行條件exp，和循環(huán)體兩部分。
執(zhí)行條件通常是一個(gè)條件表達(dá)式，例如i > 0表示當(dāng)只有當(dāng)變量i大于0的時(shí)候，才會(huì)執(zhí)行循環(huán)體。
舉個(gè)栗子：
let i = 10;while(i>0){
console.log(i);//在控制臺(tái)輸出
i--;}以上代碼創(chuàng)建了一個(gè)變量i，并賦值為10，當(dāng)i > 0成立時(shí)，執(zhí)行{}中的代碼。
代碼console.log(i);可以在控制臺(tái)輸出一個(gè)字符串，敲黑板，控制臺(tái)還知道是什么吧！
然后執(zhí)行i--，也就是變量i的值減去1。
總結(jié)上述代碼的作用就是，在瀏覽器的控制臺(tái)循環(huán)輸出變量i，從10輸出到1。
代碼執(zhí)行結(jié)果如下圖：
.jpg)
循環(huán)條件
通常情況下，循環(huán)的判斷條件都是一個(gè)條件表達(dá)式。條件表達(dá)式返回布爾值，當(dāng)返回值是true時(shí)就執(zhí)行循環(huán)體，當(dāng)返回值是false時(shí)，就結(jié)束循環(huán)語(yǔ)句的執(zhí)行。
實(shí)際上，判斷條件可以是任何類型的表達(dá)式，這里同樣會(huì)通過(guò)隱式轉(zhuǎn)換將表達(dá)式的計(jì)算結(jié)果轉(zhuǎn)為Boolean型。
例如 i > 0可以簡(jiǎn)寫為while(i):
let i = 3;while (i) { // 當(dāng) i 變成 0 時(shí)，Boolean(i)為false
console.log(i);
i--;}由于Boolean(0)是false所以以上代碼是成立的。
.jpg)
危險(xiǎn)的死循環(huán)
循環(huán)條件（變量i）必須在每次執(zhí)行的過(guò)程中不斷的執(zhí)行減一操作，也就是i--，否則i的值永遠(yuǎn)都大于0，循環(huán)也就永遠(yuǎn)不會(huì)停止，也就是常說(shuō)的死循環(huán)。
如果出現(xiàn)了死循環(huán)并非沒(méi)有解決的方法，我們可以通過(guò)殺死當(dāng)前進(jìn)程結(jié)束代碼執(zhí)行。
最簡(jiǎn)單的做法就是，關(guān)閉瀏覽器，然后去控制臺(tái)殺死瀏覽器進(jìn)程。
死循環(huán)對(duì)程序來(lái)講非常危險(xiǎn)，它會(huì)占滿cpu資源，甚至是整個(gè)內(nèi)存空間，造成死機(jī)。
所以，在編寫循環(huán)時(shí)，一定要注意不要忘記循環(huán)條件的更改。
只有一行語(yǔ)句的循環(huán)
當(dāng)循環(huán)體中只有一條語(yǔ)句時(shí)，就可以省略{}花括號(hào)，從而簡(jiǎn)化代碼。
舉個(gè)簡(jiǎn)答的小李子：
let i = 10;while(i>0)console.log(i--);
執(zhí)行效果和上面的代碼是一樣的。
do {…} while
語(yǔ)法
do{
//循環(huán)體}while(exp);和while循環(huán)不同的是，do {...} while循環(huán)將判斷條件和循環(huán)體交換了位置，在判斷循環(huán)條件之前，會(huì)首先執(zhí)行一次循環(huán)體。
let i = 0;do {
console.log(i);
i++;} while (i<10);以上代碼會(huì)輸出0~9的數(shù)字，執(zhí)行結(jié)果如下：
.jpg)
do {…} while的特點(diǎn)
也就是說(shuō)使用do {...} while語(yǔ)句，循環(huán)體至少為執(zhí)行一次：
let i = 0do {
console.log(i)
i--;}while(i>0);以上代碼，雖然i從一開(kāi)始就不滿足執(zhí)行條件，循環(huán)體依舊會(huì)執(zhí)行一次。
實(shí)際上，
do {...} while語(yǔ)句在現(xiàn)實(shí)編程過(guò)程中使用的非常少！
因?yàn)楹苌儆星闆r需要我們?cè)谂袛鄺l件不成立的情況下，依舊要執(zhí)行一次循環(huán)體。
即使存在這種情況，我們也通常使用while代替。
for 循環(huán)
相較而言，for循環(huán)語(yǔ)句是最復(fù)雜的，但也是最受歡迎的。
語(yǔ)法
for(begin; exp; step){
//循環(huán)體}直接從語(yǔ)法角度解釋for可能令人疑惑，下面是一個(gè)最常見(jiàn)的案例：
for(let i = 0; i < 10 ; i++){
console.log(i)}對(duì)比解讀：
| 語(yǔ)法構(gòu)件 | 對(duì)應(yīng)語(yǔ)句 | 解讀 |
|---|---|---|
begin | let i = 0 | 首次執(zhí)行循環(huán)時(shí)，執(zhí)行一次 |
exp | i < 10 | 每次循環(huán)之前，進(jìn)行判斷，true則執(zhí)行循環(huán)體，否則停止循環(huán) |
step | i++ | 每次循環(huán)體執(zhí)行過(guò)后執(zhí)行 |
以上代碼的執(zhí)行順序是：
let i = 0;，進(jìn)入循環(huán)語(yǔ)句時(shí)執(zhí)行，只執(zhí)行一次；判斷
i < 10，如果成立繼續(xù)執(zhí)行，否則推出循環(huán)；執(zhí)行
console.log(i)，控制臺(tái)輸出變量i的值；執(zhí)行
i++，改變循環(huán)變量i的值；循環(huán)執(zhí)行
2 3 4步，直至i < 10不成立。
實(shí)際上，以上代碼在功能上完全等價(jià)于：
let i = 0;while(i < 10){
console.log(i);
i++;}for的條件變量
和while、do {...} while不同的是，for循環(huán)的條件變量i是定義在for語(yǔ)句內(nèi)部的，相當(dāng)于一個(gè)局部變量，或者說(shuō)是內(nèi)聯(lián)變量，這樣的變量只能在for循環(huán)內(nèi)部能夠使用。
舉個(gè)例子：
for(let i = 0; i < 10; i++){
console.log(i);}console.log(i); //報(bào)錯(cuò)，i is not defined.如下圖：
.jpg)
造成這種結(jié)果的原因是，i是for的局部變量，當(dāng)for語(yǔ)句執(zhí)行完畢后立即被銷毀，后面的程序是無(wú)法使用的。
提醒：如果你執(zhí)行以上代碼并沒(méi)有出現(xiàn)錯(cuò)誤，很有可能是在for語(yǔ)句之前就定義了變量
i。
當(dāng)然，我們也可以不使用局部變量：
let i = 0;for(i = 0; i < 10; i++){
console.log(i);}console.log(i);// 10這樣我們就可以在for語(yǔ)句外面使用條件變量了！
語(yǔ)句省略
for語(yǔ)句中的任何部分都是可以省略的。
例如，省略begin語(yǔ)句：
let i = 0;for (; i < 10; i++) { // 不再需要 "begin" 語(yǔ)句段
alert( i );}例如，省略step語(yǔ)句：
let i = 0;for (; i < 10;) {
alert( i++ );//循環(huán)變量的修改在循環(huán)體中}例如，省略循環(huán)體：
let i = 0;for (; i < 10;alert( i++ )) {
//沒(méi)有循環(huán)體}break
正常情況下，循環(huán)語(yǔ)句需要等待循環(huán)條件不滿足（返回false），才會(huì)停止循環(huán)。
但是我們可以通過(guò)break語(yǔ)句提前結(jié)束循環(huán)，強(qiáng)制退出。
舉個(gè)例子：
while(1){//死循環(huán)
let num = prompt('輸入一個(gè)數(shù)字',0);
if(num > 9){
alert('數(shù)字太大了');
}else if(num < 9){
alert('數(shù)字太小了');
}else{
alert('真聰明，循環(huán)結(jié)束');
break;//結(jié)束循環(huán)
}}以上代碼是一個(gè)猜數(shù)字的游戲，循環(huán)條件永遠(yuǎn)是1，也就是說(shuō)循環(huán)永遠(yuǎn)不會(huì)結(jié)束，但是當(dāng)輸入數(shù)字9后，就會(huì)使用break強(qiáng)制結(jié)束循環(huán)。
這種無(wú)線循環(huán)加上break的形式在實(shí)際編程場(chǎng)景中非常常見(jiàn)，建議用小本本記下來(lái)。
continue
continue可以停止當(dāng)前正在執(zhí)行的單次循環(huán)，立即開(kāi)始下一次循環(huán)。
舉個(gè)例子：
for(let i = 1;i < 100; i++){
if(i % 7)continue;
console.log(i);}以上代碼輸出100以內(nèi)的所有7的倍數(shù)，當(dāng)i % 7不為0，也就是說(shuō)i不是7的倍數(shù)的時(shí)候，執(zhí)行continue語(yǔ)句，直接跳過(guò)后面的語(yǔ)句，執(zhí)行下一次循環(huán)。
break/continue標(biāo)簽
在多層循環(huán)嵌套的情況下，會(huì)有這樣一個(gè)問(wèn)題，怎樣從多重循環(huán)中跳出整個(gè)循環(huán)體呢？
例如：
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let input = prompt(`Value at coords (${i},${j})`, '');
// 如果我想從這里退出并直接執(zhí)行 alert('Done!')
}}alert('Done!')break標(biāo)簽
如果我們需要在，用戶輸入0時(shí)，直接讓程序執(zhí)行alert('Done!')應(yīng)該怎么做呢？
這就需要使用標(biāo)簽，語(yǔ)法如下：
label:for(...){
...
break label;}break label語(yǔ)句可以直接無(wú)條件的跳出循環(huán)到標(biāo)簽label處。
例如：
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let input = prompt(`Value at coords (${i},${j})`, '');
// 如果用戶輸入0，則中斷并跳出這兩個(gè)循環(huán)。
if (input=='0') break outer; // (*)
}}alert('Done!');上述代碼中，break outer 向上尋找名為 outer 的標(biāo)簽并跳出當(dāng)前循環(huán)。
因此，控制權(quán)直接從 (*) 轉(zhuǎn)至 alert('Done!')。
continue標(biāo)簽
我們還可以使用continue label直接結(jié)束當(dāng)前循環(huán)，開(kāi)始下次循環(huán)：
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let input = prompt(`Value at coords (${i},${j})`, '');
// 如果用戶輸入0，則中斷并跳出這兩個(gè)循環(huán)。
if (input=='0') continue outer; // (*)
}}alert('Done!');continue outer可以直接結(jié)束多重循環(huán)的最外層循環(huán)，開(kāi)始下一次循環(huán)。
例如當(dāng)我們?cè)?code>(0,0)處輸入0，那么程序會(huì)直接跳到(1,0)處，而不是像break一樣直接結(jié)束整個(gè)循環(huán)。
注意：
標(biāo)簽并不是隨便跳轉(zhuǎn)的，必須符合一定的要求
例如:
break label;label: for(...){...}就是不正確的。
課后作業(yè)
利用
console.log()方法，使用循環(huán)輸出以下圖形：
* ** *** **** ***** ******
利用雙重循環(huán)，創(chuàng)建一個(gè)
3X3的矩陣，并讓用戶可以輸入矩陣數(shù)據(jù)。
以上就是“JavaScript循環(huán)語(yǔ)句有哪些及怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題：JavaScript循環(huán)語(yǔ)句有哪些及怎么用
當(dāng)前鏈接：http://m.jiaotiyi.com/article/jdpgsp.html