今天的內容是屬於 JavaScript 的範疇，但陣列方法不管在 JavaScript 還是 TypeScript 裡，都是滿重要的一個環節，所以威爾豬還是決定寫一篇比較常用的陣列方法，或許會有一些幫助，至少忘記了也方便查找。

• push()

在陣列的 尾端添加一個或多個元素，並返回新的陣列長度。

const phoneArr: string[] = ["Apple", "Samsung"];
const newPhoneLength = phoneArr.push("Mi", "Sony");

console.log(newPhoneLength); // 輸出： 4
console.log(phoneArr); // 輸出： ["Apple", "Samsung", "Mi", "Sony"]

• unshift()

在陣列的 開頭添加一個或多個元素，並返回新的陣列長度。

const phoneArr: string[] = ["Samsung"];
const newPhoneLength = phoneArr.unshift("Mi", "Apple");

console.log(newPhoneLength); // 輸出： 3
console.log(phoneArr); // 輸出： ["Mi", "Apple", "Samsung"]

• pop()

移除並返回陣列的 最後一個元素。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
const lastPhone = phoneArr.pop();

console.log(lastPhone); // 輸出： Mi
console.log(phoneArr); // 輸出： ['Apple', 'Samsung']

• shift()

移除並返回陣列的 第一個元素。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
const firstPhone = phoneArr.shift();

console.log(firstPhone); // 輸出： Apple
console.log(phoneArr); // 輸出： ["Samsung", "Mi"]

• join()

將陣列中的所有元素連接成一個 字串，並使用指定的分隔符號。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
const joinPhoneArrToString1 = phoneArr.join("、");
const joinPhoneArrToString2 = phoneArr.join(", ");

console.log(joinPhoneArrToString1); // 輸出： Apple、Samsung、Mi
console.log(joinPhoneArrToString2); // 輸出： Apple, Samsung, Mi

• concat()

將兩個或多個陣列合併成一個新陣列，不會修改原始陣列資料 (不過現在威爾豬使用 ... 比較多)。

const phoneArr1: string[] = ["Apple", "Samsung"];
const phoneArr2: string[] = ["Mi", "Sony"];
const allPhoneArr = phoneArr1.concat(phoneArr2);

console.log(allPhoneArr); // 輸出： ["Apple", "Samsung", "Mi", "Sony"]

• slice()

返回陣列切片後的一部分，可以有 2 個參數，不會修改原始陣列資料。

array.slice(起始位置, 結束位置)

const phoneArr: string[] = ["Apple", "Samsung", "Mi", "Sony"];
const slicePhoneArr1 = phoneArr.slice(1);
const slicePhoneArr2 = phoneArr.slice(1, 3);
const slicePhoneArr3 = phoneArr.slice(-2);
const slicePhoneArr4 = phoneArr.slice();

console.log(slicePhoneArr1); // 輸出： ["Samsung", "Mi", "Sony"]
console.log(slicePhoneArr2); // 輸出： ["Samsung", "Mi"]
console.log(slicePhoneArr3); // 輸出： [ "Mi", "Sony"]
console.log(slicePhoneArr4); // 輸出： ["Apple", "Samsung", "Mi", "Sony"]，如同淺拷貝
console.log(phoneArr); // 輸出： ["Apple", "Samsung", "Mi", "Sony"]

• splice()

在陣列中插入、刪除或替換元素，並返回陣列，可以有 3 個參數，會修改原始陣列資料。

array.splice(起始位置, 刪除元素的數量, 元素插入的內容)

const phoneArr: string[] = ["Apple", "Samsung", "Mi", "Sony"];
const splicePhoneArr1 = phoneArr.splice(3); // 從索引值 3 的地方開始，刪除 1 個元素，並將  替換進去。
const splicePhoneArr2 = phoneArr.splice(1, 2, "Nokia"); // 從索引值 1 的地方開始，刪除 2 個元素，並將 "Nokia" 替換進去。

console.log(splicePhoneArr1); // 輸出： ["Sony"]
console.log(phoneArr); // 輸出： ["Apple", "Samsung", "Mi"]

console.log(splicePhoneArr2); // 輸出： ["Samsung", "Mi"]
console.log(phoneArr); // 輸出： ["Apple", "Nokia"]

• forEach()

對陣列中的每個元素執行一次指定的函式。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
phoneArr.forEach(item => console.log(item));
// 輸出:
// "Apple"
// "Samsung"
// "Mi"

• map()

將陣列中的每個元素執行一次指定的函式後放到一個新的陣列，並返回新陣列。

const numberArr: number[] = [1, 2, 3, 4];
const newNumberArr = numberArr.map(num => num ** 3);

console.log(newNumberArr); // 輸出： [1, 8, 27, 64]

• filter()

根據指定的條件篩選陣列中的元素，並返回一個滿足條件元素的新陣列。

const numberArr: number[] = [1, 2, 3, 4, 5];
const newNumberArr = numberArr.filter(num => num % 2 === 0);

console.log(newNumberArr); // 輸出： [2, 4]

• find()

查找陣列中 第一個滿足條件的元素，並返回該元素。

注意: IE 11 及更早版本不支持 find() 方法。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
const foundPhone = phoneArr.find(item => item === "Apple");

console.log(foundPhone); // 輸出： Apple

const numberArr: number[] = [3, 13, 18, 26, 47];
const foundNumber = numberArr.find(num => num >= 10);

