# U2.1、 學習像電腦一樣思考
###### tags: `ALG 101` `JavaScript` `2020七月第三週` `進度筆記` `Lidemy心得` `7/15`

學著不要太急著寫程式碼，寫程式和寫程式碼是兩回事，文章和寫字也是兩回事，在腦中想怎麼寫。

---

其實我們要理解程式碼，同時在腦海中有個大概這邊要怎麼執行。

例題，陣列加總:

虛擬碼步驟:
腦海中的執行流程。

1. 先假設 array = [1, 2, 3] ， 也就是元素 n ， 這邊有三個元素 。
2. 設定 sum = 0
3. 我們讓 i 從 0 跑到整個元素完， n-1 也就是 2 。
4. i 現在是 0 ， 因為迴圈第一圈。
5. sum += arr[0] ， 因為 ， sum 起始是 0 + 迴圈第一圈， 0+1=1 。
6. 下一圈迴圈。
7. i 開始是 1 ， 還沒超過 2 。
8. sum+= arr[1] 現在是 3 。
9. 下一圈迴圈。
10. i 現在是 2 。
11. sum+= arr[1] 現在 sum 是 3+3=6 。
12. 下一圈。
13. i 現為 3 ， 超過 n-1 ， done 。
14. 輸出 sum 。

---

找最大值，範例:


自己try:

1. 先假定最大值為陣列中的起始值。
2. 我們判斷一個值從 0 是整數開始到陣列的最後一個元素 n ， 為 n-1
3. 一直做下去，直到陣列內的值大於最大值。
4. 條件是跑到最大值 = 陣列內的最大值。
5. 這時候終止假設最大值。
6. 終止迴圈。
7. 印出最大值。

解:
1. 假設 arr 是 元素 [2, 7, 5]。
2. 讓 max 為 arr[0] ， 為 2 。
3. let i from 0 做到 2 。
4. i 現在是 0 。
5. 我們要判斷 arr[0] 有沒有 > 2 。
6. 不是。
7. 下一圈迴圈。
8. i 現在是 1 。
9. 判斷 arr[1] 有無 > 2 。
10. 如果 > 2 ，設 max 為 arr[1] ， 7 。
11. 下一圈。
12. i 現為 2 。
13. 「判斷 arr[2] 是否 > 7」 。
14. 不是，因為 5 沒有 > 7。
15. 下一圈。
16. i 現在是 3 超過條件，因此結束。
17. 輸出 max 。

---

# U2.2、 把自己當成編譯器
###### tags: `ALG 101` `JavaScript` `2020七月第三週` `進度筆記` `Lidemy心得` `7/15`

可以翻譯程式碼成步驟的方式。
沒有訣竅，一行一行練習。
看真的程式碼。

---

最大值的 JS 範例:

let max = arr[0]
for(let i=); i<arr.lemgth; i++) {
if(arr[i]>max) {
max = arr[i]
}

}
console.log(max)

虛擬碼應該不會真正的程式碼差太多。

一樣熟悉這個步驟:
1. 假設 arr 是 元素 [2, 7, 5]。
2. 讓 max 為 arr[0] ， 為 2 。
3. let i from 0 做到 2 。
4. i 現在是 0 。
5. 我們要判斷 arr[0] 有沒有 > 2 。
6. 不是。
7. 下一圈迴圈。
8. i 現在是 1 。
9. 判斷 arr[1] 有無 > 2 。
10. 如果 > 2 ，設 max 為 arr[1] ， 7 。
11. 下一圈。
12. i 現為 2 。
13. 「判斷 arr[2] 是否 > 7」 。
14. 不是，因為 5 沒有 > 7。
15. 下一圈。
16. i 現在是 3 超過條件，因此結束。
17. 輸出 max 。

---

# U2.3、 除蟲利器
###### tags: `ALG 101` `JavaScript` `2020七月第三週` `進度筆記` `Lidemy心得` `7/15`

Debugger 。
容易偵錯的方法。

---

## Chrome Devtool Debugger
這是設計來可以一行一行看程式碼的偵錯方法。

以找最大值為範例，檔案存成 html 格式:

<script>
debugger //一定要加，有加才會跳到 source 視窗;
let arr = [2, 7, 5]
let max =arr[0]
for(let i = 0; i<arr.length; i++) {
if(arr[i] > max) {
max=arr[i]
}
}
console.log(max)
</script>
存檔後可以直接執行瀏覽看看。

---

# U2.4、 多利用 `log`
###### tags: `ALG 101` `JavaScript` `2020七月第三週` `進度筆記` `Lidemy心得` `7/15`

簡單有效，加 log 加到爆~
看 log 有沒有照預期跑。
用 dubugger 環境要先弄好，如果只是看值有沒有像預期一樣，就可以先加 log 。

---
## 以找最大值為範例，檔案存成 html 格式，對其加 log 到爆:

<script>
let arr = [2, 7, 5]
let max =arr[0]
console.log('max:', max)
for(let i = 0; i<arr.length; i++) {
console.log('i=', i, 'arr[i]=', arr[i])
if(arr[i] > max) {
console.log('found new max!')
console.log('arr[i]:', arr[i], 'old max:', max)
max=arr[i]
console.log('new max:', max)
}
}
console.log(max)
</script>

初始值，迴圈，執行條件 if 、 max 值都加 log 。
可以從 log 中判斷，執行的值是否符合預期。

---

## Chrome debugger 小 bug

最後 push 進去的值，在重新整理頁面的時候，可能會混淆在一開始 `let arr = [2, 7, 5]` 的時候是 [2, 7, 5, 3] ，
但其實是最後 push 時的值，在 obj 上也是這種狀況。

<script>
let arr = [2, 7, 5]
console.log(arr) // 2, 7, 5
let max =arr[0]
for(let i = 0; i<arr.length; i++) {
if(arr[i] > max) {
max=arr[i]
}
}
arr.push(3) // 2, 7, 5, 3
console.log(max)
</script>

## 解決方法，加個字串:

<script>
let arr = [2, 7, 5]
console.log(JSON.stringify(arr)) // 在這時候把 arr 保存起來變成字串
let max =arr[0]
for(let i = 0; i<arr.length; i++) {
if(arr[i] > max) {
max=arr[i]
}
}
arr.push(3) // 2, 7, 5, 3
console.log(max)
</script>

這時候再改變變數就無法，因為 log 出來是字串，而不是變數。
但這樣就無法看詳細的值，只能看最正確的值。
只有在程式碼最末端把值回傳到第一行時去改成字串有差。

---
** 圖片均為上課教材中所擷取供本人學習使用。