腳本之家服務器常用軟件

快捷導航

JavaScript中filter() 和find()的區(qū)別對比小結(jié)

更新時間：2025年05月08日 10:28:23 作者：胡歌1

filter()?和?find()?都是 JavaScript 數(shù)組的高階函數(shù),用于搜索數(shù)組元素,本文主要介紹了JavaScript中filter() 和find()的區(qū)別對比,感興趣的可以了解一下

1. 基本區(qū)別

特性	filter()	find()
返回值	新數(shù)組（包含所有匹配元素）	第一個匹配的元素（不是數(shù)組）
空結(jié)果	返回空數(shù)組 []	返回 undefined
用途	篩選多個符合條件的元素	查找第一個符合條件的元素

2. 代碼示例對比

示例數(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}
// ]

// 沒有匹配項時
const noUsers = users.filter(user => user.age > 100);
console.log(noUsers); // 輸出: []

使用 find()

// 查找第一個活躍用戶
const firstActive = users.find(user => user.active);
console.log(firstActive);
// 輸出: {id: 1, name: 'Alice', active: true}

// 沒有匹配項時
const notFound = users.find(user => user.age > 100);
console.log(notFound); // 輸出: undefined

3. 性能考慮

filter() 會遍歷整個數(shù)組，即使已經(jīng)找到所有符合條件的元素
find() 在找到第一個匹配項后立即停止遍歷

// 性能測試
const bigArray = Array(1000000).fill(0).map((_, i) => i);

console.time('filter');
bigArray.filter(x => x === 500000); // 會檢查所有元素
console.timeEnd('filter'); // 輸出: filter: 5.22509765625 ms

console.time('find');
bigArray.find(x => x === 500000); // 找到后立即停止
console.timeEnd('find'); // 輸出: find: 2.56298828125 ms

4. 鏈式調(diào)用差異

// filter可以繼續(xù)鏈式調(diào)用
users
  .filter(user => user.active)
  .map(user => user.name)
  .forEach(name => console.log(name));
// 輸出: 
// Alice
// Charlie
// David

// find不能鏈式調(diào)用數(shù)組方法（因為返回的是元素）
const userName = users.find(user => user.id === 2).name; // 直接訪問屬性
console.log(userName) //輸出: Bob

5. 實際應用場景

適合使用 filter() 的情況：

需要獲取所有匹配項
需要對結(jié)果集進行進一步操作（如再過濾、映射等）
需要確?？偸欠祷財?shù)組（便于后續(xù)處理）

// 獲取所有未完成的任務
const incompleteTasks = tasks.filter(task => !task.completed);

// 結(jié)合map使用
const activeUserNames = users
  .filter(user => user.active)
  .map(user => user.name);

適合使用 find() 的情況：

只需要第一個匹配項
檢查數(shù)組中是否存在某個元素
查找特定ID的對象

// 查找特定用戶
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. 特殊注意事項

引用類型：兩者都返回原始數(shù)組中的引用（不會創(chuàng)建副本）

const found = users.find(u => u.id === 1);
found.name = 'Alex'; // 會修改原數(shù)組中的對象
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綁定：兩者都接受第二個參數(shù)用于設置回調(diào)函數(shù)的this

const checker = {
  threshold: 2,
  check(num) { return num > this.threshold; }
};

[1, 2, 3].find(checker.check, checker); // 3

總結(jié)選擇

需要 多個結(jié)果 → 用 filter()
只需要 第一個結(jié)果 → 用 find()
需要 性能優(yōu)化（大數(shù)據(jù)集） → 優(yōu)先考慮 find()
需要 確保數(shù)組返回值 → 用 filter()
進行 鏈式操作 → 用 filter()

到此這篇關于JavaScript中filter() 和find()的區(qū)別對比小結(jié)的文章就介紹到這了,更多相關JavaScript filter() 和find()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线