---
# System prepended metadata

title: 實用陣列操作大全(filter、sort、map等)

---

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