filter 是JavaScript 數(shù)組用於篩選符合條件元素的方法，其核心作用是“過濾”，返回一個新數(shù)組且原數(shù)組不變。它遍歷每個元素並執(zhí)行回調(diào)函數(shù)，若返回true 則保留該元素，最終形成包含所有符合條件元素的新數(shù)組。基本語法為const newArray = array.filter((element, index, array) => { ... });，最常用參數(shù)是element。 1. 可直接用於基礎(chǔ)數(shù)據(jù)類型，如篩選大於10 的數(shù)字或包含特定關(guān)鍵詞的字符串；2. 可處理對像數(shù)組，通過訪問對象屬性進(jìn)行條件判斷，甚至組合多個條件；3. 可與map、sort 等方法鍊式調(diào)用，實現(xiàn)複雜的數(shù)據(jù)處理流程，例如先過濾再提取字段。

數(shù)組的filter方法是JavaScript 中非常實用的一個工具，用來從數(shù)組中篩選出符合條件的元素。它的核心作用就是“過濾”，返回一個新數(shù)組，原數(shù)組不變。

什麼是filter？

filter是數(shù)組的一個方法，它會遍歷數(shù)組中的每一個元素，並對每個元素執(zhí)行一個回調(diào)函數(shù)。如果回調(diào)函數(shù)返回true ，這個元素就會被保留下來，放進(jìn)新的數(shù)組裡；如果返回false ，就跳過。最終返回的是一個包含所有符合條件元素的新數(shù)組。

基本語法：

 const newArray = array.filter((element, index, array) => {
  // 返回true 表示保留該元素});

你最常需要關(guān)注的就是第一個參數(shù)element ，也就是當(dāng)前遍歷到的元素。

怎麼用filter 過濾基礎(chǔ)數(shù)據(jù)？

最常見的使用場景是對一組數(shù)字或字符串進(jìn)行篩選。比如你想找出所有大於10 的數(shù)字：

 const numbers = [5, 12, 8, 17, 3];
const bigNumbers = numbers.filter(num => num > 10);
// 結(jié)果：[12, 17]

或者你想過濾出包含某個關(guān)鍵詞的字符串：

 const fruits = ['apple', 'banana', 'grape', 'orange'];
const filteredFruits = fruits.filter(fruit => fruit.includes('ap'));
// 結(jié)果：['apple', 'grape']

這種寫法很簡潔，而且邏輯清晰，適合大多數(shù)基礎(chǔ)過濾需求。

如何結(jié)合對像數(shù)組使用filter？

當(dāng)你處理的是對像數(shù)組時， filter同樣非常好用。比如你有一組用戶數(shù)據(jù)，想篩選出年齡大於25 的用戶：

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

const adults = users.filter(user => user.age > 25);
// 結(jié)果：包含Bob 和Charlie 的數(shù)組

這裡的關(guān)鍵點在於訪問對象的屬性，只要在回調(diào)函數(shù)中判斷屬性值即可。

有時候你可能還需要更複雜的條件，比如同時滿足多個條件：

• 年齡大於25
• 名字長度小於5

可以這樣寫：

 const filteredUsers = users.filter(user => user.age > 25 && user.name.length < 5);

filter 能不能和其它方法配合使用？

當(dāng)然可以。 filter經(jīng)常和map 、 sort等鍊式調(diào)用一起使用，形成數(shù)據(jù)處理流程。

舉個例子：先過濾出價格高於100 的商品，再提取它們的名字：

 const products = [
  { name: 'Phone', price: 800 },
  { name: 'Mouse', price: 20 },
  { name: 'Laptop', price: 1200 }
];

const expensiveProductNames = products
  .filter(product => product.price > 100)
  .map(product => product.name);

// 結(jié)果：['Phone', 'Laptop']

這種鍊式寫法不僅代碼整潔，而且邏輯清晰，是實際開發(fā)中常見做法。

基本上就這些。 filter 方法雖然看起來簡單，但在實際開發(fā)中用途廣泛，掌握好它的用法能讓你處理數(shù)組數(shù)據(jù)更加得心應(yīng)手。

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