iT邦幫忙

0

【30 天JavaScript 實戰 】 Day 8|陣列進階

2025-10-17 20:55:39184 瀏覽
  • 分享至 

  • xImage
  •  

今天要進入 JavaScript 陣列的進階階段~
這些方法能讓我們少寫迴圈、程式更俐落!


今日的目標:

  • 理解每個高階陣列方法的用途與語意

1. map()— 映射:把舊資料轉成新資料

map 會「逐一」遍歷陣列,並回傳一個新陣列。

const prices = [100, 200, 300]
const taxIncluded = prices.map(p => p * 1.05)
console.log(taxIncluded) // [105, 210, 315]

使用情境:
把原本的每個元素「轉換」成新的值,像是加稅、轉大寫、包成物件。

2. filter() — 篩選:留下符合條件的元素

filter 會根據條件留下符合的元素,同樣回傳新陣列。

const scores = [45, 80, 90, 60]
const passed = scores.filter(s => s >= 60)
console.log(passed) // [80, 90, 60]

使用情境:
過濾掉不符合條件的資料,例如篩出及格學生、符合價格範圍的商品。

3. reduce() — 歸納:累積成一個值

reduce 用來「累積」結果,例如總和、平均、或轉成物件。

const numbers = [1, 2, 3, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0)
console.log(sum) // 10

使用情境:
加總金額、計算平均、統計數量。

4. find() — 尋找:找到第一個符合條件的元素

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 的資料就可以用喔~

5. some() — 有沒有:只要有一個符合就 true

const hasHighScore = [50, 70, 90].some(s => s > 80)
console.log(hasHighScore) // true

使用情境:
檢查「是否存在」某個條件的元素(例如有沒有人未繳費)。

6. every() — 是否全部:所有都符合才 true

const allPassed = [70, 80, 90].every(s => s >= 60)
console.log(allPassed) // true

使用情境:
檢查所有資料是否都達標,像是所有商品都有庫存。

7. sort() — 排序:改變原陣列順序

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 排序 原陣列(已排序)

/images/emoticon/emoticon61.gif


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言