###### tags: `JavaScript`

# JavaScript 會改變原始陣列語法
## push() 將資料寫入陣列最後方
<font color="red">**push()**</font> 可以將值加入到陣列的最後一個位置，不限制添加數量，欲添加的內容使用逗號隔開即可，加入後陣列長度會增加。
:::info
使用<font color="red">**push()**</font>後會改變原本的陣列內容。
:::

let a = [1,2,3,4,5,6,7,8];
a.push(9, 10);
console.log(a); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

## pop() 刪除陣列最後一筆資料
<font color="red">**pop()**</font> 會移除 ( 取出 ) 陣列的最後一個元素。
:::info
使用<font color="red">**pop()**</font>後會改變原本的陣列內容。
:::

let a = [1,2,3,4,5,6,7,8];
let b = a.pop();
console.log(a); // [1, 2, 3, 4, 5, 6, 7]
console.log(b); // 8

## shift() 刪除陣列第一筆資料
<font color="red">**shift()**</font> 會移除 ( 取出) 陣列的第一個元素。
:::info
使用<font color="red">**shift()**</font>後會改變原本的陣列內容。
:::

let a = [1,2,3,4,5,6,7,8];
let b = a.shift();
console.log(a); // [2, 3, 4, 5, 6, 7, 8]
console.log(b); // 1

## unshift() 將資料寫入陣列最前方
<font color="red">**unshift()**</font> 會將指定的元素添加到第一個位置。
:::info
使用<font color="red">**unshift()**</font>後會改變原本的陣列內容。
:::

let a = [1,2,3,4];
a.unshift(100,200);
console.log(a); // [100, 200, 1, 2, 3, 4]

## reverse() 將陣列反轉
<font color="red">**reverse()**</font> 會將陣列反轉。
:::info
使用<font color="red">**reverse()**</font>後會改變原本的陣列內容。
:::

let a = [1,2,3,4,5];
a.reverse();
console.log(a); // [5, 4, 3, 2, 1]

## splice() 刪除陣列指定資料
<font color="red">**splice()**</font> 可以移除或新增陣列的元素，它包含了<font color="red">三個參數</font>
- 第一個是要移除或要添加的序列號碼 ( 必填 )
- 第二個是要移除的長度 ( 選填，若不填則第一個號碼位置後方的所有元素都會被移除，若設定為 0 則不會有元素被移除 )
- 第三個是要添加的內容，新增多筆可以用 , 隔開 ( 選填 )
:::info
使用<font color="red">**splice()**</font>後會改變原本的陣列內容。
:::

// 單一參數
let a = [1,2,3,4,5,6,7,8];
a.splice(5);
console.log(a); // [1, 2, 3, 4, 5] ( 6,7,8 被移除了 )

// 二種參數
let b = [1,2,3,4,5,6,7,8];
b.splice(5, 2); // 找到陣列第 5 筆往後刪除 2 筆資料
console.log(b); // [1, 2, 3, 4, 5, 8] ( 6,7 被移除了 )

// 三種參數
let c = [1,2,3,4,5,6,7,8];
c.splice(5, 2, 60, 70); // 找到陣列第 5 筆往後刪除 2 筆資料，再新增 60 & 70 到陣列中
console.log(c); // [1, 2, 3, 4, 5, 60, 70, 8] ( 6,7 被移除了，新增 60, 70 進入陣列 )

## sort() 針對陣列的元素進行排序
<font color="red">**sort()**</font> 可以針對陣列的元素進行排序
裡頭包含了一個<font color="red">排序用的判斷函式</font>，函式內必須包含<font color="red">兩個參數</font>，這兩個參數分別代表陣列裡第 n 個和第 n+1 個元素，透過比較第 n 和第 n+1 個元素的大小來進行排序。
:::info
使用<font color="red">**sort()**</font>後會改變原本的陣列內容。
:::

let a = [4,3,1,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a); // [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a); // [1, 2, 3, 4, 5, 6, 7, 8]

:::warning
如果不使用判斷函式，預設會將元素轉換成字串，並採用 unicode 來判斷，這也會造成某些數字的排序錯誤。

let a = [1,3,22,4,5,37,6,2,57,10,11];
a.sort();
console.log(a); // [1, 10, 11, 2, 22, 3, 37, 4, 5, 57, 6]

:::

## copyWithin() 複製陣列指定位置再放到指定位置
<font color="red">**copyWithin()**</font> 能複製陣列中的某些元素，並將它們放到並取同一個陣列指定的位置，copyWithin() <font color="red">有三個參數</font>
- 第一個是要置換的位置 ( 必填 )，
- 第二個是從什麼位置開始複製 ( 選填，預設 0 )，
- 第三個是停止複製的元素的前一個位置 ( 選填，預設等於陣列長度 )。
:::info
使用<font color="red">**copyWithin()**</font>後會改變原本的陣列內容。
:::
- ### 第一個參數

let a = [1,2,3,4,5,6,7,8,9,10];
a.copyWithin(2);
console.log(a); // [1, 2, 1, 2, 3, 4, 5, 6, 7, 8] 
// ( 因 9 和 10 超過陣列長度，只出現到 8 )

---

- ### 第二個參數

let b = [1,2,3,4,5,6,7,8];
b.copyWithin(2,0);
console.log(b); // [1, 2, 1, 2, 3, 4, 5, 6]

let b = [1,2,3,4,5,6,7,8];
b.copyWithin(2,1);
console.log(b); // [1, 2, 2, 3, 4, 5, 6, 7]

---

- ### 第三個參數

let c = [1,2,3,4,5,6,7,8];
c.copyWithin(3,1,3);
console.log(c); // [1,2,3,2,3,6,7,8] ( 複製 2,3 取代 4,5 )

## fill() 替換陣列中所有元素
<font color="red">**fill()**</font> 會把陣列中所有元素，置換為指定的值，fill()有三個參數，
- 第一個是準備要置換的內容 ( 必填 )，
- 第二個是從什麼位置開始置換 ( 選填，不設定就全部置換 )，
- 第三個是停止置換的元素的前一個位置 ( 選填，預設等於陣列長度 )。
:::info
使用<font color="red">**fill()**</font>後會改變原本的陣列內容。
:::
- ### 第一個參數

let a = [1,2,3,4,5];
a.fill('a');
console.log(a); // ['a','a','a','a','a']

- ### 第二個參數

let b = [1,2,3,4,5];
b.fill(3,2);
console.log(b); // [1, 2, 3, 3, 3]

- ### 第三個參數

let c = [1,2,3,4,5,6,7,8];
c.fill('c',3,5);
console.log(c); // [1,2,3,'c','c',6,7,8]

## flat() 扁平化陣列

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展開任意深度的巢狀陣列
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var arr5 = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "物件" }]];
arr5.flat(Infinity);
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "物件" }];

// 移除陣列中的空項
var arr6 = [1, 2, , 4, 5];
arr6.flat();
// [1, 2, 4, 5]

## filter() & match() 搜尋陣列

const list = [
  ['小明', '小小明', '小明明'],
  ['小華', '小小華', '小華華'],
  ['小美', '小小美', '小美美'],
];
 
// newList = ['小明', '小小明', '小明明', '小華', '小小華', '小華華', '小美', '小小美', '小美美'];
const newList = [].concat(...list);

const result = newList.filter((value) => value.match('小小'));

console.log(result); // ["小小明", "小小華", "小小美]