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

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); // 輸出: 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)單的雙向綁定方法

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

    淺談頁(yè)面裝載js及性能分析方法

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

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

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

    動(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-07
  • LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法

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

    今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    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可以在頁(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的區(qū)別

    TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語(yǔ)言, TypeScript是JavaScript的一個(gè)超集,JavaScript是一種輕量級(jí)的解釋性腳本語(yǔ)言,本文主要介紹了兩者區(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

最新評(píng)論