> 如果有記憶吐司就好了... # 實用陣列操作大全(filter、sort、map等) 熟練陣列的操作,是提升簡潔程式碼其中一個重要關鍵。以下挑出幾個在課堂中常見及課外常使用的方法。 ## 1.for...迴圈 ```javascript= let array=["小明","小美","小飛"]; for(let a=0;a<array.length;i++){ const person =array[i]; } ``` 覺得這個方法不錯的地方,是因為它可以被中斷(break)。例如:小明、小美、小飛一起參加三人團隊玩遊戲,但是小美中途退出不參與,導致整個遊戲中斷(break)沒辦法進行,就可以用以下寫法。 ```javascript= let array=["小明","小美","小飛"]; for(let a=0;a<array.length;a++){ if(array[a]=="小美") break; } ``` ## 2.forEach 將陣列中每個項目,帶入指定的函式內。可以帶入**三個參數** 1.現在的值(必須)2.索引:現在在陣列內是第幾個位置3.陣列:本身陣列的值 ```javascript= let a=[1,2,3]; let b=0; a.forEach(function(item){ b+=item; }); console.log(b); //6 ``` ## 3.map() 處理陣列每個元素,最後回傳一個新陣列。可以帶入**三個參數** 1.現在的值(必須)2.索引:現在在陣列內是第幾個位置3.陣列:本身陣列的值。 **適合運用在針對每個元素作運算。** ```javascript= let a=[1,2,3]; let b=a.map(function(item){ return item + 100; }); console.log(b); //[101,102,,103] ``` ## 4.filter() 將陣列中的每個元素,帶入指定函式去判斷,如果有符合條件則會回傳成為一個新陣列,可以帶入**三個參數** 1.現在的值(必須)2.索引:現在在陣列內是第幾個位置3.陣列:本身陣列的值。 **適合針對資料篩選作運用** ```javascript= let a=["台北","高雄","台南","新竹","高雄"]; //條件是篩選出陣列內高雄資料 let b=a.filter(function(item){ return item==="高雄" }) console.log(b); //['高雄','高雄'] ``` ## 5.find() 將陣列中的每個元素,帶入函式內判斷,回傳第一個符合判斷條件的元素,如果找不到就是undefined,與filter()滿像,**但是filter()會撈出陣列所有資料**。 可以帶入三個參數 1.現在的值(必須)2.索引:現在在陣列內是第幾個位置 ```javascript= let a=["小美","小花","小明","小美"]; let b=a.find(function(item,index){ console.log(item,index); return item==="小美"; }); console.log(b); //['小美'] ``` ## 6.sort() 可以針對陣列內的元素進行排序,內部函式必須包含兩個參數,這兩個參數代表陣列內第n個和n+1個元素,透過n和n+1進行比大小 **適合針對陣列進行排序時使用** ```javascript= let a =[1,2,3,4,5]; let b=a.sort(function(x,y){ return y-x; //大到小 }); console.log(b); //[5,4,3,2,1] let c=a.sort(function(x,y){ return x-y; //小到大 }) console.log(c); ``` 參考資料 [1.JS - for 迴圈與 forEach 有什麼不同](https://wcc723.github.io/development/2020/10/05/js-for-loop-vs-for-each/) [2.JavaScript Array 陣列操作方法大全 ( 含 ES6 )](https://www.oxxostudio.tw/articles/201908/js-array.html#array_foreach)