JavaScript 中 find() 和 filter() 方法的差別

英文 | https://javascript.plainenglish.io/difference-between-find-and-filter-methods-in-javascript-4f7c89180ef2

翻譯 | 楊小愛

JavaScript 在 ES6 上有很多數組方法，每種方法都有獨特的用途和好處。

在開發應用程式時，大多使用數組方法來擷取特定的值清單并擷取單個或多個比對項。

在列出這兩種方法的差別之前，我們先來一一了解這些方法。

JavaScript  find()方法

ES6 find() 方法傳回通過測試函數的第一個元素的值。如果沒有值滿足測試函數，則傳回 undefined。

文法

以下文法中使用的箭頭函數。

find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )      

我們有一個包含名稱 age 和 id 屬性的使用者對象清單，如下所示：

let users = [{
    id:1,
    name: 'John',
    age: 22
}, {
    id:2,
    name: 'Tom',
    age: 22
}, {
    id:3,
    name: 'Balaji',
    age: 24
}];      

以下代碼使用 find() 方法查找年齡大于 23 的第一個使用者。

console.log(users.find(user => user.age > 23));
//console
//{ id: 3, name: 'Balaji', age:24}      

現在我們要找到第一個年齡為 22 的使用者

console.log(users.find(user => user.age === 22));
//console
//{ id: 1, name: 'John', age:22}      

假設沒有找到比對意味着它傳回 undefined

console.log(users.find(user => user.age === 25));
//console
//undefined      

JavaScript filter() 方法

filter() 方法建立一個包含所有通過測試函數的元素的新數組。如果沒有元素滿足測試函數，則傳回一個空數組。

文法

filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )      

我們将使用相同的使用者數組和測試函數作為過濾器示例。

以下代碼使用 filter() 方法查找年齡大于 23 的第一個使用者。

console.log(users.filter(user => user.age > 23));
//console
//[{ id: 3, name: 'Balaji', age:24}]      

現在我們要過濾年齡為 22 歲的使用者

console.log(users.filter(user => user.age === 22));
//console
//[{ id: 1, name: 'John', age:22},{ id: 2, name: 'Tom', age:22}]      

假設沒有找到比對意味着它傳回一個空數組

console.log(users.filter(user => user.age === 25));
//console
//[]      

find() 和 filter() 的差別與共點

共點

高階函數：這兩個函數都是高階函數。

差別

1、通過一個測試功能

find() 傳回第一個元素

filter() 傳回一個包含所有通過測試函數的元素的新數組

2、如果沒有值滿足測試函數

find() 傳回未定義

filter() 傳回一個空數組

如果我錯過了任何差別，請您在留言區給我添加上，非常感謝。

最後，感謝您的閱讀，祝程式設計愉快！