# 實用 Array 陣列操作大全
###### tags: `JavaScript` `Array`

## forEach()
- 不會回傳值，會將陣列內的每筆資料一筆一筆放到函式裡執行。
- 帶有 3 個參數：
1. 第 1 個參數 item 為當下資料。（必填）
2. 第 2 個參數 index 為當下資料的索引值。（選填）
3. 第 3 個參數 array 為執行的陣列。（選填）

let ary = [1,2,3];
ary.forEach(function(item, index, array){
    // 共 3 筆資料，函式執行 3 次
    console.log(item); // 1  // 2  // 3
    console.log(index); // 0  // 1  // 2
    console.log(array); // [1,2,3]  // [1,2,3]  // [1,2,3]
});

<br>

## 新增、刪除
### push()
在陣列的**最後一筆後面**新增資料，不限資料數量，多筆資料用逗號隔開。

let ary = [1,2,3];
ary.push(4);
console.log(ary); // [1,2,3,4]
ary.push(5,6);
console.log(ary); // [1,2,3,4,5,6]

<br>

### pop()
刪除陣列的**最後一筆**資料。

let ary = [1,2,3];
ary.pop();
console.log(ary); // [1,2]

### shift()、unshift()
#### shift()
刪除陣列**第一筆**資料。

let ary = [1,2,3];
ary.shift();
console.log(ary); // [2,3]

#### unshift()
- 與 <code>shift()</code> 相反，從陣列原本**第一筆前面**新增資料。
- 跟 <code>push()</code> 一樣不限資料數量，多筆資料用逗號隔開。

let ary = [1,2,3];
ary.unshift(-0);
console.log(ary); // [0,1,2,3]
ary.unshift(-2,-1);
console.log(ary); //[-2,-1,0,1,2,3]

<br>

### splice()
splice(start[, deleteCount[, item1[, item2[, ...]]]])

能新增或刪除陣列中的資料，帶有 3 個參數。
1. <code>第 1 個參數</code> 為要插入或刪除的索引位置。（必填）
2. <code>第 2 個參數</code> 為要刪除的資料數，會從 <code>第 1 個參數</code> 所指定的索引位置開始刪除指定資料數。若沒有需要刪除的資料則填 <code>0</code>；若不填則會刪除從指定的索引位置開始後面全部的資料。（選填）
4. <code>第 3 個參數</code> 為選填，填入要新增的資料數，會從 <code>第 1 個參數</code> 所指定的索引位置插入資料。（選填）

let ary = [1,2,3];
ary.splice(1,0,3);
console.log(ary); // [1,3,2,3]
ary.splice(4,0,'hi','John');
console.log(ary); // [1,3,2,3,"hi","John"]

let ary = [1,2,3];
ary.splice(1,1);
console.log(ary); // [1,3]

let ary = [1,2,3];
ary.splice(1);
console.log(ary); // [1]

let ary = [1,2,3];
ary.splice(1);
console.log(ary); // [1]

#### 刪了幾個，就回傳幾個刪掉的元素陣列回來

let ary = [1,2,3];
let ary2 = ary.splice(1);
console.log(ary); // [1]
console.log(ary2); // [2,3]

#### 索引值也可以從後頭開始算
<code>splice()</code> 的 <code>第 1 個參數</code> 可以為**負數**，這代表從陣列的尾端數回來。<code>-1</code> 並不是從尾端直接增加元素，而是從**尾端倒數第一個的位置前面**新增資料，所以原本最後一個元素會被往後擠。

let ary = [1,2,3];
let ary2 = ary.splice(-1,0,'last');
console.log(ary); // [1,2,"last",3]

