今天要進入 JavaScript 陣列的進階階段~
這些方法能讓我們少寫迴圈、程式更俐落!
今日的目標:
map 會「逐一」遍歷陣列,並回傳一個新陣列。
const prices = [100, 200, 300]
const taxIncluded = prices.map(p => p * 1.05)
console.log(taxIncluded) // [105, 210, 315]
使用情境:
把原本的每個元素「轉換」成新的值,像是加稅、轉大寫、包成物件。
filter 會根據條件留下符合的元素,同樣回傳新陣列。
const scores = [45, 80, 90, 60]
const passed = scores.filter(s => s >= 60)
console.log(passed) // [80, 90, 60]
使用情境:
過濾掉不符合條件的資料,例如篩出及格學生、符合價格範圍的商品。
reduce 用來「累積」結果,例如總和、平均、或轉成物件。
const numbers = [1, 2, 3, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0)
console.log(sum) // 10
使用情境:
加總金額、計算平均、統計數量。
find 會回傳「第一個」符合條件的元素,找不到就會回傳 undefined。
const users = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'Mary' },
]
const user = users.find(u => u.id === 2)
console.log(user) // { id: 2, name: 'Mary' }
使用情境:
尋找單一特定條件的元素,如找到指定 id 的資料就可以用喔~
const hasHighScore = [50, 70, 90].some(s => s > 80)
console.log(hasHighScore) // true
使用情境:
檢查「是否存在」某個條件的元素(例如有沒有人未繳費)。
const allPassed = [70, 80, 90].every(s => s >= 60)
console.log(allPassed) // true
使用情境:
檢查所有資料是否都達標,像是所有商品都有庫存。
sort 預設按字串排序,所以數字要特別寫比較函式。
const nums = [10, 2, 30]
nums.sort((a, b) => a - b)
console.log(nums) // [2, 10, 30]
使用情境:
排序價格、分數、日期、字母序。
什麼時候要用哪個呢?
| 方法 | 功能 | 是否改原陣列 | 回傳值 |
|---|---|---|---|
| map | 轉換資料 | ❌ | 新陣列 |
| filter | 篩選資料 | ❌ | 新陣列 |
| reduce | 累積結果 | ❌ | 單一值 |
| find | 找第一個符合 | ❌ | 單一元素 / undefined |
| some | 是否有任一符合 | ❌ | 布林值 |
| every | 是否全部符合 | ❌ | 布林值 |
| sort | 排序 | ✅ | 原陣列(已排序) |
![]()