---
# System prepended metadata

title: JavaScript Array 陣列操作方式
tags: [JavaScript]

---

# 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
```
