WEBVTT

00:00:01.082 --> 00:00:04.244
我們回到那顯示我的陣列 (array) 朋友的程式

00:00:04.244 --> 00:00:06.854
但是有一些事真的惹惱了我

00:00:06.854 --> 00:00:09.472
每次我添加一個新朋友到陣列中 都要補充

00:00:09.472 --> 00:00:11.403
一個新的文字命令 (text command) 到這裡

00:00:11.403 --> 00:00:13.232
假設我加了溫斯頓

00:00:13.232 --> 00:00:15.333
他不會自動顯示出來

00:00:15.333 --> 00:00:19.915
如果我要他露面 我得說 
text(myFriends[3],

00:00:19.915 --> 00:00:23.093
然後更改位置 y 
才可以看到溫斯頓

NOTE Paragraph

00:00:23.093 --> 00:00:24.982
這實在是很麻煩

00:00:24.982 --> 00:00:28.382
我希望每次加入別人到陣列時
他都會自動顯示出來

00:00:28.385 --> 00:00:31.308
程式會自動做那個文字命令

00:00:31.308 --> 00:00:34.396
好了 還記得我們學過迴圈嗎？

00:00:34.397 --> 00:00:38.546
迴圈是個偉大的方式
可以多次重複相同的代碼

00:00:38.546 --> 00:00:43.307
就像 如果我們想要有連續的一堆樹木
或一串氣球

00:00:43.307 --> 00:00:49.767
事實證明 迴圈也是陣列的元素上運行代碼中
很棒的方式

00:00:49.777 --> 00:00:53.617
事實上 每次使用陣列時 你幾乎都會用到迴圈

00:00:53.617 --> 00:00:57.348
他們一起工作真的很配

00:00:57.348 --> 00:01:00.088
為了讓你明白我的意思
我不用文字命令

00:01:00.088 --> 00:01:03.698
而是用一個迴圈
來顯示我朋友名字

00:01:03.698 --> 00:01:07.683
我們將從三個問題開始
當我們做迴圈時 總是會問自己

00:01:07.683 --> 00:01:10.992
首先 我想重複的是什麼？ 
看過內容後，什麼是重複的？

00:01:10.992 --> 00:01:13.042
就是文字命令 (text command)

00:01:13.042 --> 00:01:16.564
我每次想改變什麼？ 
就讓我看看有什麼不同

00:01:16.564 --> 00:01:20.004
位置 y 和當前的索引指數 (index) ，是吧？

00:01:20.004 --> 00:01:25.613
就是 NUM 這位朋友和位置 y

00:01:25.613 --> 00:01:28.138
那我們應該重複多久？ 


00:01:28.138 --> 00:01:32.940
繼續下去 直到沒有其它朋友

00:01:32.940 --> 00:01:36.970
好 現在我們知道想要什麼
可以做個迴圈

00:01:36.970 --> 00:01:40.523
我們從計數器變量 (counter variable) 
開始追蹤迴圈位置

00:01:40.523 --> 00:01:44.352
所以我們說 var friendNum = 0;

00:01:44.352 --> 00:01:48.567
計數從零開始
因為 0 是陣列中的第一個元素

00:01:48.567 --> 00:01:50.518
1 不是第一個元素

00:01:50.518 --> 00:01:57.848
我們有 while 迴圈 所以我們說
while(friendNum < my friends.length)

00:01:57.869 --> 00:02:03.967
現在我們要比較
當下計數器變量與陣列中元素的總數

00:02:03.967 --> 00:02:07.248
迴圈中 這裡是使用文字命令處

00:02:07.248 --> 00:02:09.182
我們說 text(myFriends[

00:02:09.182 --> 00:02:15.381
而這裡我們放 friendNum 不放數字 
因為 friendNum 代表當前的數量


00:02:15.381 --> 00:02:18.279
我們目前為止只放一個位置 y

00:02:18.279 --> 00:02:22.092
OK 這給了我們一個無限迴圈的錯誤 


00:02:22.092 --> 00:02:25.663
因為我們還沒有改變 friendNum

00:02:25.663 --> 00:02:27.772
請記住 每次迴圈都需要遞增 friendNum

00:02:27.772 --> 00:02:32.646
否則條件為真 迴圈會永遠繼續下去

00:02:32.646 --> 00:02:38.213
我看到某些事情發生了 
讓我註釋掉舊代碼 看看發生了什麼事

00:02:38.213 --> 00:02:43.542
我們想現出所有的名字 但是他們都被蓋掉了

00:02:43.543 --> 00:02:45.256
因此 我們需要改變位置 y

00:02:45.256 --> 00:02:49.798
讓我們就說 'friendNum*30'


00:02:49.798 --> 00:02:52.289
這很好 但索菲亞關閉銀幕


00:02:52.289 --> 00:02:55.426
索菲亞如果發現了這一點 她會很不高興

00:02:55.426 --> 00:02:59.648
那就讓我們加 30 
現在全部都差距 30

00:02:59.648 --> 00:03:04.051
好棒！現在你看 我們有顯示陣列的迴圈

00:03:04.051 --> 00:03:09.119
這意味著如果我們增加更多的人
像是蓋伊 或者是薩爾 Sal

00:03:09.119 --> 00:03:11.743
如果我只加 薩爾 Sal 到陣列
薩爾他會成為我的朋友

00:03:11.743 --> 00:03:13.702
真棒！現在 他是我哥們了

00:03:13.702 --> 00:03:18.283
呃... 你可以看到 新朋友是自動顯示

00:03:18.283 --> 00:03:20.886
因為它始終排在陣列裡


00:03:20.886 --> 00:03:24.305
我們可以刪除舊代碼
因為不再需要它

00:03:24.305 --> 00:03:28.566
我們檢視整個代碼 並查看它是在做什麼

00:03:28.566 --> 00:03:31.445
我們從 friendNum 等於零開始

00:03:31.458 --> 00:03:34.354
我們檢查看看 friendNum 是否小於當前長度

00:03:34.354 --> 00:03:37.706
你可以想像 0 比 6 小 確實如此

00:03:37.706 --> 00:03:41.940
於是 我們從這裡進去 
我們說 我的朋友 friendNum

00:03:41.940 --> 00:03:44.618
所以這將是我的第零個朋友 第一次

00:03:44.618 --> 00:03:47.588
然後 30 加上 0 乘以 30

00:03:47.588 --> 00:03:53.750
它顯示索菲亞在位置 10 和 30 上
就是這樣的

00:03:53.771 --> 00:03:56.550
然後用 friendNum ++
於是 friendNum 就變成 1

00:03:56.550 --> 00:03:59.220
然後它返回說：
1 比 myfriends.length 的長度小嗎？

00:03:59.220 --> 00:04:00.041
是啊 沒錯

00:04:00.041 --> 00:04:02.012
迴圈這樣一直保持下去...

00:04:02.012 --> 00:04:07.452
最後我們來到薩爾
記住 薩爾在陣列中其實是第六元素

00:04:07.452 --> 00:04:11.052
但他的索引指數 (index) 是 5 
因為指數從零開始

00:04:11.052 --> 00:04:13.803
那麼 5 比 6 小？是

00:04:13.803 --> 00:04:16.032
因此 顯示 myfriends 等於 5

00:04:16.032 --> 00:04:20.222
然後 它變成 6 
我們問 6 比 6 小嗎？

00:04:20.239 --> 00:04:23.168
錯！ 6 等於 6
因此這是錯誤的

00:04:23.168 --> 00:04:25.608
因此 它永遠不會顯示第六個元素

00:04:25.608 --> 00:04:29.807
這很好 因為指數 6 沒有任何人

00:04:29.807 --> 00:04:33.328
有第六元素 但沒有人在指數六

00:04:33.328 --> 00:04:37.009
這可能令人混淆 他是 0 也是 1

00:04:37.009 --> 00:04:40.068
但你終究會領悟的

00:04:40.068 --> 00:04:42.178
好吧 這就是我們的迴圈

00:04:42.198 --> 00:04:45.228
現在 如果你願意嘗試使用迴圈
可使用 for 迴圈

00:04:45.228 --> 00:04:46.660
前提是你想從 for 迴圈開始嘗試

00:04:46.660 --> 00:04:52.561
有關 for 迴圈 我們說 
for var friendNum = 0;

00:04:52.561 --> 00:04:57.951
然後有
friendNum < myFriends.length 這個條件

00:04:57.951 --> 00:05:01.591
然後我們增量：friendNum ++

00:05:01.591 --> 00:05:06.772
for 迴圈中 我們可以把剛才那行代碼放在這裡

00:05:06.772 --> 00:05:12.662
我只是改變 x 
可以看到 for 迴圈是完全一樣的東西

00:05:12.662 --> 00:05:17.094
取決於你使用哪一種迴圈 
重點是 把迴圈用於陣列

00:05:17.094 --> 00:05:19.285
因為它會讓你變得很厲害