前端開發
JavaScript sort 與 filter 搭配箭頭函式的範例
用一份商品清單示範 sort 依價格排序、filter 過濾出低於門檻的商品，並提醒 sort 會直接修改原陣列這個容易忽略的副作用，排序前要先複製一份才能保留原始資料。
W
用箭頭函式簡化陣列方法的寫法，一份商品清單當範例：
const shopData = [
{ name: '美商博帝 120G SSD', price: 638 },
{ name: 'SanDisk 120G SSD', price: 599 },
{ name: '美光 MX500 250G SSD', price: 1499 },
];
// 依價格排序
const sorted = shopData.sort((a, b) => a.price - b.price);
// 過濾出價格低於 600 的商品
const cheap = shopData.filter((shop) => shop.price < 600);
sort() 的比較函式回傳負數代表 a 排在 b 前面，回傳正數代表 b 排在前面，a.price - b.price 是「數字由小到大排序」最簡短的寫法——差值是負的（a 比較小）就排前面，符合 sort 的規則。filter() 則是回傳一個布林值，true 的項目留下、false 的項目濾掉。
容易忽略的地方：sort 會直接修改原陣列
const shopData = [{ price: 3 }, { price: 1 }, { price: 2 }];
const sorted = shopData.sort((a, b) => a.price - b.price);
sorted === shopData; // true，是同一個陣列
shopData; // 也被排序過了，不是原本的順序
sort() 是原地排序（in-place），不會回傳一份新陣列，回傳值就是排序後的原陣列本身。如果程式的其他地方還依賴 shopData 原本的順序，這個副作用很容易造成意料之外的 bug——filter() 不會有這個問題，它一律回傳新陣列，不動原本的資料。
需要保留原陣列不變時，排序前先複製一份：
const sorted = [...shopData].sort((a, b) => a.price - b.price);
後來陣列方法又多了幾個好用的新成員，整理在《後來新增的陣列方法：at、findLast、toSorted 這一批》。