console.log(foundNumber); // 輸出： 13

• some()

檢查陣列中 是否至少有一個元素滿足指定條件，並返回布林值。

const numberArr: number[] = [1, 2, 3, 4, 5];
const hasOddNumber = numberArr.some(num => num % 2 !== 0);

console.log(hasOddNumber); // 輸出： true

• every()

檢查陣列中 是否所有元素都滿足指定條件，並返回布林值。

const numberArr: number[] = [1, 2, 4, 6, 8];
const allEvenNumber = numberArr.every(num => num % 2 === 0);

console.log(allEvenNumber); // 輸出： false

• includes()

檢查陣列 是否包含指定的元素，並返回布林值。

注意: es2016(ES7) 之後才有支持。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
const includesSamsung = phoneArr.includes("Samsung");
const includesSony = phoneArr.includes("Sony");

console.log(includesSamsung); // 輸出： true
console.log(includesSony); // 輸出： false

• indexOf()

返回指定元素在陣列中第一個出現的索引值位置，如果 沒有指定的元素就會返回 -1。

const numberArr: number[] = [1, 2, 2, 2, 5];
const firstIndexOf1 = numberArr.indexOf(2);
const firstIndexOf2 = numberArr.indexOf(3);

console.log(firstIndexOf1); // 輸出： 1
console.log(firstIndexOf2); // 輸出： -1

• findIndex()

尋找陣列中符合第一個出現的的元素，並返回其索引值位置。如果 沒有符合的元素就返回 -1。

const numberArr: number[] = [3, 22, 8, 140, 33];
const numberFindIndex = numberArr.findIndex(num => num > 25);

console.log(numberFindIndex); // 輸出： 3

• reduce()

通常會用於累加。

const numberArr: number[] = [1, 2, 3, 4, 5];
const sum = numberArr.reduce((acc, cur) => acc + cur, 0);

console.log(sum); // 輸出： 15

• sort()

對陣列元素進行 排序 (依首字字母)。

const phoneArr: string[] = ["Samsung", "Apple", "Mi"];
phoneArr.sort();

console.log(phoneArr); // 輸出： ["Apple", "Mi", "Samsung"]

不過想要將數字從小到大依序排列 (升冪) 會變成：

const numberArr: number[] = [89, 8, 23, 2, 56, 5];
numberArr.sort();

console.log(numberArr); // 輸出： [2, 23, 5, 56, 8, 89]

顯然這不是我們要的結果，那正確的升降冪該怎麼寫呢？

// 升冪

const numberArr: number[] = [89, 8, 23, 2, 56, 5];
numberArr.sort((a, b) => a - b);

console.log(numberArr); // 輸出： [2, 5, 8, 23, 56, 89]

// 降冪

const numberArr: number[] = [89, 8, 23, 2, 56, 5];
numberArr.sort((a, b) => b - a);

console.log(numberArr); // 輸出： [89, 56, 23, 8, 5, 2]

• reverse()

將陣列中的元素順序反轉。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
phoneArr.reverse();

console.log(phoneArr); // 輸出： ["Mi", "Samsung", "Apple"]

• isArray()

檢查一個值是否為陣列，並返回布林值。

const phoneArr: string[] = ["Apple", "Samsung", "Mi"];
const phoneArrIsArray = Array.isArray(phoneArr);

console.log(phoneArr); // 輸出： true

• 淺拷貝

使用展開運算符 (...)，複製陣列或物件的第一層元素，不會修改原始陣列資料。

const phoneArr1: string[] = ["Apple", "Samsung"];
const phoneArr2: string[] = ["Mi", "Sony"];
const allPhoneArr = [...phoneArr1, ...phoneArr2]; // 等同於 phoneArr1.concat(phoneArr2)

console.log(allPhoneArr); // 輸出： ["Apple", "Samsung", "Mi", "Sony"]

展開運算符隱藏功能：字串轉陣列

const stringValue:string = "威爾豬";
const charsArr = [...stringValue]; // 等同於 stringValue.split("");

console.log(charsArr); // 輸出： ["威", "爾", "豬"]

• 深拷貝

使用 JSON.parse() 和 JSON.stringify()，複製陣列的全部元素，不會修改原始陣列資料。

前提是陣列中的元素都是可以 JSON 化的。

type TPhone = {
  name: string;
  price: number;
};

const phoneArr: TPhone[] = [
  {
    name: "Apple",
    price: 50000,
  },
  {
    name: "Samsung",
    price: 45000,
  },
  {
    name: "Mi",
    price: 35000,
  },
];

const deepCopyPhoneArr = JSON.parse(JSON.stringify(phoneArr));
deepCopyPhoneArr[2].price = 30000;

console.log(deepCopyPhoneArr); 
// 輸出： [{ name: "Apple", price: 50000 }, { name: "Samsung", price: 45000 }, { name: "Mi", price: 30000 }]
console.log(phoneArr); 
// 輸出： [{ name: "Apple", price: 50000 }, { name: "Samsung", price: 45000 }, { name: "Mi", price: 35000 }]

以上就是威爾豬比較常用到到陣列方法，應該可以滿足大部分的開發需求了，剩下就看如何組合跟運用 (要考慮會不會修改到原始陣列資料？使用什麼方法可以擁有更好的效能？...... )。不過需要注意的是，有些方法是不支援 IE11、舊版本的瀏覽器或 es2016 之後才有的，有興趣的話可以到 Can I use 上查詢。