iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
Modern Web

超低腦容量學習法遇到javascript系列 第 5

各種迴圈for/while/do while的使用時機

  • 分享至 

  • xImage
  •  

回想起第一次學程式時,那時是課堂上的c語言,大概到巢狀迴圈的單元,我就攤手放棄了,後面發生了什麼事,其實我都想不起來了..所以對迴圈一直有種特別的感情,好像跨過了它,我的人生就進階了... 現在看來,好像有點天真XD

迴圈的最主要功能是把重複做的事,用一段code執行就好。有時候我們還沒開始寫的時候就知道,這裡用迴圈合理;有時候是寫完了才發現,這邊和那邊其實是做一樣的事,整理到一起比較好,這樣其實是遵從"Dont Repeat Yourself"的原則,能增進程式碼管理的效率與便利性。

for/while/do while使用時機

一個簡單的原則來區分使用的時機:知道有幾圈用for,不確定會跑幾圈的用while。下面用幾個例子來說明

  • 倒數器:寫一個函式,可指定從特定數字倒數至0。我們一開始就會知道這個迴圈要跑幾圈,所以用for適合
const countDown = function (input) {
  for (let i = input; i >= 0; i--) {
    console.log(i);
  }
};
countDown(10); // 10 9 8 7 6 5 4 3 2 1 0
  • 除法器:寫一個函式,可計算一個指定值要除以3幾次之後,其商會小於0.01。因為實際上無法預測要除幾次會小於0.01,所以用while適合。
let times = 0;
const dividorLoop = function (input) {
  while (input > 0.01) {
    input = input / 3;
    times++;
  }
  return times;
};
console.log(dividorLoop(1));
  • 請使用者輸入密碼:因為無法確定使用者會到第幾次才輸入正確的密碼,故用while,但因為要先問,再判斷是不是要再重問一次,所以用do while
const correctPassword = "password123";
let userPassword;
do {
  userPassword = prompt("請輸入密碼: ");
} while (userPassword !== correctPassword);

alert("密碼正確!");

盡量不要寫for loop是什麼意思

本來還在想這篇文就這樣會不會有點敷衍,然後看到了一個有趣的文:
糙 code 出沒請小心!! 在 JavaScript 寫 for-loop
嗯..就我們家mentor說

自從學了 JavaScript 之後,就很少寫 for-loop 了!!!

這是什麼意思,for loop有什麼問題?for loop錯了嗎?!

以我個人來說,如果遇到array是會用array method處理,但其他的問題就會直覺的用迴圈,難道說,不是array的問題會推薦把它轉成array用array method嗎?

親自詢問作者本人之後,是的,他就是這個意思。不過到底是為什麼呢?我們用下面兩個例子比較一下。

如果我們想連加30個1,用迴圈會寫這樣。我們必須想清楚每一圈loop的執行狀況,比如說i=30時就是第31個1了,所以終止條件必須寫i<30而非i<31。

let sum = 0;
for (let i = 0; i < 30; i++) {
  sum = sum + 1;
}

console.log(sum);

換句話說,for的條件其實是與我們要處理的問題無關,而是一種流程,像是修改一下i的初始與終止值,也不會影響結果,因為那是過程而已

let sum = 0;
for (let i = 100; i < 130; i++) {
  sum = sum + 1;
}

console.log(sum);

而轉成array用array method處理會變這樣。我們只要專心處理reduce method裡的callback function就可以,問題會單純化。

const result = new Array(30).fill(1) //製造5個1的array
  .reduce((acc, item) => acc + item);
  
console.log(result);

今日總結

如果是針對標題來說的話,使用時機則是,哇..盡量不要使用耶!盡量避免處理迴圈的想法大概可以榮獲今日價值觀衝擊寶座,未來還得再多多體會一下。
tl:dr: 已知迴圈圈數用for, 未知用while系列;用array method取代迴圈能降低腦力的loading


上一篇
Hoisting它到底是不是個好東西?
下一篇
理解遞迴
系列文
超低腦容量學習法遇到javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言