JS中如何使用 filter() 方法過濾數組元素

更新時間：2025年01月17日 16:56:03 作者：瘋狂的沙粒

filter()方法是JavaScript中用于過濾數組元素的常用方法,它接受一個回調函數作為參數,返回一個新數組,本文總結了使用filter()方法的最佳實踐,感興趣的朋友一起看看吧

1. 引言

在 JavaScript 中，filter() 方法用于從數組中篩選出符合特定條件的元素，并返回一個新數組。與 map() 方法不同，filter() 返回的數組只包含滿足條件的元素，而忽略不符合條件的元素。

filter() 是不可變的，即它不會改變原始數組，而是返回一個新的數組。

2. filter() 方法基本使用

filter() 方法概述

filter() 方法用于篩選出數組中符合條件的元素。它接受一個回調函數作為參數，這個回調函數對每個數組元素執(zhí)行某種條件測試，返回 true 或 false。如果返回 true，該元素會被保留在新數組中；如果返回 false，則該元素會被排除。

語法

let newArray = array.filter(function(currentValue, index, array) {
  // 返回 true 或 false，決定元素是否保留
});

currentValue：當前元素的值。
index：當前元素的索引（可選）。
array：原數組本身（可選）。

示例：基本的 filter() 使用

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
  return value % 2 === 0;  // 只保留偶數
});
console.log(evenNumbers);  // 輸出：[2, 4]

在上面的代碼中，filter() 方法遍歷了數組 arr 中的每個元素，并根據條件 value % 2 === 0 過濾出所有偶數，返回了一個新數組 evenNumbers。

3. filter() 與其他遍歷方法的比較與 map() 的比較

map() 和 filter() 都是數組遍歷方法，但它們的目的不同：

map() 用于遍歷數組，并返回一個新的數組，該數組的每個元素是原數組元素經過回調函數處理后的結果。
filter() 用于篩選數組中的元素，并返回一個包含符合條件元素的新數組。

map() 示例：

let arr = [1, 2, 3, 4, 5];
let doubled = arr.map(function(value) {
  return value * 2;  // 將每個元素翻倍
});
console.log(doubled);  // 輸出：[2, 4, 6, 8, 10]

filter() 示例：

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
  return value % 2 === 0;  // 只保留偶數
});
console.log(evenNumbers);  // 輸出：[2, 4]

與 forEach() 的比較

forEach() 和 filter() 都可以用于遍歷數組，但有幾個關鍵的不同點：

forEach() 不會返回一個新數組，它只是對數組中的每個元素執(zhí)行一個函數。
filter() 會返回一個新數組，且新數組只包含符合條件的元素。

forEach() 示例：

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(value) {
  console.log(value * 2);  // 輸出：2, 4, 6, 8, 10（沒有返回新數組）
});

filter() 示例：

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
  return value % 2 === 0;  // 只保留偶數
});
console.log(evenNumbers);  // 輸出：[2, 4]

與 reduce() 的比較

reduce() 是一個不同于 filter() 的方法，它用于將數組中的所有元素聚合成一個單一的值（如總和、最大值等），而 filter() 用于返回符合條件的元素的新數組。

reduce() 示例：

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);  // 輸出：15（數組元素的總和）

4. 實際項目中的 filter() 使用示例

示例 1：篩選符合條件的產品

假設你有一個產品列表，包含每個產品的名稱和價格，你希望篩選出價格大于 100 的產品。

let products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 150 },
  { name: 'Charger', price: 20 }
];
let expensiveProducts = products.filter(function(product) {
  return product.price > 100;  // 篩選出價格大于 100 的產品
});
console.log(expensiveProducts);

輸出：

[
{ name: 'Laptop', price: 1200 },
{ name: 'Phone', price: 800 },
{ name: 'Tablet', price: 150 }
]

示例 2：過濾用戶數據

假設你有一個用戶列表，包含姓名、年齡等信息，你希望篩選出年齡大于 18 的用戶。

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 },
  { name: 'David', age: 15 }
];
let adults = users.filter(function(user) {
  return user.age > 18;  // 篩選出年齡大于 18 的用戶
});
console.log(adults);

輸出：

[
{ name: 'Alice', age: 25 },
{ name: 'Charlie', age: 30 }
]

示例 3：篩選異步操作中的數據

在處理異步操作時，可以使用 filter() 結合 Promise 來篩選異步操作結果。例如，假設你需要篩選出滿足某些條件的 API 數據。

let ids = [1, 2, 3, 4, 5];
let promises = ids.map(function(id) {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(response => response.json());
});
Promise.all(promises).then(function(posts) {
  let filteredPosts = posts.filter(function(post) {
    return post.userId === 1;  // 只保留 userId 為 1 的帖子
  });
  console.log(filteredPosts);
});