##### 參考資料
- [splice() MDN 文件](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
- [JS 隨意修、刪、改的陣列 Array 方法 splice()](https://ithelp.ithome.com.tw/articles/10225345)

<br>

## 不會修改原始陣列，回傳值
### find()
將陣列中的每筆資料帶到函式裡並回傳符合條件（true）的==第一筆==資料，如果沒有符合的資料會回傳 `undefined`。
- 帶有 3 個參數：
1. 第 1 個參數 item 為當下資料。（必填）
2. 第 2 個參數 index 為當下資料的索引值。（選填）
3. 第 3 個參數 array 為執行的陣列。（選填）

let ary = [1,2,3];
let newAry = ary.find(function(item, index, array){
    return item < 4;
});
console.log(newAry); // 1

newAry = ary.find(function(item, index, array){
    return item > 4;
});
console.log(newAry); // undefined

<br>

### reduce()
將陣列中的資料從第 1 筆開始帶到函式裡與前一筆資料進行運算並會回傳運算結果。
- 帶有 4 個參數
- accumulator 為目前計算後的值，預設值為 initialValue（必填）
- currentValue 為當前所取出的陣列資料（必填）
- currentIndex 為當前所取出的陣列資料得索引值（選填）
- array 為呼叫 reduce() 的陣列（選填）
- initialValue 為 accumulator 初始值，若沒有填則會代入陣列第 1 個元素（選填）

Array.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

let ary = [1,2,3];
let newAry = ary.reduce(function(accumulator, currentValue, currentIndex, array){
    return accumulator + currentValue;
}, 0);
console.log(newAry); // 6

<br>

### every()
將陣列中的每筆資料帶到函式裡並如果每筆資料都符合條件，會回傳 `true`，如果全部或有部份沒符合的資料會回傳 `false`。
- 帶有 3 個參數：
1. 第 1 個參數 item 為當下資料。（必填）
2. 第 2 個參數 index 為當下資料的索引值。（選填）
3. 第 3 個參數 array 為執行的陣列。（選填）

let ary = [1,2,3];
let newAry = ary.every(function(item, index, array){
    return item == 1;
});
console.log(newAry); // false 只有 1 筆資料符合 

newAry = ary.every(function(item, index, array){
    return item < 4;
});
console.log(newAry); // true 全部資料都符合

<br>

### some()
與 `every()` 類似，差別在於只要**有 1 筆資料**符合條件，就會回傳 `true`，如果全部都沒符合的資料會回傳 `false`。

let ary = [1,2,3];
let newAry = ary.every(function(item, index, array){
    return item == 1;
});
console.log(newAry); // true 有至少 1 筆資料符合 

newAry = ary.every(function(item, index, array){
    return item > 4;
});
console.log(newAry); // false 全部資料都不符合

<br>

### join()
將陣列中的所有元素串接成一個字串。不代入任何參數會用預設 `,` 隔開元素。
- 帶有 3 個參數：
1. 第 1 個參數 item 為當下資料。（必填）
2. 第 2 個參數 index 為當下資料的索引值。（選填）
3. 第 3 個參數 array 為執行的陣列。（選填）

array.join([separator])

let ary = [1,2,3];
let str = ary.join();
console.log(str); // '1,2,3'

str = ary.join('');
console.log(str); // '123'

str = ary.join(' ');
console.log(str); // '1 2 3'

str = ary.join('#');
console.log(str); // '1#2#3'

<br>

## 不會修改原始陣列，回傳值並產生新陣列
### map()
會建立一個新陣列，並將函式回傳的值加入新陣列裡，沒有回傳的值會代入 `undefined`，陣列長度為原本陣列的長度。
- 帶有 3 個參數：
1. 第 1 個參數 item 為當下資料。（必填）
2. 第 2 個參數 index 為當下資料的索引值。（選填）
3. 第 3 個參數 array 為執行的陣列。（選填）

let ary = [1,2,3];
let newAry = ary.map(function(item){});
console.log(newAry); // [undefined, undefined, undefined]

newAry = ary.map(function(item){return false});
console.log(newAry); // [false, false, false]

let dogs = [{
        name: 'Bob',
        age: 3
    },
    {
        name: 'John',
        age: 6
    }
];


newAry = dogs.map(function(item){
    if(item.age < 5){return item.name};
    return false;
}); // ['Bob', false]

newAry = dogs.map(function(item){
    if(item.age < 7){return item.name};
    return false;
}); // ['Bob', 'John']

newAry = dogs.map(function(item){
    if(item.age < 5){return item.name};
}); // ['Bob', undefined]

<br>

### slice()
arr.slice([begin[, end]])
- 會回傳一個新陣列，並將指定陣列區段裡的值回傳到新陣列裡。
- 帶有 2 個參數：
- 參數 `begin` 為開始的索引值
- 參數 `end` 為要結束的索引值，不代入參數時會提取到陣列最後一筆資料。要注意參數 `end` 會回傳到代入的索引值的**前一筆元素**，而不是所代入的索引值。

let ary = [1,2,3,4,5,6];
let newAry = ary.slice(1); // [2, 3, 4, 5, 6]

newAry = ary.slice(2,4); // [3, 4]

- 代入 0 或不代參數會把陣列所有資料都拷貝一份到新陣列裡。
- 與 `splice()` 相同，可以代入負數，`slice(0,-1)` 代表從提取陣列第 1 筆資料到倒數第 2 筆資料。`splice(-1)`，則會回傳倒數第 1 個資料。負數超過原始陣列長度會回傳整個陣列資料。

let ary = [1,2,3,4,5,6];
let newAry = ary.slice(); // [1,2,3,4,5,6]

newAry = ary.slice(-1); // [6]

newAry = ary.slice(0,-1); // [1, 2, 3, 4, 5]

newAry = ary.slice(-6); // [1, 2, 3, 4, 5, 6]

##### 參考資料
- [輕鬆淺拷貝的陣列 Array 方法 slice()](https://ithelp.ithome.com.tw/articles/10224915)

<br>

### filter()
會回傳一個新陣列，並將符合條件的資料傳到新陣列裡。
- 帶有 3 個參數：
1. 第 1 個參數 item 為當下資料。
2. 第 2 個參數 index 為當下資料的索引值。
3. 第 1 個參數 array 為執行的陣列。

let ary = [1,2,3];
let newAry = ary.filter(function(item, index, array){
    return item == 1;
});
console.log(newAry); // [1]

newAry = ary.filter(function(item, index, array){
    return item <= 2;
});
console.log(newAry); // [1, 2]

newAry = ary.filter(function(item, index, array){
    return item < 4;
});
console.log(newAry); // []

<br>

### split()
str.split([separator[, limit]])
以指定的分割字串決定字串拆分的位置，將拆分結果代入陣列並回傳此陣列。
- 帶有 2 個參數：
1. 參數 separator 為指定拆分字串。可以代入正則表達式（regex）。
2. 參數 limit 為限制陣列長度，如果代入 5，回傳的新陣列會有 5 筆或不超過 5 筆資料。

let message = 'Go lucky Guy';
let strAry = message.split(''); // 代入空字串當分隔符
console.log(strAry); // ['G', 'o', ' ', 'l', 'u', 'c', 'k', 'y', ' ', 'G', 'u', 'y']

strAry = message.split('', 5); // 代入空字串當分隔符
console.log(strAry); // ['G', 'o', ' ', 'l', 'u']

strAry = message.split(' '); // 代入空白當分隔符
console.log(strAry); // ['Go', 'lucky', 'Guy']

strAry = message.split(' ', 5);
console.log(strAry); // ['Go', 'lucky', 'Guy']

strAry = message.split(' ', 1);
console.log(strAry); // ['Go']

strAry = message.split('G');
console.log(strAry); // ['', 'o lucky ', 'uy']

如果沒有代入任何參數或是代入不再呼叫字串內的字串，split() 會將整組字串代入新陣列並回傳。

const message = 'I am a Happy Go lucky Guy';
const strAry = message.split(); // ['I am a Happy Go lucky Guy']

const message = 'I am a Happy Go lucky Guy, how about you?';
const strAry = message.split(','); // ['I am a Happy Go lucky Guy', ' how about you?']

#### 參考資料
- [JavaScript split() 方法——如何在 JS 中将字符串拆分为数组](https://chinese.freecodecamp.org/news/javascript-split-how-to-split-a-string-into-an-array-in-js/)

## 排序（會改變原始陣列）
### sort()
針對陣列的元素進行排序，裡頭包含了一個排序用的判斷函式，函式內必須包含兩個參數，分別代表陣列裡第 n 個和第 n+1 個元素，透過比較第 n 和第 n+1 個元素的大小來進行排序。

let ary = [1,3,8,4,5,7,6,2];
ary.sort((a,b) => b - a); // [8, 7, 6, 5, 4, 3, 2, 1]
ary.sort((a,b) => a - b); // [1, 2, 3, 4, 5, 6, 7, 8]

### reverse()
將陣列排序反轉。

let ary = [1, 2, 3];
ary.reverse(); // [3, 2, 1]

##### 參考資料
- [JavaScript Array 陣列操作方法大全 ( 含 ES6 )](https://www.oxxostudio.tw/articles/201908/js-array.html)
- [JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
- [關於 JavaScript 陣列 20 種操作的方法](https://hsiangfeng.github.io/javascript/20190421/1216566123/)