# [JavaScript] Array 陣列常用方法

###### tags: `JavaScript`

* 迭代器：`forEach`, `map`, `filter`, `find`, `findIndex`, `every`, `some`, `reduce`, `reduceRight`
* 攤平：`flat`, `flatMap`
* 相加：`concat`
* 堆疊與佇列：`push`, `pop`, `shift`, `unshift`
* 子陣列：`slice`, `splice`, `fill`, `copyWithin`
* 搜尋與排序：`indexOf`, `lastIndexOf`, `includes`, `sort`, `reverse`
* 轉為字串：`join`, `toString`, `toLocaleString`
* 靜態函式：`Array.isArray`, `Array.from`, `Array.of`

| 方法 | 說明 | 回傳值 | 修改原始陣列 |
| --------------------- | -------------------------- | ---------------------- | ------------ |
| Array.isArray() | 判斷是否為陣列 | true 或 false | X |
| [at()](#at) | 回傳對應索引的元素 | 元素或 undefined | X |
| concat() | 合併陣列 | 合併後的新陣列 | X |
| [every()](#every) | 是否所有元素皆符合條件 | true 或 false | X |
| [filter()](#filter) | 篩選符合判斷條件的項目 | 符合條件的陣列 | X |
| [find()](#find) | 找第一個符合條件的元素 | 元素或 undefined | X |
| findIndex() | 找第一個符合條件的元素索引 | 索引值或 -1 | X |
| [forEach()](#forEach) | 迭代每個元素 | undefined | X |
| includes() | 是否含有指定的元素 | true 或 false | X |
| [indexOf()](#indexOf) | 從開頭往末端找指定元素的索引，未找到則回傳 `-1` | 索引值或 -1 | X |
| join(separator) | 把所有元素轉成字串並以指定的 `separator` 串接，若未指定，則使用 `,` | 字串 | X |
| [lastIndexOf()](#lastIndexOf) | 從末端往開頭找指定元素的索引，未找到則回傳 `-1` | 索引值或 -1 | X |
| [map()](#map) | 迭代每個元素 | 新的陣列 | X |
| pop() | 從陣列末端移除一個元素 | 移除的元素 | V |
| push() | 從陣列末端插入元素 | 陣列的新長度 | V |
| [reduce()](#reduce) | 結合陣列內的元素來產生單一個值 | 結合的最終結果 | X |
| reverse() | 反轉陣列元素的順序 | 反轉後的陣列 | V |
| shift() | 從陣列開頭移除一個元素 | 移除的元素 | V |
| slice(start, end) | 回傳索引值從 start 到 end 但不含 end 的元素，淺層拷貝 | 新的陣列 | X |
| [some()](#some) | 是否有一個元素符合條件 | true 或 false | X |
| [sort()](#sort) | 排序陣列 | 排序後的陣列 | V |
| [splice()](#splice) | 刪除元素、插入新元素 | 被刪除的元素組成的陣列 | V |
| toString() | 將陣列轉成字串 | 字串 | X |
| unshift() | 從陣列開頭插入元素 | 陣列的新長度 | V |

## at()
:::warning
大部分瀏覽器在 2021 年 7、8 月已支援，但 Safari 至 2022 年 3 月才支援，使用上需注意支援度
:::

* 回傳對應索引的元素，若未找到，則回傳 `undefined`
* 語法：`array.at(index)`
* 參數：
* index：指定的索引
* 0 或正整數：等同 `array[index]`
* 負整數：從陣列末端開始
* 在欲取得陣列最後一個元素時，比起使用 `array[array.length - 1]`，寫法更加簡潔

const arr = ['a', 'b', 'c', 'd'];

arr.at(0); // 'a'
arr.at(-1); // 'd'
arr.at(4); // undefined
arr.at(-5); // undefined
arr.at(); // 'a'
'qwer'.at(0); // 'q'

arr[0]; // 'a'
arr[-1]; // undefined
arr[4]; // undefined

## every()
* 檢查陣列中的所有元素是否都通過了給定函式所實作的測試
* 語法：`array.every(callbackFn, thisArg)`
* 參數：
* callbackFn：
* element：目前處理的元素
* index：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 every() 方法的 Array 本身
* thisArg：（選擇性）執行 `callbackFn` 時當作 `this` 的值

const arr = [1, 2, 3];
arr.every(x => x > 0); // true
arr.every(x => x > 1); // false

const thisArg = { key: 'value' };
arr.every(x => {
  console.log(this); // Window {}
  return x > 0;
}, thisArg);
arr.every(function (x) {
  console.log(this); // {key: 'value'}
  return x > 0;
}, thisArg);

## filter()
* 會回傳一個新的陣列，其內容為原陣列中通過給定函式檢驗的所有元素
* 語法：`array.filter(callbackFn, thisArg)`
* 參數：
* callbackFn：
* element：目前處理的元素
* index：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 filter() 方法的 Array 本身
* thisArg：（選擇性）執行 `callbackFn` 時當作 `this` 的值

## find()
* 回傳第一個滿足所提供之給定函式的元素
* 語法：`array.find(callbackFn, thisArg)`
* 參數：
* callbackFn：
* element：目前處理的元素
* index：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 find() 方法的 Array 本身
* thisArg：（選擇性）執行 `callbackFn` 時當作 `this` 的值

## forEach()
* 將陣列內的每個元素傳入並執行給定的函式一次
* 語法：`array.forEach(callbackFn, thisArg)`
* 參數：
* callbackFn：
* element：目前處理的元素
* index：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 forEach() 方法的 Array 本身
* thisArg：（選擇性）執行 `callbackFn` 時當作 `this` 的值

const arr = [1, 2, 3];
let sum = 0;

arr.forEach((item) => sum += item);
console.log(arr); // [1, 2, 3]

arr.forEach((item, idx, array) => array[idx] = item * item);
console.log(arr); // [1, 4, 9]

## indexOf()
* 從開頭往末端找指定元素的索引，未找到則回傳 -1
* 無法找 `NaN`，若要檢查是否有 `NaN`，可以用 `array.includes()`
* 語法：`array.indexOf(searchElement, fromIndex)`
* 參數：
* searchElement：要搜尋的元素
* fromIndex：（選擇性）開始搜尋的 index

const arr = ['a', 'b', 'c', 'd'];

arr.indexOf('c'); // 2
arr.indexOf('c', -1); // -1。從 'd' 開始往末端找
arr.indexOf('c', -3); // 2。從 'b' 開始往末端找
arr.indexOf('c', -5); // 2。fromIndex 小於負的陣列長度，會當作從 index 0 開始往末端找
arr.indexOf('c', 4); // -1。fromIndex 大於等於陣列長度，不會搜尋

## lastIndexOf()
* 從末端往開頭找指定元素的索引，未找到則回傳 -1
* 無法找 `NaN`，若要檢查是否有 `NaN`，可以用 `array.includes()`
* 語法：`array.lastIndexOf(searchElement, fromIndex)`
* 參數：
* searchElement：要搜尋的元素
* fromIndex：（選擇性）開始搜尋的 index

const arr = ['a', 'b', 'c', 'd'];

arr.lastIndexOf('c'); // 2
arr.lastIndexOf('c', -1); // 2。從 'd' 開始往開頭找
arr.lastIndexOf('c', -3); // -1。從 'b' 開始往開頭找
arr.lastIndexOf('c', -5); // -1。fromIndex 小於負的陣列長度，不會搜尋
arr.lastIndexOf('c', 4); // 2。fromIndex 大於等於陣列長度，會當作從 index arr.length - 1 開始往開頭找

## map()
* 會回傳一個新的陣列，其內容為原陣列的每一個元素經由給定函式運算後所回傳的結果之集合
* 語法：`array.map(callbackFn, thisArg)`
* 參數：
* callbackFn：
* element：目前處理的元素
* index：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 map() 方法的 Array 本身
* thisArg：（選擇性）執行 `callbackFn` 時當作 `this` 的值

## reduce()
* 依 `callbackFn` 結合陣列內的元素來產生單一個值
* 可應用在元素累加或比較。除了數學計算用途外，只要能把兩個值（例如兩個物件）結合成一個同型別的值的函式都可使用
* [MDN 上使用範例](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#examples "Array.prototype.reduce() - JavaScript | MDN")
* 語法：`array.reduce(callbackFn, initialValue)`
* 參數：
* callbackFn：進行縮減（reduction）作業的函式，以某種方式把兩個值結合或化簡為單一個值，並回傳那個縮減後的值
* accumulator：縮減作業目前為止累積的結果
* currentValue：目前處理的元素
* currentIndex：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 reduce() 方法的 Array 本身
* initialValue：（選擇性）傳入 `callbackFn` 的初始值。若沒寫則會使用陣列第一個元素作為初始值
* 空陣列呼叫 reduce() 且未提供初始值，會導致 TypeError。

const arr = [135, 26, 17, 90];

arr.reduce((x, y) => x + y); // 268。元素累加
arr.reduce((x, y) => x > y ? x : y); // 135。回傳最大值
arr.reduce((x, y) => x > y ? x : y, 200); // 200。回傳最大值

## some()
* 檢查陣列中是否至少有一個元素通過了給定函式所實作的測試
* 語法：`array.some(callbackFn, thisArg)`
* 參數：
* callbackFn：
* element：目前處理的元素
* index：（選擇性）目前處理的元素的 index
* array：（選擇性）呼叫 some() 方法的 Array 本身
* thisArg：（選擇性）執行 `callbackFn` 時當作 `this` 的值

const arr = [1, 2, 3];
arr.some(x => x > 1); // true
arr.some(x => x > 3); // false

## sort()
* 排序陣列的元素，若未傳參數，則依字母順序排列
* 若不想修改到原本的陣列，可以用 `toSorted()`（需留意支援度）
* 語法：`array.sort(compareFn)`
* 參數：
* compareFn(a, b) ：（選擇性）比較函式，依照回傳值排序
* 回傳值 > 0：a 排在 b 後方
* 回傳值 < 0：a 排在 b 前方
* 回傳值 = 0：維持原本的順序

const arr = [135, 26, 17, 90];

arr.sort(); // [135, 17, 26, 90]
arr.sort((a, b) => a - b); // [17, 26, 90, 135]，由小至大
arr.sort((a, b) => b - a); // [135, 90, 26, 17]，由大至小

## splice()
* 從第 `startIndex` 開始刪除 `deleteCount` 筆資料，插入新元素 `item`
* 語法：`array.splice(startIndex, deleteCount, item)`
* 參數：
* startIndex：開始的 index
* deleteCount：（選擇性）刪除的筆數
* item：（選擇性）插入的新元素

const arr = [1, 2, 3, 4, 5, 6];

arr.splice(4); // [5, 6]
console.log(arr); // [1, 2, 3, 4]

arr.splice(1, 2 , 'a', 'b'); // [2, 3]
console.log(arr); // [1, 'a', 'b', 4]

arr.splice(2, 0, ['aa', 'bb'], 'cc'); ; // []
console.log(arr); // [1, 'a', ['aa', 'bb'], 'cc', 'b', 4]

## 資料來源
* [Array - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array - JavaScript | MDN")
* [JavaScript大全 第七版 | 作者： David Flanagan](https://www.gotop.com.tw/books/bookdetails.aspx?types=a&bn=A637 )

---

:::info
建立日期：2020-12-17
更新日期：2024-01-19
:::