> 如果有記憶吐司就好了...
# 實用陣列操作大全(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)