關於filter()

• filter() 是用來「挑資料」而不是「改資料」
• 從陣列中篩選出符合條件的資料，並回傳一個新的陣列。
• 它不會修改原本的陣列。

filter 基本語法

array.filter(function(item, index, array) {
    return 條件;
});

三個參數代表什麼？

filter() 就像是在挑水果：

let fruits = ["蘋果", "香蕉", "葡萄", "西瓜"];

符合條件的留下

["蘋果","葡萄"]

什麼時候會使用 filter()？

1. 搜尋功能（最常見）

let products = [
  "蘋果",
  "香蕉",
  "葡萄",
  "蘋果汁"
];
let result = products.filter(function(item) {
    return item.includes("蘋果");
});
console.log(result);
// (2) ['蘋果', '蘋果汁']

補充:
includes() 是 JavaScript 用來判斷是否包含某個值的方法，有就回傳 true，沒有就回傳 false

let fruits = ["蘋果", "香蕉", "葡萄"];

console.log(fruits.includes("香蕉")); // true
console.log(fruits.includes("西瓜")); // false

2. 篩選及格學生

let students = [
  { name: "小明", score: 90 },
  { name: "小華", score: 45 },
  { name: "小美", score: 80 }
];
let pass = students.filter(function(student) {
  return student.score >= 60;
});
console.log(pass);

//輸出
[
  { name: "小明", score: 90 },
  { name: "小美", score: 80 }
]

3. 電商網站-只看 1000 元以下商品

let products = [
  { name: "滑鼠", price: 500 },
  { name: "鍵盤", price: 1800 },
  { name: "耳機", price: 900 }
];
let cheap = products.filter(function(item) {
  return item.price <= 1000;
});
console.log(cheap);

//輸出
[
{name: '滑鼠', price: 500},
{name: '耳機', price: 900}
]

4. Todo List-只看未完成事項

let todos = [
  { task: "買牛奶", done: true },
  { task: "寫程式", done: false },
  { task: "運動", done: false }
];
let undone = todos.filter(function(todo) {
  return !todo.done;
});
console.log(undone);

//輸出
[
{task: '寫程式', done: false},
{task: '運動', done: false}
]

5. 後端 API 回傳資料

let users = [
  { name: "Tom", active: true },
  { name: "Amy", active: false },
  { name: "John", active: true }
];
let activeUsers = users.filter(function(user) {
  return user.active;
});
console.log(activeUsers);

//輸出
[
{name: 'Tom', active: true},
{name: 'John', active: true}
]

總結

• 用途：從陣列中篩選符合條件的元素。
• 回傳值：永遠是新的陣列（可能是空陣列）。
• 原陣列：不會被修改。
• 判斷依據：return true 保留，return false 捨棄。
• 適用情境：搜尋、分類、篩選、過濾資料，是前端顯示列表、後端處理 API 資料、資料分析中最常見的操作之一。