JS30 - 04 Array Cardio 1

這篇筆記記錄如何使用 JavaScript Array 的操作方法，包括 filter、map、sort、reduce，並且透過練習來熟悉這些方法的使用

📌 filter：篩選符合條件的元素

filter() 方法會將所有陣列中的元素分別傳入 callback 函式，並將所有回傳值為 true 的元素建構成新的陣列，此方法不會改變原陣列

// 篩選 1500 年到 1600 年之間的發明家
const filteredInventors = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600);

map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由 callback 函式運算後所回傳的結果之集合

// 取得發明家的全名
const fullNames = inventors.map((inventor) => `${inventor.first} ${inventor.last}`);

sort() 方法會原地對一個陣列的所有元素進行排序，並回傳排序後的陣列。預設排序是根據字串的 Unicode 編碼順序

// 依照發明家的出生年份排序
const sortedInventors = inventors.sort((a, b) => a.year - b.year);

比較數字時，可以使用 a - b 來排序

const numbers = [5, 2, 10, 1];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 2, 5, 10]

若要依照字串排序，可以使用 localeCompare() 方法

// 依照發明家的姓氏排序
const sortedInventors = inventors.sort((a, b) => a.last.localeCompare(b.last));

localeCompare() 方法會比較兩個字串，並回傳一個數字
- 回傳值為負數，表示 a 排在 b 前面
- 回傳值為正數，表示 b 排在 a 前面
- 回傳值為 0，表示 a 與 b 相等

reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入 callback 函式，將陣列化為單一值

// 計算所有發明家的年齡總和
const totalYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0);

簡易數字累加範例：

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((total, number) => total + number, 0);
console.log(total); // 15

拆解過程：