在 JavaScript 編程中，數組是最常用的數據結構之一，而數組過濾則是處理數據集合的關鍵操作。filter() 方法提供了一種高效的方式來從數組中篩選出符合特定條件的元素，返回一個新的數組，而不改變原始數組。這種方法在處理對象數組時尤其有用，能夠幫助開發者快速實現數據查詢和篩選功能。

filter() 方法基礎

語法和工作原理

filter() 方法接受一個測試函數作為參數，該函數會對數組中的每個元素進行測試。如果元素通過測試（即函數返回 true），則該元素會被包含在新數組中；否則被排除。

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

• callback: 測試函數，接收三個參數：
  • element: 當前處理的元素
  • index (可選): 當前元素的索引
  • array (可選): 調用 filter 的數組本身
• thisArg (可選): 執行 callback 時使用的 this 值

基本數值數組過濾示例

// 定義一個包含數字的數組
var numbers = [5, 32, 43, 4];// 使用傳統函數語法過濾奇數
var odd = numbers.filter(function(n) {return n % 2 !== 0; // 檢查數字是否為奇數
});// 使用箭頭函數簡化語法
let odd = numbers.filter(n => n % 2 !== 0); 
// 可以進一步簡化為: (n => n % 2)，因為非零數字在布爾上下文中為 true// 結果: odd 包含 [5, 43]

對象數組的過濾

JavaScript 的 filter() 方法同樣適用于對象數組，這使得它成為處理復雜數據集的強大工具。

基本對象過濾示例

// 定義人員對象數組
var people = [{id: 1,name: "John",age: 28
}, {id: 2,name: "Jane",age: 31
}, {id: 3,name: "Peter",age: 55
}];// 使用傳統函數語法過濾年齡小于35歲的人
var young = people.filter(function(person) {return person.age < 35; // 年齡條件測試
});// 使用箭頭函數簡化語法
let young = people.filter(person => person.age < 35);// 結果: young 包含前兩個對象
/*
[{id: 1,name: "John",age: 28
}, {id: 2,name: "Jane",age: 31
}]
*/

高級對象屬性搜索

有時候我們需要在整個對象中搜索特定值，而不僅僅是某個特定屬性：

// 搜索包含字母"J"的任何屬性值
var young = people.filter((obj) => {var flag = false; // 標志變量，用于標記是否找到匹配Object.values(obj).forEach((val) => { // 遍歷對象的所有值if(String(val).indexOf("J") > -1) { // 將值轉換為字符串并檢查是否包含"J"flag = true; // 找到匹配，設置標志return; // 提前退出循環}    });if(flag) return obj; // 如果找到匹配，返回當前對象
});// 結果: 返回包含"J"的對象
/*
[{id: 1,name: "John",age: 28
},{id: 2,name: "Jane",age: 31
}]
*/

filter() 方法的高級應用

多條件過濾

// 多條件過濾：年齡小于35且名字包含"J"
var filteredPeople = people.filter(person => {return person.age < 35 && person.name.includes("J");
});

鏈式調用多個數組方法

// 先過濾再映射提取特定屬性
var names = people.filter(person => person.age < 35).map(person => person.name);// 結果: ["John", "Jane"]

性能考慮和最佳實踐

1. 避免在 filter 中修改原始數組：filter() 方法本身不會改變原數組，但回調函數中的操作可能會。
2. 復雜操作提前終止：對于大型數組，如果可能，在找到所需元素后提前終止循環。
3. 考慮使用索引：如果處理大型數組，可以使用回調函數的 index 參數進行性能優化。

filter() 與其他數組方法對比

flowchart TDA[原始數組] --> B[filter<br>條件篩選]A --> C[map<br>轉換元素]A --> D[reduce<br>累積計算]B --> E[新數組：<br>符合條件的元素]C --> F[新數組：<br>轉換后的元素]D --> G[單一結果：<br>累積值]

實際應用場景

場景一：電子商務產品過濾

const products = [{ id: 1, name: "筆記本電腦", price: 4500, category: "電子" },{ id: 2, name: "襯衫", price: 120, category: "服裝" },{ id: 3, name: "智能手機", price: 2800, category: "電子" }
];// 過濾電子類產品且價格低于3000元的商品
const affordableElectronics = products.filter(product => product.category === "電子" && product.price < 3000
);// 結果: 智能手機

場景二：用戶權限管理

const users = [{ id: 1, name: "管理員", role: "admin", active: true },{ id: 2, name: "編輯", role: "editor", active: true },{ id: 3, name: "訪客", role: "guest", active: false }
];// 獲取所有活躍的非管理員用戶
const activeNonAdminUsers = users.filter(user => user.active && user.role !== "admin"
);

兼容性和替代方案

filter() 方法在 ECMAScript 5 (ES5) 中引入，所有現代瀏覽器都支持。對于需要支持老舊瀏覽器的項目，可以考慮使用 polyfill 或者類似的庫函數（如 Lodash 的 _.filter）。

總結

JavaScript 的 filter() 方法是處理數組數據的強大工具，特別適合從大型數據集中提取符合特定條件的子集。通過掌握其基本用法和高級技巧，開發者可以編寫出更簡潔、高效和可維護的代碼。無論是簡單的數值數組還是復雜的對象數組，filter() 方法都能提供優雅的解決方案。

---

單詞、短語表

單詞(短語)	音標	詞性	詞根/詞綴	釋義	搭配	例子
Filtering	/?f?lt?r??/	名詞/動詞	filter(過濾) + -ing(動名詞后綴)	過濾	data filtering, filtering method	Data filtering is essential for processing large datasets.
Arrays	/??re?z/	名詞	array(數組) + -s(復數)	數組	JavaScript arrays, multidimensional arrays	JavaScript arrays can hold multiple values in a single variable.
Entity	/?ent?ti/	名詞	來自拉丁語 ens(存在)	實體, 存在物	business entity, legal entity	Each database table represents an entity in the system.
Framework	/?fre?mw??rk/	名詞	frame(框架) + work(工作)	框架	development framework, .NET framework	Entity Framework is a popular ORM framework for .NET.
Extensions	/?k?sten??nz/	名詞	extend(擴展) + -sion(名詞后綴) + -s(復數)	擴展, 擴展功能	browser extensions, framework extensions	These extensions enhance the functionality of the base framework.
Bulk	/b?lk/	名詞/形容詞	來自古北歐語 bulki(貨物)	批量, 大量	bulk operations, bulk data	Bulk operations improve performance when handling large datasets.
Merge	/m??rd?/	動詞	來自拉丁語 mergere(浸入)	合并, 融合	merge conflicts, data merge	The bulk merge operation combines insert and update operations.
Contains	/k?n?te?nz/	動詞	con-(一起) + tain(持有) + -s(第三人稱單數)	包含, 含有	array contains, contains method	The new array contains only the elements that passed the test.

.