如何把想法轉成程式碼?

原來我還是不會寫程式

從平面轉職前端也快一年了，以為切切版，寫個 CSS 跟套個 jQuery 就是有跟程式碰到邊，結果不是，在進入專案開始處理 API 資料，get 跟 post 都傻傻分不清楚，拿到資料也不太會處理的時候，才知道我根本還不會寫程式。

新手寫程式問題

其中提到新手遇到的幾個問題，那就是我啊！

我就是那 1-3…

看不懂需求或題目…

是不是也有這種困擾，

所以要有一個橋梁幫助我，

用虛擬碼來寫。

先想流程，再想動作

以我自己為例，我拿到資料就想直接處理它，但卻忽略我為什麼要處理，該怎麼處理，哪個流程才需要處理資料，例如我今天從起床到睡覺，寫出一行一行的步驟，並把握以下原則：

1. 一行只做一件事。
2. 善用跳轉。(等等會說明)

實際例子說明：

學生的一天

1. 早上八點起床。
2. 吃早餐。
3. 如果公車來了，搭公車。
4. 如果公車沒來，搭捷運。
5. 到學校上課。
6. 放學。
7. 吃晚餐。
8. 睡覺。
9. 回到步驟 1。

可以發現有幾項為敘述，有幾項為條件判斷，有一項是跳轉。

1. 早上八點起床。(敘述)
2. 吃早餐。(敘述)
3. 如果公車來了，搭公車。(條件判斷)
4. 如果公車沒來，搭捷運。(條件判斷)
5. 到學校上課。(敘述)
6. 放學。(敘述)
7. 吃晚餐。(敘述)
8. 睡覺。(敘述)
9. 回到步驟 1。(重複，也就是跳轉)

透過重複的選項，可以製造出一個不斷循環的行為。

等人

1. 人來了嗎?(敘述)
2. 還沒，滑手機五分鐘。(條件判斷)
3. 來了，跳到第五步。(條件判斷)
4. 跳到第一步。(重複)
5. 一起去逛街。(敘述)

分析一下會有兩個狀況產生，

如果人還沒來，會是：

1. 人來了嗎?
2. 還沒，滑手機五分鐘。
3. 跳到第一步。

會一直重複。

如果人來了，會是：

1. 人來了嗎?
2. 來了，跳到第五步。
3. 一起去逛街。

所以可以看到，如果沒有符合判斷條件的狀況下，就會略過幾個步驟，也就是之後會很常使用的迴圈加上條件判斷的應用。

找出 1~100 的偶數

一開始看到這個題目的時候，就會很快想把心中的偶數得到，然後就卡住了…
但其實應該要拆解問題，變成下方步驟：

1. 找出 1~100 的數字。
2. 可以被 2 整除的就是偶數。

找出 1~100 的數字

似乎問題就變單純，且可以被執行，把這個題目寫成一步步可執行的步驟，先來找出 1~100 的數字。

1. 令 i 為 1。
2. 如果 i > 100，結束。
3. 印出 i 。
4. i = i+1。
5. 跳回第二行。

其中，第四個步驟非常重要，可以印出 1~100 的關鍵就是這個，因為如果沒有 i+1 的步驟，會一直重複只出現 1 這個數字，就永遠不會達到 100。

找出偶數

找到 1~100 的數字了，再來是要找偶數。
什麼是偶數，也就是可以被 2 整除的叫做偶數，若有餘數為 1 的稱為奇數。

EX. 2 除以 2 為 0，3 除以 2 為 1。

所以步驟可以改寫成這樣，

1. 令 i 為 1。
2. 如果 i > 100，結束。
3. 如果可以被 2 整除的為偶數，印出 i。
4. i = i+1。
5. 跳回第二行。

再更直覺一點可以改成這樣。

1. 令 i 為 1。
2. 如果 i > 100，結束。
3. 如果 i % 2 === 0，印出 i。
4. i = i+1。
5. 跳回第二行。

什麼是虛擬碼

虛擬碼就是把腦袋的想法轉成一步步可執行的步驟，然後再透過比較像程式碼的形式寫出來。
例如剛剛提到找出 1~100 的步驟。

1. 令 i 為 1。
2. 如果 i > 100，結束。
3. 印出 i 。
4. i = i+1。
5. 跳回第二行。

改成虛擬碼的話會是這樣，

1. let i = 1
2. if i > 100 then exit
3. print i
4. i = i+1
5. jump to line2

喔！好像跟程式碼有點像喔！
可以感覺得出來好像有迴圈加上條件判斷。

把虛擬碼改成程式碼

試著改寫成程式碼的話應該是：

for (let i = 1; i < 100; i++) {
  if (i % 2 === 0) {
    console.log(i); // 得到 2 4 6 8 10....98
  }
}

有發現到一件事情，似乎就是把中文的意思改寫成類似程式碼的敘述，
步驟的流程建議使用英文，因為要讓敘述的過程更貼近程式碼。

參考資料

1. 先別急著寫 leetcode