---
# System prepended metadata

title: '[JavaScript] Array陣列常用語法'
tags: [JavaScript]

---

# [JavaScript] Array陣列常用語法
###### tags: `JavaScript`


[參考資料](https://www.ucamc.com/e-learning/javascript/261-javascript-reduce%E3%80%81foreach%E3%80%81filter%E3%80%81map)

* forEach：遍歷每個元素。
* map：遍歷每個元素，回傳的值會替代原本陣列內的值。
* filter：遍歷每個元素，回傳 true 時，目前的值會保留在陣列內，這會回傳一個新陣列，而不是修改原本的陣列。
* reduce：遍歷每個元素，依序組合、加總，然後丟給下個元素，最終會回傳一個結果。


### forEach

forEach：遍歷每個元素，函式執行每個陣列內的物件或值
陣列名稱.forEach(function(數值item ,索引index , 原陣列array){})

```
this.todos.forEach(function(item){ 
          if（item>2）{
          console.log(item)
          }}
//在this.todos陣列裡，使用item的資料做迴圈判斷    
```
在陣列內新增cash項目，並套用原momey數值+500
```
people.forEach(function(item,index,array){
item.cash = item.money + 500
console.log(item)
});
```


### map
與foreach的差異是map會有return指向新的陣列裡，但不影響原陣列的數值
需產生新的陣列newpeople，放入函數內所新增的變數，return代表會回傳一個值到新陣列上

![](https://i.imgur.com/mEpykWe.png)
>...item表示為陣列裡的所有值，逗號後是結合後方的新變數


### Filter
這個按照字面上的意思來說就是過濾器，filter 不會修改值，但他會幫你決定要不要將這個值留在陣列裡面，要注意的是 filter 會回傳一個新的陣列，而不是修改原本的陣列。

相較於map不同的是filter會從原陣列裡篩選原有的數值至新陣列上，而非新增新的變數。

```
var arr    = [1, 2, 3, 4],  
    newArr = [];

for(var i = 0; i < arr.length; i++) {  
    if(arr[i] > 2) {
        newArr.push(arr[i]);
    }
}

console.log(newArr); // [3, 4] 
```
() =>{} 就是ES6的函式簡寫function(){}
```
var arr = [1, 2, 3, 4];

var newArr = arr.filter((val) => {  
    return val > 2;
})

console.log(newArr); // [3, 4]
```

回傳值true意指回傳判定後的答案
![](https://i.imgur.com/URt1JuG.png)




