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

翻譯 | 楊小愛

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

在開發(fā)應(yīng)用程序時(shí)，大多使用數(shù)組方法來獲取特定的值列表并獲取單個(gè)或多個(gè)匹配項(xiàng)。

在列出這兩種方法的區(qū)別之前，我們先來一一了解這些方法。

JavaScript  find()方法

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

語法

以下語法中使用的箭頭函數(shù)。

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

我們有一個(gè)包含名稱 age 和 id 屬性的用戶對(duì)象列表，如下所示：

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

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

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

現(xiàn)在我們要找到第一個(gè)年齡為 22 的用戶

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

假設(shè)沒有找到匹配意味著它返回 undefined

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

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

我們將使用相同的用戶數(shù)組和測(cè)試函數(shù)作為過濾器示例。

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

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

現(xiàn)在我們要過濾年齡為 22 歲的用戶

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

假設(shè)沒有找到匹配意味著它返回一個(gè)空數(shù)組

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

find() 和 filter() 的區(qū)別與共點(diǎn)

共點(diǎn)

高階函數(shù)：這兩個(gè)函數(shù)都是高階函數(shù)。

區(qū)別

1、通過一個(gè)測(cè)試功能

find() 返回第一個(gè)元素

filter() 返回一個(gè)包含所有通過測(cè)試函數(shù)的元素的新數(shù)組

2、如果沒有值滿足測(cè)試函數(shù)

find() 返回未定義

filter() 返回一個(gè)空數(shù)組

如果我錯(cuò)過了任何區(qū)別，請(qǐng)您在留言區(qū)給我添加上，非常感謝。

最后，感謝您的閱讀，祝編程愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)