iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0

前言

昨天提到JavaScript的判斷式,今天進入到無限的轉圈圈

Day23 常數補充

const有兩派的做法,一種是只把const用在從根本上就不會改變的值,像是物理的常數等等(如下面的程式)。

另一種做法是乾脆所有都宣告為const,只有在發現實際上必須允許其值變動時,才改宣告成let,可以幫忙避免臭蟲,因為排除了對於變數的意外變更。

const HO=74;//哈伯常數(Hubble constant,單位是km/s/Mpc)
const C=299792.458//真空中的光速(km/s)

程式的某些區塊,會因為條件判斷或是設定次數的關係一再重複執行,一直到不符合條件或達到設定次數以後才往下執行。

迴圈(loop) 可以幫助我們重複的執行程式區塊。

  • while迴圈

就像是if的描述句是JavaScript最基本的條件是,while也是JavaScript最基本的迴圈。

在開始先設定條件,當符合條件時執行指定程式,也就是根據條件決定是否要重複執行程式區塊,條件式會使用布林值

基本語法:

while(條件式){
	如果布林值是True,執行這個程式區塊
	執行完畢會跳到開頭重新再執行一次
}

只要條件式放True,就會因為判斷的每一次都是True,所以會因此無窮的產生迴圈,當然一般來說我們不會想要JavaScript一次次重複執行一模一樣的運算。

還有一種情形,如果沒有新增遞增指令時候,會因為持續都是一樣的數也會無窮產生迴圈,會很容易因為需要大量CPU,會讓電腦當掉,就需要開工作管理員強制關閉佔據大量記憶體的這個網頁。

while(True){
	執行的命令;
}

搭配變數跟判斷式來運作,

let x=0;
while(x<5){
	console.log(x);
	x++;//x=x+1
}

https://ithelp.ithome.com.tw/upload/images/20221011/20151470KwJjJQmGM1.jpg

for迴圈

跟while雖然差不多,但就是看起來語法變得較複雜

(但深入了解以後,發現因為把他們全部都放在,要執行迴圈的第一行,所以變得蠻能一眼就看清這個for迴圈想要做什麼,也能防止忘記初始化或是遞增迴圈變數等等的錯誤產生。)

初始化程式是指說,程式進入到迴圈以前執行一次。

for(初始化程式;布林值;每次轉圈時執行){
	如果布林值是True,執行這個程式區塊
	執行完畢會跳到開頭重新再執行一次
}
for(x=0;x<5;x++){
	console.log(x);
}

可以看到跟while的差別是,把最剛開始設定的x=0還有最下方的x++都放到for後面的小括號裡面,可以一次看到所有的變數跟判斷式。

也可以把初始化跟每次轉圈執行的程式,都跟while迴圈放同樣的位置,只是for後面小括號裡面判斷是有寫,然後一樣在前後有空兩個位置即可,出來的答案是一樣不變的,但如果我用下面這樣的寫法其實改成while就好(下面示範只是要描述寫這樣是也可以。)

let x = 0;
      for (; x < 5; ) {
        console.log(x);
        x++; //x=x+1
      }

再舉一個例子,如果讓a等於2,每次加上2直到a小於等於10,可以看到下面印出2到10。

//a+=2 => a=a+2
for (a = 2; a <= 10; a += 2) {
        console.log(a);
      }

https://ithelp.ithome.com.tw/upload/images/20221011/20151470SKmaBmkX99.jpg

再一個累加的練習,把n設置為1,然後判斷式是n<10,迴圈如果不加總,原本會是印出1~9,那現在就變成從1加到9,所以答案會是45。

let n = 1;
      let result = 0; //用來把n累加起來
      while (n < 10) {
        result = result + n; //把每個n累加起來
        n++; //n=n+1
      }
      console.log(result);

https://ithelp.ithome.com.tw/upload/images/20221011/20151470Nk3DFmk2iP.jpg

迴圈中還有一些指令

break指令 強迫中斷指令,可以

let x = 1;
      while (x < 3) {
        if (x == 1) {
          break;;//強迫結束迴圈
        }
        x++;
      }
      console.log(x);
      x++;

https://ithelp.ithome.com.tw/upload/images/20221011/20151470OTArOfChZH.jpg

continue指令

for(let x=1;x<3;x++){
        continue;//強迫回到迴圈的上方,忽略下面的指令,進入下一圈。
        console.log(x);//這時候這句命令就被忽略了
      }

再來個練習試試,當x=3時,因為if判斷式是true,強迫回到迴圈的上方,忽略下面的指令,進入下一圈。

for (let x = 1; x < 6; x++) {
        if (x == 3) {
          continue;
        }
        console.log(x);
      }

所以可以看到印出的結果裡面1到5少了3。
https://ithelp.ithome.com.tw/upload/images/20221011/20151470fTeay1z2mx.jpg

那如果我們想要取奇數呢?(就要用到前兩天教的%,取餘數的方式)

舉例x=0,條件是x<10,我們來看看印出來的答案如何。

for (let x = 0; x < 10; x++) {
        if (x % 2 == 0) { //x除以2餘數等於0的是True,只有偶數才會可以被2除盡
          continue; //強迫回到迴圈的上方,忽略下面的指令,進入下一圈。
        }
        console.log(x); //只要上面數字是偶數,這時候這句命令就被忽略了
      }

https://ithelp.ithome.com.tw/upload/images/20221011/201514708gfH9kFvdO.jpg


第二十六天挑戰完成,再四天就要完成挑戰了!

原本以為要跟著轉到眼花了

後來發現基本的概念不難,再來要逐步練習實際運用了。


上一篇
Day 25 JavaScript 判斷這樣做對嗎?
下一篇
Day 27 function 打包程式碼好用的函式~
系列文
一趟30天網頁設計的學習冒險#explain like i‘m five 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言