# JavaScript Array 陣列操作方式
###### tags: `JavaScript`
## forEach / map / filter / find / some / every / sort / reduce
### Array.forEach(函數) 對每個元素執行動作
* 將陣列元素一個一個抓出來
* 帶入函數執行
* 陣列元素如果是物件可以變更
* 會修改原陣列,不會產生新陣列
```javascript=
// example
const books = [
{
name: '字典',
price: 500,
discount: 0.8
},
{
name: '小說',
price: 500,
discount: 0.6
},
{
name: '課本',
price: 500,
discount: 0.9
}
]
books.forEach(function(book){
book.total = book.discount*book.price
console.log(book.total) // (印三次) 400 300 450
})
console.log(books)
// 引數book就是從陣列抓出來每一個的本體
// console.log(books) 印出 :
// [
// { name: '字典', price: 500, discount: 0.8, total: 400 },
// { name: '小說', price: 500, discount: 0.6, total: 300 },
// { name: '課本', price: 500, discount: 0.9, total: 450 }
// ]
// 原陣列會被新增 total 屬性
// e.g. 在書本資料集中,為所有書本新增優惠資訊(屬性)
```
<br>
---
### Array.map(函數) 執行結果存到新陣列
* 將陣列元素一個一個抓出來
* 將執行結果存成另一個陣列
```javascript=
// example 將陣列中的數值取出平方
numbers = [1, 2, 3, 4, 5, 6]
const new_array = numbers.map(function(num){
return num * num
})
console.log(numbers) // 原陣列不會被修改
console.log(new_array) // 新陣列
// 引數num就是從陣列抓出來每一個的本體
// e.g. 將會員物件取出成名字陣列
```
**map常用在物件壓縮與轉換,只抽取或計算必要資訊並產生新物件**
<br>
---
### Array.filter(函數) 留下符合條件的元素
根據函數回傳值(True / False),決定要不要把元素複製到新陣列
```javascript=
// example
numbers = [1, 2, 3, 4, 5, 6]
const new_array = numbers.filter(function(num){
return num > 3
})
console.log(numbers) // 原陣列不會被修改
console.log(new_array) // [4, 5, 6]
// 引數num就是從陣列抓出來每一個的本體
// e.g. 留下價格 > 400的書 / 男性的乘客 / 有關鍵字的文章
```
<br>
---
### Array.find(函數) 找到第一個符合條件的元素
根據函數回傳值(True / False)
傳回第一個符合條件的元素 **(非陣列!)**
```javascript=
dnas = ['ATC', 'AGC', 'AAA', 'TTG']
const findTg = dnas.find(function(dna){
return dna.indexOf('TG') > -1
})
console.log(findTg) // 'TTG'
// 引數dna就是從陣列抓出來每一個的本體
// e.g. 找到id是23的書 / 找到第一個得分>50的球員
```
<br>
---
### Array.some(函數) 判斷有元素符合條件
其中有元素符合條件回傳true,否則false
e.g. 清單中有跟關鍵字一樣名字的物件
<br>
---
### Array.every(函數) 判斷所有元素都符合條件
每一個元素都符合條件回傳true,否則false
e.g. 清單中所有會員都有驗證
<br>
---
### Array.sort(函數) 根據大小排序陣列
根據函數回傳值排列陣列
e.g. 根據年齡排列會員資料
```javascript=
// example
members = [{year: 27},{year: 14},{year: 50}]
const sortMembers = members.sort(function(a, b){
return a.year - b.year
})
console.log(sortMembers) // [{year: 14}, {year: 27}, {year: 50}]
```
<br>
---
### Arrau.reduce(函數, 初始值) 根據規則縮減陣列
* **有帶暫存器版本的 forEach**
根據取出每個值與暫存做運算,回傳結果
e.g. 把書籍價錢加到暫存裡 -> 總價
```javascript=
books = [{price: 10}, {price: 20}, {price: 30}]
const total = books.reduce(function(total, a){
return total + a.price
}, 0)
console.log(total) // 60
```