開始之前, 我想分享一個鼠年全馬的文章搜尋器
裡面有所有參賽者的所有文章, 想看什麼可以直接搜尋, 也能加入收藏
做的非常的棒呢~
不過我是用來看我每個禮拜的文章是不是有成功上傳xD

接著開始正題, 本週來解決上次講到非常沒效率的方式來撰寫重複性高的程式碼

for迴圈

像這種重複性高的程式碼可以直接使用迴圈的方式來撰寫
而迴圈寫法與多數程式語言都大同小異, 使用for做為迴圈起點, 並宣告一個變數來控制迴圈次數, 寫法如:

/*
 * 起始值通常為0
 * 終止值大多為陣列的長度
 * i++ 為"跑完一次迴圈就將i做++的動作"
 */
for(var i = 起始值; i < 終止值; i++) {
    // 迴圈內容...
}

這時候把上次的飯粒拿出來改寫

/* 原本的寫法
goToTrashCan(myBag[0]); // '稀有-暴風神弓 不符合條件'
goToTrashCan(myBag[1]); // '史詩-敏捷手套 不符合條件'
goToTrashCan(myBag[2]); // '成功將 一般-精靈之木 丟到垃圾桶'
*/
for(var i = 0; i < myBag.length; i++) {
    goToTrashCan(myBag[i]); 
}
// '稀有-暴風神弓 不符合條件'
// '史詩-敏捷手套 不符合條件'
// '成功將 一般-精靈之木 丟到垃圾桶'

結果是一樣的
乍看之下程式碼並沒有減少, 但假設今天包包如果有100項道具, 用原本的寫法就要寫100次, 使用for迴圈就一樣只要短短幾行
真是便宜又大碗~

forEach

這裡另外提到迴圈的另一種方法 - forEach
老實說, 在學會使用forEach之後, 除了一些特殊狀況外, 基本上都不再用for迴圈了
因為forEach必須搭配陣列來撰寫, 所以在不是陣列的用法時, 還是需要使用for
但這種狀況很少, 因為會用到迴圈基本上就跟陣列脫不了太大關係吧xD

而forEach寫法也是很直覺易懂的寫法, forEach帶入匿名函式, 匿名函式再帶入參數:

/*
 * item: 陣列內每一個內容
 * index: 陣列的索引(可省略)
 * array: 陣列本身(可省略)
 */
陣列本身.forEach(function(item, index, array){
    console.log(item, index, array); // 輸出陣列每個內容
});

如果使用forEach來改寫剛才那段

myBag.forEach(function(item){
    goToTrashCan(item); 
});

結果也會是一樣的, 但程式碼少使用了一個變數且陣列只要一開始叫用, 後面就沒它的事, 在日後維護也方便許多

以上都是上到想睡覺的 JavaScript 基礎觀念
這週較忙碌所以篇幅就相對少很多QQ
下週會來寫比較不會想睡的東西 - DOM, 以及怎麼使用選擇器(Selector)來取得並修改DOM