關於JS迴圈效率小實驗

最近工作的時候遇到了一個需求，後臺返回三維陣列，為了避免一直對後臺請求，由前端把資料放到了本地進行狀態的更改。最開始的想法是因為是三維陣列所以肯定會利用到幾次迴圈，為了簡化程式碼，我先是使用了find方法去查詢元素。利用三次find方法找到了我想要的資料然後進行更改。但是find方法會有相容性問題，雖然看起來簡便但是我覺得並不是很友好的方案。所以，我分別利用for,for in, indexOf,find遍歷陣列檢視效率（每個方法只進行了三次記錄，而且在chrome瀏覽器，沒有測試其他瀏覽器）。這裡沒有使用foreach方法是因為foreach會把所有的陣列都迴圈，不能中斷，所以我淘汰了這個方法。

for迴圈我使用了break來增加效率。最後得到的資料:

find方法：1265，1255，1172；

for迴圈方法：103，106，102；

for in 方法：19301，19287，19288；

indexOf方法：92，85，86；

從資料看出，indexOf方法是最快的，但是也會出現相容性，除此以外就是for迴圈最快了。雖然for迴圈很麻煩，但是效率確實是最高的。所以我確認使用for迴圈在專案中，但是三個for迴圈還要加上if判斷最後還有邏輯的處理層級太多，對於以後的需求改變會很麻煩，所以不能直接巢狀for迴圈來取值。我就想解耦，把for迴圈拆分開。

把三個迴圈分開，最後在利用x,y,z來處理邏輯。這樣就把迴圈和邏輯分開了。這是自己想到的辦法，有更好的辦法感謝簡友分享。