欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2025年05月08日 10:28:23   作者：胡歌1  
filter()?和?find()?都是 JavaScript 數(shù)組的高階函數(shù),用于搜索數(shù)組元素,本文主要介紹了JavaScript中filter() 和find()的區(qū)別對比,感興趣的可以了解一下

filter() 和 find() 都是 JavaScript 數(shù)組的高階函數(shù)，用于搜索數(shù)組元素，但它們有幾個(gè)關(guān)鍵區(qū)別：

1. 基本區(qū)別

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

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}
// ]

// 沒有匹配項(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() 會遍歷整個(gè)數(shù)組，即使已經(jīng)找到所有符合條件的元素

  • find() 在找到第一個(gè)匹配項(xiàng)后立即停止遍歷

// 性能測試
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. 鏈?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)用場景

適合使用 filter() 的情況：

  • 需要獲取所有匹配項(xiàng)

  • 需要對結(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的對象

// 查找特定用戶
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ù)組中的引用（不會創(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綁定：兩者都接受第二個(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ū)別對比小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript filter() 和find()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • javascript用defineProperty實(shí)現(xiàn)簡單的雙向綁定方法

    javascript用defineProperty實(shí)現(xiàn)簡單的雙向綁定方法

    這篇文章主要介紹了javascript用defineProperty實(shí)現(xiàn)簡單的雙向綁定方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 淺談頁面裝載js及性能分析方法

    淺談頁面裝載js及性能分析方法

    這篇文章主要簡單介紹了頁面裝載js及性能分析方法的相關(guān)資料,需要的朋友可以參考下
    2014-12-12
  • 如何讓js中的if判斷如絲般順滑詳解

    如何讓js中的if判斷如絲般順滑詳解

    條件判斷語句是程序開發(fā)過程中一種經(jīng)常使用的語句形式,和大部分編程語言相同,JavaScript 中也有條件判斷語句,這篇文章主要給大家介紹了關(guān)于如何讓js中的if判斷如絲般順滑的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • 動態(tài)調(diào)用CSS文件的JS代碼

    動態(tài)調(diào)用CSS文件的JS代碼

    動態(tài)調(diào)用CSS文件，一般用于頁面的多種顏色選擇，通過調(diào)用不同的css實(shí)現(xiàn)不用的頁面顏色效果。
    2010-07-07
  • LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法

    LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法

    今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 基于AGS JS開發(fā)自定義貼圖圖層

    基于AGS JS開發(fā)自定義貼圖圖層

    這篇文章主要為大家詳細(xì)介紹了基于AGS JS開發(fā)自定義貼圖圖層的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • 詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條

    詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條

    canvas可以在頁面中設(shè)定一個(gè)區(qū)域，再利用JavaScript動態(tài)地繪制圖像。本文將利用canvas繪制一個(gè)可以動的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動手試一試
    2022-02-02
  • 全面解讀TypeScript和JavaScript的區(qū)別

    全面解讀TypeScript和JavaScript的區(qū)別

    TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語言, TypeScript是JavaScript的一個(gè)超集,JavaScript是一種輕量級的解釋性腳本語言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下
    2023-09-09
  • 前端設(shè)計(jì)師們最常用的JS代碼匯總

    前端設(shè)計(jì)師們最常用的JS代碼匯總

    本文給大家整理匯總了一些做前端經(jīng)常需要用的到JavaScript代碼片段，非常的全面，有需要的小伙伴可以參考下
    2016-09-09
  • JavaScript中DOM操作常用事件總結(jié)

    JavaScript中DOM操作常用事件總結(jié)

    這篇文章主要為大家詳細(xì)介紹了JavaScript中常用的幾個(gè)DOM事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-04-04

最新評論