常用陣列方法

前言

本篇記錄一些工作上常用到的陣列方法，目的為能夠快速查找與使用，若需要更深入的解釋或範例可至 MDN 閱讀。

文中有些函數為 Pure function，意即操作時不會改變原陣列的內容，也可稱為無副作用，其餘的函數在操作後原陣列皆有可能產生變動。

一些常用到的 ES6 函數如 some()、every()、map()、filter() 的回呼函數內的參數範例只帶第 1 個 element，後面的 index、array 分別代表各元素索引值與該陣列就不加以贅述與示範，相信用過 forEach() 的人都很孰悉了。

.some()

var arr = [1, 2, 3, 4, 5];

const res1 = arr.some(item => item === 3);
console.log(res1); // true

const res2 = arr.some(item => item === 100);
console.log(res2); // false

• 用途：透過給定函數驗證元素是否滿足條件，只要有 1 個滿足即回傳 true，全部不滿足則回傳 false
• 參數：callback(element[, index[, array]])[, thisArg]
• 回傳：布林值

.every()

var arr = [1, 2, 3, 4, 5];

const res1 = arr.every(item => item > 0);
console.log(res1); // true

const res2 = arr.every(item => item > 1);
console.log(res2); // false

• 用途：透過給定函數驗證元素是否滿足條件，全部滿足即回傳 true，只要有 1 個不滿足即回傳 false
• 參數：callback(element[, index[, array]])[, thisArg]
• 回傳：布林值

.map()

var arr = [1, 2, 3, 4, 5];

const res1 = arr.map(item => {});
console.log(res1); // [ undefined, undefined, undefined, undefined, undefined ]

const res2 = arr.map(item => item + 5);
console.log(res2); // [ 6, 7, 8, 9, 10 ]

const res3 = arr.map(item => item > 3);
console.log(res3); // [ false, false, false, true, true ]

const res4 = arr.map(item => {
  if (item > 3) return item;
});
console.log(res4); // [ undefined, undefined, undefined, 4, 5 ]

• Pure function
• 用途：透過給定函數對各元素運算後回傳一個新陣列，回傳的新陣列長度與原陣列相同
• 注意：沒有給予 return 的元素預設回傳 undefined，需注意各元素是否有針對各種條件 return 期望的值
• 參數：callback(element[, index[, array]])[, thisArg]
• 回傳：新陣列

.filter()

var arr = [1, 2, 3, 4, 5];

const res1 = arr.filter(item => {});
console.log(res1); // []

const res2 = arr.filter(item => item > 2);
console.log(res2); // [ 3, 4, 5 ]

• Pure function
• 用途：透過給定函數對各元素運算後回傳一個新陣列
• 注意：回呼函數若沒有 return 則會回傳空陣列
• 參數：callback(element[, index[, array]])[, thisArg]
• 回傳：包含滿足條件元素的新陣列

.slice()

var arr = [1, 2, 3, 4, 5];

const res1 = arr.slice(3);
console.log(res1); // [ 4, 5 ]

const res2 = arr.slice(2, 4);
console.log(res2); // [ 3, 4 ]

const res3 = arr.slice(1, -1);
console.log(res3); // [ 2, 3, 4 ]

• Pure function
• 用途：依據參數擷取元素後回傳
• 參數：begin[, end]
  • begin（起始值）
    • 可使用負數索引，表由陣列的最末項開始提取
    • 若 begin 為 undefined 則從索引 0 開始提取
  • end（結束值）
    • 可使用負數索引，表由陣列的最末項開始提取
    • 若省略 end 則會提取至陣列的最末項
    • 若 end 大於陣列長度，則會提取至陣列的最末項
• 回傳：包含擷取範圍內元素的新陣列

.concat()

var arr = [1, 2, 3, 4, 5];
var str = 'Hello World';
var obj = { name: 'Jun' };
var arr2 = [6, 7, 8];

const res1 = arr.concat(str);
console.log(res1); // [ 1, 2, 3, 4, 5, 'Hello World' ]

const res2 = arr.concat(obj);
console.log(res2); // [ 1, 2, 3, 4, 5, { name: 'Jun' } ]

const arr3 = arr.concat(arr2);
console.log(arr3); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

• Pure function
• 用途：合併陣列
• 參數：value1[, value2[, ...[, valueN]]]
• 回傳：合併後的新陣列

.sort()

var arr = [100, 25, 75, 12500, 50, 600];

const res1 = arr.sort((x, y) => (x > y ? 1 : -1));
console.log(res1); // [ 25, 50, 75, 100, 600, 12500 ]

const res2 = arr.sort((x, y) => (x < y ? 1 : -1));
console.log(res2); // [ 12500, 600, 100, 75, 50, 25 ]

