Winter.

[JS] 常用的 Array Method

1. Array.prototype.filter()

透過傳入的 callback 函式作檢驗，回傳值為 true 時將當前的元素保留至新陣列中。

var newArray = arr.filter(callback[, thisArg])

callback 包含三個參數：
　1. currentValue：目前迭代中的元素
　2. currentIndex (optional)：目前迭代中的索引值
　3. array (optional)：呼叫 filter() 的陣列

thisArg (optional) 預設為 undefined，若有給則會被作為 callback 的 this 值。

var rawData= [12, 5, 8, 130, 44];
function isBiggerThanTen(value) {
  return value >= 10;
}
var newArray = rawData.filter(isBiggerThanTen);
console.log(newArray);
// expected output: [12, 130, 44]
// ES6
const rawData= [12, 5, 8, 130, 44];
const newArray = rawData.filter(el => el >= 10);

2. Array.prototype.map()

透過傳入的 callback 函式作運算，將運算結果儲存在新陣列中。

var newArray = arr.map(callback[, thisArg]);

參數與 filter 方法雷同。

const rawData= [12, 5, 8, 130, 44];
const newArray = rawData.map(el => el * 2);
console.log(newArray);
// expected output: [24, 10, 16, 260, 88]

3. Array.prototype.reduce()

將陣列和累加器傳入 callback 做處理，最後回傳單一值。

arr.reduce(callback[, initialValue]);

callback 包含四個參數：
　1. accumulator：累加器
　2. currentValue：目前迭代中的元素
　3. currentIndex (optional) ：目前迭代中的索引值
　4. array (optional)：呼叫 reduce() 的陣列

initialValue (optional)，第一次呼叫時累加器的初始值，若無則預設為陣列第一個元素。

const rawData = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(rawData.reduce(reducer));
// expected output: 10 (1 + 2 + 3 + 4)
console.log(rawData.reduce(reducer, 5));
// expected output: 15 (5 + 1 + 2 + 3 + 4)

4. Array.prototype.sort()

將陣列排序後回傳，預設排序是根據 Unicode 編碼位置而定。可以給定一個比較的函式，來定義排序方式。

arr.Sort(compareFunction);

若有給定 compareFunction，且 a 和 b為被比較之兩元素，則：

  • 若 compareFunction(a, b) 的回傳值小於 0，則會把 a 排在 b 前面
  • 若 compareFunction(a, b) 的回傳值大於 0，則會把 b 排在 a 前面
  • 若 compareFunction(a, b) 回傳 0，則 a 與 b 皆不會改變彼此的順序，但會與其他全部的元素比較來排序。備註：ECMAscript 標準並不保證這個行為，因此不是所有瀏覽器（如 Mozilla 版本在 2003 以前）都遵守此行為
  • compareFunction(a, b) 在給予一組特定元素 a 及 b 為此函數之兩引數時必須總是回傳相同的值。若回傳值不一致，排序順序則為 undefined

比較數字可以直接使用函式運算式：

const rawData = [1, 2, 11];
console.log(rawData.sort());
// expected output: [1, 11, 2] (sort by Unicode)
console.log(rawData.sort((a,b) => a-b));
// expected output: [1, 2, 11]

Winter Weng