JavaScript 程式迴圈結構詳解

阿新 • • 發佈：2021-12-07

選擇結構

單分支的if結構

if(條件){
條件滿足後執行的程式碼
}

如果大括號中只有一條語句，此時可以省略大括號，但是強烈不建議這樣寫

if(條件)
	console.log('點點點')

二分支if結構語句

if (條件){
條件滿足後執行的程式碼
}
else{
條件不滿足後執行的程式碼
}

多分支if結構語句

if(條件1){
程式碼1
}
else if(條件2){
程式碼2
}
......
else{
以上條件都不滿足執行的程式碼
}

switch結構

var today=1
switch(today){
	case 1:
		console.log('工作日')
		break
	case 2:
		console.log('工作日')
		break
	case 3:
	case 4:
	case 5:
		console.log('工作日')
		break
	default
		console.log('休息日')
		break

switch和if得區別

switch 只能進行等值得判斷if
沒有限制適合某個連續區間得判斷

迴圈結構

重複性的執行某個操作就是迴圈

while

//迴圈10次
var i=1
while(i<=10){
console.log('111111')
i++
}
//案例：計算100以內整數之和
var i=1
var sum = 0
while(i<=100){
 sum+=i
 i++
}

案例
 在頁面輸出[1,200]之間所有能被7整除，但不能被4整除的所有整數，並統計個數，同時要求輸出每行顯示5個
var i=1
var count = 0
while(i<=200){
	if(i%7==0 && i%4!=0){
		document.write(i+"&nbsp;&nbsp;&nbsp;&nbsp;")
		count++;//統計個數
		// 判斷每輸出5個換一行
		if(count%5==0){
		document..write('<br>');
		}
	}
	i++;
	document.write('<br>共計: '+count+'個')

do … while

先執行程式碼，再判斷條件

var i=1;
        do{
            console.log('好好學習,天天向上!')
            i++;
        }while(i<=10)
  #案例
  #計算1-50之間得倍數
      <script type="text/">
        var i=1;
        var sum=0;
        do{
            if(客棧i%6==0){
                sum+=i
            }
            i++;
        }while(i<=50)
        console.log(sum程式設計客棧)
    </script>
#案例
# 迴圈提示使用者輸入5個數，按q結束,然後輸出其中最大值和最小值
#先提示使用者輸入一次，然後將該數字作為最大值和最小值
var num=Number(prompt('請輸入一個徵屬(按q結束):'))
 var max=num;
var min=num;
var flag=true //標識是否繼續迴圈
var i = 1;
do{
var num=Number(promot('請輸入一個整數!'))
#判斷使用者是否輸入q
if(num=='q'){
flag=false  //如果輸入q則將flag改為false，表示停止迴圈
}else{
num=Number(num)
if(num>max){
	max=num;
}
if (num<min){
min=num
}
}while(flag)
console.log(max)
console.log(min）

for 迴圈

語法

for(初始化:條件:迭代){
程式碼塊
}

迴圈開始時先執行初始化部分，而且初始化部分只執行一次

初始化執行完之後就去判斷條件是否成立，如果成立則執行程式碼塊，然後執行迭代部分

for … in …

對集合資料進行遍歷

迴圈遍歷是遍歷到的資料在集合中的索引順序(從0開始)，而非資料本身

<script type="text/script">
        var str = 'abc'
        for(var index in str){
            console.log(index,str[index])
        }
    </script>

在這裡插入圖片描述

for …of…

對集合資料進行迭代遍歷

這是直接拿到值

<script type="text/javascript">
        var str = 'abc'
        for(var index of str){
            consYYwIWole.log(index)
        }
    </script>

在這裡插入圖片描述

小結

迴圈次數確定時一般使用for
迴圈次數不確定時一般使用while和do…while
對集合進行遍歷時使用 for…in和for…of

終止迴圈

break

break跳出整個迴圈，終止迴圈的執行

案例

//當1-20之間整數相加，當累加值大於66時停止相加，輸出當前整數和累加值
var sum=0
for(var i=1;i<=20;i++){
	sum+=1
	if(sum>66){
	break
}
}

continue

跳出本次迴圈,執行下一次迴圈，本次迴圈尚未執行完

//計算1-10之間所有偶數和
var sum=0;
for(var i=1;i<=10;i++){
	if(i%2!=0){
	continue
	}
	sum+=i
}

二層迴圈

一個迴圈巢狀著另一個迴圈，成為二重迴圈，各種迴圈可以相互巢狀

外層迴圈變數變化一次，內層迴圈執行一邊

//案例
//某次程式大賽，共有三個班級參加，每個班級4名學生，輸入各班級每個學生成績，然後計算各班級平均分
for(var i=1;i<=3;i++){
	alert('請輸入第'+i+'個班級學生資訊---')
	//內層迴圈控制班級學生數量
	var sum=0
	for(var j=1;j<=4;j++){
	var score=Number(prompt('請輸入第'+j+'個學生成績:'))
	sum+=score;
}
	console.log('第'+i+'個班級平均分為:'+sum/4)
}

  <script type="text/javascript">
        for(var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                document.write(j+'*'+i+'='+i*j+'&nbsp;&nbsp')
            }
            document.write('<br>')
        }
    </script>

在這裡插入圖片描述