• 用途：對原陣列進行排序，預設排序行為根據 Unicode 編碼位置而定
• 參數：[compareFunction]
  • x 與 y 比較後，若回傳值小於 0 則會把 x 排在 y 前面
  • x 與 y 比較後，若回傳值大於 0 則會把 x 排在 y 後面
  • x 與 y 比較後，若回傳值等於 0 則 x 與 y 皆不改變順序
• 回傳：原地排序後的陣列，非原陣列的拷貝

.shift()

var arr = [1, 2, 3, 4, 5];

console.log(ary.shift()); // 1
console.log(ary); // [ 2, 3, 4, 5 ]

var empty = [];
console.log(empty.shift()); // undefined

• 用途：移除陣列中的第 1 個元素
• 參數：無
• 回傳：被移除的元素（若陣列為空則回傳 undefined）

.unshift()

var arr = [1, 2, 3, 4, 5];

console.log(arr.unshift('Hello', 'World')); // 7
console.log(arr); // [ 'Hello', 'World', 1, 2, 3, 4, 5 ]

• 用途：將參數自陣列的開頭插入
• 參數：element1[, ...[, elementN]]
• 回傳：改動後的陣列長度

.pop()

var arr = [1, 2, 3, 4, 5];

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

var empty = [];
console.log(empty.pop()); // undefined

• 用途：移除陣列中的最後 1 個元素
• 參數：無
• 回傳：被移除的元素（若陣列為空則回傳 undefined）

.push()

var arr = [1, 2, 3, 4, 5];

console.log(arr.push('Hello', 'World')); // 7
console.log(arr); // [ 1, 2, 3, 4, 5, 'Hello', 'World' ]

• 用途：將參數自陣列的末項插入
• 參數：element1[, ...[, elementN]]
• 回傳：改動後的陣列長度

.splice()

var arr = [1, 2, 3, 4, 5];

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

• 用途：依據參數索引值對陣列刪除或增加元素
• 參數：start[, deleteCount[, item1[, item2[, ...]]]]
  • start（起始值）
    • 若起始值大於陣列長度，則會被設為該陣列的長度
    • 若起始值為負數，則會從該陣列的最末項向前改動
  • deleteCount（由起始值開始計算之後要刪除的元素數量）
    • 若省略 deleteCount 或其值大於該陣列長度 - 起始值，則所有從起始值至該陣列最末項的元素都會被刪除
    • 若 deleteCount 為 0 或負數，則不會有元素被刪除
  • items（刪除完畢後將第 3 至第 n 個參數插入至刪除後的位置）
    • 若給予要插入的元素，則該函數只會依據起始值及結束值刪除陣列中的元素
• 回傳：一個包含被刪除元素的陣列
  • 若只有一個元素被刪除，仍然回傳包含一個被刪除的元素的陣列
  • 若無元素被刪除則回傳空陣列

.join()

var arr = [1, 2, 3, 4, 5];

console.log(arr.join()); // 1,2,3,4,5
console.log(arr.join('')); // 12345
console.log(arr.join('、')); // 1、2、3、4、5
console.log(arr); // [ 1, 2, 3, 4, 5 ]

• 用途：將陣列元素合併後轉為字串並回傳
• 參數：[separator]
  • 用來隔開陣列中各元素的字串
  • 若未給予此參數，則預設以逗號隔開
  • 若給予空字串，合併後元素間則不存在任何字元
• 回傳：字串

.indexOf()

var arr = [1, 2, 3, 4, 5];

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

• 用途：對陣列搜尋參數是否存在於其中
• 參數：searchElement[, fromIndex]
  • searchElement（元素）
    • 欲在陣列中搜尋的元素
  • fromIndex（起始值）
    • 若該值大於或等於該陣列長度，則回傳 -1
    • 若該值為負數，則會從陣列的最末項往回算，最末項的索引值為 -1
• 回傳：找到的元素索引值，若不存在於該陣列中則回傳 -1

.lastIndexOf()

var arr = [1, 2, 3, 4, 5, 2, 3];

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

• 用途：對陣列搜尋參數是否存在於其中（搜尋方向為從陣列末端向前）
• 參數：searchElement[, fromIndex]
  • searchElement（元素）
    • 欲在陣列中搜尋的元素
  • fromIndex（起始值）
    • 於陣列最末項向前搜尋的起始索引值，預設為該陣列長度 -1
    • 若索引值大於等於該陣列長度，則會搜尋整個陣列
    • 若索引值為負數，會從陣列的最末項往回算，最後一個索引值為 -1
• 回傳：找到的元素索引值，若不存在於該陣列中則回傳 -1

.reverse()

var arr = [1, 2, 3, 4, 5];

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

• 用途：反轉陣列
• 參數：無
• 回傳：反轉後的陣列