JavaScript中find()和 filter()方法的區別小結
阿新 • • 發佈:2022-04-08
前言
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 現在我們要過濾年齡為 22 歲的使用者//[{ 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() 的區別與共點
共點
高階函式:這兩個函式都是高階函式。
find 和 filter 都不改變原陣列
區別
1、通過一個測試功能
find() 返回第一個元素。
filter() 返回一個包含所有通過測試函式的元素的新陣列。
2、如果沒有值滿足測試函式
find() 返回未定義;
filter() 返回一個空陣列。