更新2024.08.19
Hi，大家好，我是Tony，是一個對於程式設計有一點點概念的超級新手。
挑戰第九天開始！
今天是個練習內容：JavaScript迴圈基礎練習-計算1+2+...+10
學習內容來自
彭彭老師JavaScript 流程控制：迴圈基礎(影片22:00左右開始)
https://www.youtube.com/watch?v=80zAVBeOvX0&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=17
昨天的學習內容：[Day 8] JavaScript 流程控制：迴圈基礎
https://ithelp.ithome.com.tw/articles/10344637
學過的數學中我們會運用公式：(上底+下底)*高/2，來得到累加的計算公式。
但在電腦運行中，我們用最笨的1+2+...+10直接讓這些數字相加即可！
因為電腦本身一秒中可以計算約10億個加法(看性能)，簡單數字計算的速度很快。
所以在使用迴圈時，只要用很簡單的邏輯去寫就可以了。
直接看語法
<script>
let n=1 //追蹤1、2、3...10
let result=0 //結果
while(n<=10){
result=result+n //把每一圈的n累加起來
n++ //每一圈n再+1
}
console.log(result) //最後跑出迴圈後印出result
</script>
網頁結果
可以看到得到答案是55
來看一下每一圈迴圈的執行內容
| 迴圈次數 | n | result | 備註 |
|---|---|---|---|
| 0 | 1 | 0 | (未開始迴圈就先這樣設定的) |
| 1 | 2 | 1 | (原本result=0+原本n=1,變成result是1，執行n+1變成2) |
| 2 | 3 | 3 | |
| 3 | 4 | 6 | |
| 4 | 5 | 10 | |
| 5 | 6 | 15 | |
| 6 | 7 | 21 | |
| 7 | 8 | 28 | |
| 8 | 9 | 36 | |
| 9 | 10 | 45 | |
| 10 | 11 | 55 | |
| 11 | (n<=10為false，所以跳出迴圈不執行) |
所以最後result印出的答案為55
接著使用for迴圈寫看看，彭彭老師的影片中後片卡掉了，
所以我只能用我學的試看看啦！(第一次展現自己的真實力?!)
<script>
let result=0
for(let n=1;n<=10;n++){
result=result+n
}
console.log(result)
</script>
網頁結果
耶！太好了，我有成功寫出來！
由於我們的初始程式有兩個 let n=1 與 let result=0
但for迴圈中好像只能放入一個初始程式？我不確定...
所以我把let result=0放在外面，其他就一樣填入for迴圈中。
至少網頁跑出來是成功的！
更新：感謝網友解答
原來把let result放在for迴圈外面是因為作用域的問題。
如果宣告變數只在迴圈內宣告，迴圈外的程式就會抓不到。
如上面我寫的console.log(result)是在迴圈外，所以let result再迴圈外才能訪問到。
把 let result 寫到 for迴圈裡的結果，這樣會出現 Reference error 的錯誤。
今天的學習先到這邊，希望有高手路過,可以幫我看看是否還有簡化或更正確的方式來寫這個for迴圈。
謝謝大家我們下次見！
let result 為什麼要放在 for 迴圈外面，這是因為作用域的問題。
如果你在 for 迴圈裡面宣告 let result，它的作用域就只侷限在 for 迴圈的區塊內，外面的 console.log 就無法訪問到 result 的值。
以下是把 let result 寫到 for 去的結果，這樣會噴 Reference error 的錯誤：
for (let i = 1; i <= 10; i++) {
let result = 0
result += i
}
console.log(result) // ReferenceError: result is not defined
建議你有空可以去看一下作用域。
另外，推薦你練習 JS 可以使用 Replit 這個網站。
感謝留言~
原來如此~知道原因了！謝謝。
感謝分享Replit網站，接下來有空就來玩玩。
iThome鐵人賽
看影片追技術