JavaScript 的filter 方法用於創(chuàng)建一個新數(shù)組，包含所有通過回調(diào)函數(shù)測試的元素。 1. 基本用法：filter 遍歷數(shù)組每個元素，回調(diào)返回true 則保留該元素，如篩選大於25 的數(shù)字；2. 過濾對像數(shù)組：可通過對象屬性進行篩選，例如選出年齡大於等於18 的用戶；3. 多條件過濾：可在回調(diào)中使用邏輯運算符組合多個條件，如同時滿足年齡大於20 且名字包含字母"a"；4. 動態(tài)過濾：結(jié)合輸入框?qū)崿F(xiàn)實時搜索功能，根據(jù)用戶輸入動態(tài)更新篩選結(jié)果，確保大小寫不敏感。

用JavaScript 的filter 方法過濾數(shù)組元素，其實就是一個很實用又簡潔的操作。它能讓你從一個數(shù)組中挑出符合條件的成員，生成新數(shù)組，原數(shù)組不改動。重點是寫好那個判斷條件，也就是回調(diào)函數(shù)里的邏輯。

基本用法：怎麼寫一個最簡單的filter

filter 方法會遍歷數(shù)組中的每個元素，並對每個元素執(zhí)行你提供的回調(diào)函數(shù)。如果回調(diào)返回true，這個元素就會被保留下來，放進新的數(shù)組裡。

舉個例子：

 const numbers = [10, 20, 30, 40, 50];
const filtered = numbers.filter(num => num > 25);

上面這段代碼會留下大於25 的數(shù)字，結(jié)果就是[30, 40, 50] 。這是filter 最常見的用法之一，適用於篩選符合某個數(shù)值條件的數(shù)據(jù)。

過濾對像數(shù)組：按屬性篩選數(shù)據(jù)

當(dāng)你要處理的是對像數(shù)組時，filter 同樣非常有用。比如你有一組用戶數(shù)據(jù)，想根據(jù)年齡、狀態(tài)或者其他字段來篩選。

例如：

 const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 }
];

const adults = users.filter(user => user.age >= 18);

這樣就能把成年人挑出來。這種場景在前端展示數(shù)據(jù)時特別常見，比如只顯示已激活的賬戶、未完成的任務(wù)等等。

多條件過濾：組合判斷更靈活

有時候光一個條件不夠，需要多個條件一起判斷。這時候可以在回調(diào)函數(shù)中加邏輯判斷。

比如我們要找年齡大於20 並且名字裡包含字母"a" 的人：

 const results = users.filter(user => user.age > 20 && user.name.includes('a'));

或者也可以寫得更清晰一點：

 users.filter(user => {
  return user.age > 20 && user.name.toLowerCase().includes('a');
});

這裡的小細(xì)節(jié)是toLowerCase() ，避免大小寫影響匹配結(jié)果。這種多條件的寫法在搜索、篩選功能中很實用。

配合輸入框動態(tài)過濾：讓頁面動起來

filter 不只是靜態(tài)數(shù)據(jù)處理工具，還可以配合用戶輸入做實時篩選。比如做一個搜索框，用戶一打字，列表就自動更新。

HTML 結(jié)構(gòu)大概是這樣：

 <input type="text" id="search">
<ul id="list"></ul>

JS 部分可以這樣寫：

 const names = ['Apple', 'Banana', 'Cherry', 'Date'];
const input = document.getElementById('search');
const list = document.getElementById('list');

input.addEventListener('input', () => {
  const keyword = input.value.toLowerCase();
  const filtered = names.filter(name => name.toLowerCase().includes(keyword));

  list.innerHTML = filtered.map(name => `<li>${name}</li>`).join(&#39;&#39;);
});

這樣就能實現(xiàn)一個簡單但有效的搜索過濾功能。注意裡面用了兩次toLowerCase() ，確保大小寫不影響搜索結(jié)果。

基本上就這些。 filter 方法雖然簡單，但用好了能解決很多實際問題。關(guān)鍵在於理解它的機制和如何寫出正確的判斷條件。

以上是使用JavaScript過濾器方法過濾數(shù)組元素的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！