# JS 筆記 -常用的陣列方法
雖然不完全是 ES6 語法糖，但在比較舊的瀏覽器就無法支援這些語法，所以使用上要注意，透過下方幾個語法，可以精簡的處理陣列資料的程式碼。
## 範例資料
本次皆使用下方陣列資料 (除了 `sort()` 以外)：
```javascript
const arr = [
{
name: 'Abby',
money: 5000
},
{
name: 'Ben',
money: 6500
},
{
name: 'Cathy',
money: 7500
},
{
name: 'Danny',
money: 8000
},
]
```
## forEach & map
這兩個語法大概有 87% 像，但又有點不同，這兩個語法都跟 for 迴圈的功能類似，原生語法要取得陣列資料會這樣寫：
```javascript
// 資料長度
let arrLen = arr.length;
console.log(arrLen); //4
//for
for (let i = 0; i < arrLen; i++) {
console.log(arr[i]);
}
```
### forEach
使用 forEach 更精簡的寫法，方式是在資料名稱後方加入 forEach 語法，後面接一個 function，參數分別帶入。
```javascript
arr.forEach(function (item, index, array) {
console.log(item, index, array);
})
```
* item: 代表陣列資料的內容，這邊陣列資料中的資料為物件。
* index: 索引位置，從 0 開始。
* array: 代表陣列資料本身(基本上沒有使用)。
若在 item 增加一個 icash 資料新增金額，可以這樣寫：
```javascript
arr.forEach(function (item, index, array) {
item.icash = item.money + 500;
console.log(item, index, array); //money 會得到 5500, 7000, 8000, 8500。
})
```
> forEach 本身不會回傳。
### map
承上，把 forEach 換成 map，得到的結果也會相同。
```javascript
arr.map(function (item, index, array) {
item.icash = item.money + 500;
console.log(item, index, array); //money 會得到 5500, 7000, 8000, 8500。
})
```
如果要使用 map 回傳一個新的陣列資料可以這樣寫：
```javascript
const newArr = arr.map(function (item, index, array) {
return {
...item, //拆解 item 資料，新增一個變數為newArr，併重新回傳資料到新變數中。
icach: item.money + 500 //分別在 ...item 中增加 icash 這個屬性與內容。
}
});
console.log(newArr); //會得到四個物件。
```
newArr 跟 arr 會是兩個不同的陣列資料。
> * map 本身會回傳，類似於 return 的功能。
> * 一般使用回傳的特性，會拿來做篩選，但 map 若沒有使用 return 語法，會回傳 undefined，所以 map 不適合拿來做篩選的功能。
## filter & find
### filter
filter 寫法跟上方一樣，return 的值也很單純，只有 true 或 false，
```javascript
const filterArr = arr.filter(function (item, index) {
return true;
});
console.log(filterArr); //true 得到四個物件資料，false 得到一個空陣列。
```
若今天要篩選 money 小於 6000 的方法可以這樣寫：
```javascript
const filterArr = arr.filter(function (item, index) {
if (item.money < 7000)
return true;
});
console.log(filterArr); // 得到 Abby 跟 Ben
```
> filter 會篩選所有相符的條件並做回傳，回傳的資料會是一個陣列。
### find
find 跟 filter 有點像，
```javascript
const findArr = arr.find(function (item, index) {
if (item.money < 7000)
return true;
});
console.log(findArr); // 找到 Abby 一筆資料就停止
```
> find 找到相符的一筆資料後就會停止，只會回傳一次，回傳的資料會依照 item 的內容照實回傳，EX. 是字串就回傳字串，比較適合用來找 id 或是指定的元素。
## every & some
這兩種語法基本上一樣，都是回傳布林值，差別如下：
* every 需所有條件相符才會回傳 true，有一條件不符就會回傳 false。
* some 只要有部分條件相符就會回傳 true。
程式碼如下：
### every
```javascript
const newArr = arr.every(function (item, index) {
return item.money > 1000
})
console.log(newArr); //true
```
### some
```javascript
const newArr = arr.some(function (item, index) {
return item.money > 6000
})
console.log(newArr);
```
## reduce
適合拿來做加總的方法，起手式為：
```javascript
const newArr = arr.reduce(function (prev, item, index) {
}, 0)
```
跟前面不同的是在函式後面加上一個逗號，逗號後面的參數為起始值。
> **參數說明：**
> * 第一個參數代表上一個，若沒有上一個的話，就是在逗號後面寫上 0。
> * 第二個參數代表當前的資料。
> * 第三個參數代表索引。
來看一下 prev 的值：
```javascript
const newArr = arr.reduce(function (prev, item, index) {
console.log(prev); //0, 500, 1000, 1500
return prev + 500
}, 0)
```
因為陣列資料有四筆，所以從頭開始總共會得到四筆資料。
#### 計算所有人加總的數值
若要計算所有人擁有的錢，可以這樣寫：
```javascript
const newArr = arr.reduce(function (prev, item, index) {
console.log(prev); //陸續加總的結果0 5000 11500 19000 27000
return prev + item.money
}, 0)
console.log(newArr); //27000
```
#### 比大小
可以透過 reduce 去做所有資料內容的對比，會選出指定條件的值，這邊選出最大值來看看。
```javascript
const newArr = arr.reduce(function (prev, item, index) {
console.log(prev);
return Math.max(prev, item.money)
}, 0)
console.log('newArr', newArr); //8000
```
## sort()
會改變原本的陣列內容。下方有一組陣列沒有按照順序，使用 sort(); 方法，並帶入頭尾參數做為判斷，便會按照順序排列或反向排列。
```javascript
const arr = [1, 5, 8, 7, 4, 6, 3, 2];
arr.sort((x, y) => return y - x);
console.log(arr); //8, 7, 6, 5, 4, 3, 2, 1
arr.sort((x, y) => return x - y);
console.log(arr); //1, 2, 3, 4, 5, 6, 7, 8
```
但若不使用判斷，則不會按照順序排列。
```javascript
const arr2 = [1, 5, 8, 7, 4, 6, 3, 2, 10, 9, 11];
arr2.sort();
console.log(arr2); //1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
```
## 參考資料
* [JavaScript Array 陣列操作方法大全 ( 含 ES6 )](https://www.oxxostudio.tw/articles/201908/js-array.html#array_sort)
* [JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
* [Cheatsheet for Array Methods - JavaScript 陣列方法大全](https://w3c.hexschool.com/blog/6594e4ff)
Sign in with Wallet
Connect another wallet