JavaScript中filter() 和find()的區(qū)別對(duì)比小結(jié)
更新時(shí)間：2025年05月08日 10:28:23 作者：胡歌1
filter()?和?find()?都是 JavaScript 數(shù)組的高階函數(shù),用于搜索數(shù)組元素,本文主要介紹了JavaScript中filter() 和find()的區(qū)別對(duì)比,感興趣的可以了解一下
filter() 和 find() 都是 JavaScript 數(shù)組的高階函數(shù)，用于搜索數(shù)組元素，但它們有幾個(gè)關(guān)鍵區(qū)別：
1. 基本區(qū)別
| 特性 | filter() | find() |
|---|---|---|
| 返回值 | 新數(shù)組（包含所有匹配元素） | 第一個(gè)匹配的元素（不是數(shù)組） |
| 空結(jié)果 | 返回空數(shù)組 [] | 返回 undefined |
| 用途 | 篩選多個(gè)符合條件的元素 | 查找第一個(gè)符合條件的元素 |
2. 代碼示例對(duì)比
示例數(shù)組
const users = [
{ id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Charlie', active: true },
{ id: 4, name: 'David', active: true }
];使用 filter()
// 找出所有活躍用戶
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// 輸出: [
// {id: 1, name: 'Alice', active: true},
// {id: 3, name: 'Charlie', active: true},
// {id: 4, name: 'David', active: true}
// ]
// 沒有匹配項(xiàng)時(shí)
const noUsers = users.filter(user => user.age > 100);
console.log(noUsers); // 輸出: []使用 find()
// 查找第一個(gè)活躍用戶
const firstActive = users.find(user => user.active);
console.log(firstActive);
// 輸出: {id: 1, name: 'Alice', active: true}
// 沒有匹配項(xiàng)時(shí)
const notFound = users.find(user => user.age > 100);
console.log(notFound); // 輸出: undefined3. 性能考慮
filter()會(huì)遍歷整個(gè)數(shù)組，即使已經(jīng)找到所有符合條件的元素find()在找到第一個(gè)匹配項(xiàng)后立即停止遍歷
// 性能測(cè)試
const bigArray = Array(1000000).fill(0).map((_, i) => i);
console.time('filter');
bigArray.filter(x => x === 500000); // 會(huì)檢查所有元素
console.timeEnd('filter'); // 輸出: filter: 5.22509765625 ms
console.time('find');
bigArray.find(x => x === 500000); // 找到后立即停止
console.timeEnd('find'); // 輸出: find: 2.56298828125 ms4. 鏈?zhǔn)秸{(diào)用差異
// filter可以繼續(xù)鏈?zhǔn)秸{(diào)用
users
.filter(user => user.active)
.map(user => user.name)
.forEach(name => console.log(name));
// 輸出:
// Alice
// Charlie
// David
// find不能鏈?zhǔn)秸{(diào)用數(shù)組方法（因?yàn)榉祷氐氖窃兀?
const userName = users.find(user => user.id === 2).name; // 直接訪問屬性
console.log(userName) //輸出: Bob5. 實(shí)際應(yīng)用場(chǎng)景
適合使用 filter() 的情況：
需要獲取所有匹配項(xiàng)
需要對(duì)結(jié)果集進(jìn)行進(jìn)一步操作（如再過濾、映射等）
需要確?？偸欠祷?cái)?shù)組（便于后續(xù)處理）
// 獲取所有未完成的任務(wù) const incompleteTasks = tasks.filter(task => !task.completed); // 結(jié)合map使用 const activeUserNames = users .filter(user => user.active) .map(user => user.name);
適合使用 find() 的情況：
只需要第一個(gè)匹配項(xiàng)
檢查數(shù)組中是否存在某個(gè)元素
查找特定ID的對(duì)象
// 查找特定用戶
const user = users.find(user => user.id === 3);
console.log(user) //輸出: { id: 3, name: 'Charlie', active: true },
// 檢查是否存在管理員
const hasAdmin = users.find(user => user.role === 'admin') !== undefined;
console.log(hasAdmin ) //輸出: false6. 特殊注意事項(xiàng)
引用類型：兩者都返回原始數(shù)組中的引用（不會(huì)創(chuàng)建副本）
const found = users.find(u => u.id === 1);
found.name = 'Alex'; // 會(huì)修改原數(shù)組中的對(duì)象
console.log(users)
//輸出: [
// { id: 1, name: 'Alex', active: true },
// { id: 2, name: 'Bob', active: false },
// { id: 3, name: 'Charlie', active: true },
// { id: 4, name: 'David', active: true }
// ]稀疏數(shù)組：
const sparse = [1, , 3]; sparse.find(x => true); // 1 (跳過空位) sparse.filter(x => true); // [1, 3] (跳過空位)
this綁定：兩者都接受第二個(gè)參數(shù)用于設(shè)置回調(diào)函數(shù)的this
const checker = {
threshold: 2,
check(num) { return num > this.threshold; }
};
[1, 2, 3].find(checker.check, checker); // 3總結(jié)選擇
需要 多個(gè)結(jié)果 → 用
filter()只需要 第一個(gè)結(jié)果 → 用
find()需要 性能優(yōu)化（大數(shù)據(jù)集） → 優(yōu)先考慮
find()需要 確保數(shù)組返回值 → 用
filter()進(jìn)行 鏈?zhǔn)讲僮?/strong> → 用
filter()
到此這篇關(guān)于JavaScript中filter() 和find()的區(qū)別對(duì)比小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript filter() 和find()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap超大屏幕的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
小程序自定義單頁面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
使用apply方法實(shí)現(xiàn)javascript中的對(duì)象繼承
javascript中的對(duì)象繼承的方法有很多，在接下來的文章中為大家介紹下使用apply方法是如何實(shí)現(xiàn)的2013-12-12
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。這篇文章主要介紹了Bootstrap零基礎(chǔ)入門教程(二) 的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-07-07
three.js開發(fā)3d地圖的實(shí)現(xiàn)示例
本文主要介紹了three.js開發(fā)3d地圖的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
javascript校驗(yàn)價(jià)格合法性實(shí)例（必須輸入2位小數(shù)）
這篇文章主要介紹了javascript校驗(yàn)價(jià)格合法性實(shí)例,其中價(jià)格必須是數(shù)字且必須輸入2位小數(shù),需要的朋友可以參考下2014-05-05
JS實(shí)現(xiàn)數(shù)組扁平化的8種方式總結(jié)
數(shù)組扁平化指的是將一個(gè)多層嵌套的數(shù)組，處理成只有一層的數(shù)組，本文為大家整理了8個(gè)常用的JS實(shí)現(xiàn)數(shù)組扁平化的方法，希望對(duì)大家有所幫助2023-08-08
這篇文章主要介紹了js中如何往對(duì)象中添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Javascript里使用Dom操作Xml...2006-09-09
需要獲取圖片的尺寸，就需要在圖片加載完成以后才可以，下面有個(gè)不錯(cuò)的方法，大家不妨參考下2014-05-05