我們回到那顯示我的陣列 (array) 朋友的程式

但是有一些事真的惹惱了我

每次我添加一個新朋友到陣列中 都要補充

一個新的文字命令 (text command) 到這裡

假設我加了溫斯頓

他不會自動顯示出來

如果我要他露面 我得說 
text(myFriends[3],

然後更改位置 y 
才可以看到溫斯頓

這實在是很麻煩

我希望每次加入別人到陣列時
他都會自動顯示出來

程式會自動做那個文字命令

好了 還記得我們學過迴圈嗎？

迴圈是個偉大的方式
可以多次重複相同的代碼

就像 如果我們想要有連續的一堆樹木
或一串氣球

事實證明 迴圈也是陣列的元素上運行代碼中
很棒的方式

事實上 每次使用陣列時 你幾乎都會用到迴圈

他們一起工作真的很配

為了讓你明白我的意思
我不用文字命令

而是用一個迴圈
來顯示我朋友名字

我們將從三個問題開始
當我們做迴圈時 總是會問自己

首先 我想重複的是什麼？ 
看過內容後，什麼是重複的？

就是文字命令 (text command)

我每次想改變什麼？ 
就讓我看看有什麼不同

位置 y 和當前的索引指數 (index) ，是吧？

就是 NUM 這位朋友和位置 y

那我們應該重複多久？

繼續下去 直到沒有其它朋友

好 現在我們知道想要什麼
可以做個迴圈

我們從計數器變量 (counter variable) 
開始追蹤迴圈位置

所以我們說 var friendNum = 0;

計數從零開始
因為 0 是陣列中的第一個元素

1 不是第一個元素

我們有 while 迴圈 所以我們說
while(friendNum < my friends.length)

現在我們要比較
當下計數器變量與陣列中元素的總數

迴圈中 這裡是使用文字命令處

我們說 text(myFriends[

而這裡我們放 friendNum 不放數字 
因為 friendNum 代表當前的數量

我們目前為止只放一個位置 y

OK 這給了我們一個無限迴圈的錯誤

因為我們還沒有改變 friendNum

請記住 每次迴圈都需要遞增 friendNum

否則條件為真 迴圈會永遠繼續下去

我看到某些事情發生了 
讓我註釋掉舊代碼 看看發生了什麼事

我們想現出所有的名字 但是他們都被蓋掉了

因此 我們需要改變位置 y

讓我們就說 'friendNum*30'

這很好 但索菲亞關閉銀幕

索菲亞如果發現了這一點 她會很不高興

那就讓我們加 30 
現在全部都差距 30

好棒！現在你看 我們有顯示陣列的迴圈

這意味著如果我們增加更多的人
像是蓋伊 或者是薩爾 Sal

如果我只加 薩爾 Sal 到陣列
薩爾他會成為我的朋友

真棒！現在 他是我哥們了

呃... 你可以看到 新朋友是自動顯示

因為它始終排在陣列裡

我們可以刪除舊代碼
因為不再需要它

我們檢視整個代碼 並查看它是在做什麼

我們從 friendNum 等於零開始

我們檢查看看 friendNum 是否小於當前長度

你可以想像 0 比 6 小 確實如此

於是 我們從這裡進去 
我們說 我的朋友 friendNum

所以這將是我的第零個朋友 第一次

然後 30 加上 0 乘以 30

它顯示索菲亞在位置 10 和 30 上
就是這樣的

然後用 friendNum ++
於是 friendNum 就變成 1

然後它返回說：
1 比 myfriends.length 的長度小嗎？

是啊 沒錯

迴圈這樣一直保持下去...

最後我們來到薩爾
記住 薩爾在陣列中其實是第六元素

但他的索引指數 (index) 是 5 
因為指數從零開始

那麼 5 比 6 小？是

因此 顯示 myfriends 等於 5

然後 它變成 6 
我們問 6 比 6 小嗎？

錯！ 6 等於 6
因此這是錯誤的

因此 它永遠不會顯示第六個元素

這很好 因為指數 6 沒有任何人

有第六元素 但沒有人在指數六

這可能令人混淆 他是 0 也是 1

但你終究會領悟的

好吧 這就是我們的迴圈

現在 如果你願意嘗試使用迴圈
可使用 for 迴圈

前提是你想從 for 迴圈開始嘗試

有關 for 迴圈 我們說 
for var friendNum = 0;

然後有
friendNum < myFriends.length 這個條件

然後我們增量：friendNum ++

for 迴圈中 我們可以把剛才那行代碼放在這裡

我只是改變 x 
可以看到 for 迴圈是完全一樣的東西

取決於你使用哪一種迴圈 
重點是 把迴圈用於陣列

因為它會讓你變得很厲害