JavaScript中filter() 和find()的區(qū)別對(duì)比小結(jié)
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); // 輸出: undefined
3. 性能考慮
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 ms
4. 鏈?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) //輸出: Bob
5. 實(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 ) //輸出: false
6. 特殊注意事項(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)文章
javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04動(dòng)態(tài)調(diào)用CSS文件的JS代碼
動(dòng)態(tài)調(diào)用CSS文件,一般用于頁(yè)面的多種顏色選擇,通過調(diào)用不同的css實(shí)現(xiàn)不用的頁(yè)面顏色效果。2010-07-07LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
canvas可以在頁(yè)面中設(shè)定一個(gè)區(qū)域,再利用JavaScript動(dòng)態(tài)地繪制圖像。本文將利用canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-02-02全面解讀TypeScript和JavaScript的區(qū)別
TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語(yǔ)言, TypeScript是JavaScript的一個(gè)超集,JavaScript是一種輕量級(jí)的解釋性腳本語(yǔ)言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下2023-09-09