目錄

• 前言
• find() 方法
• Script filter() 方法
• find() 和 filter() 的區別與共點
• 直接上程式碼
• 總結

前言

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

在開發應用程式時，大多使用陣列方法來獲取特定的值列表並獲取單個或多個匹配項。

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

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',{
    id:3,name: 'Balaji',age: 24
}];

以下程式碼使用 find() 方法查詢年齡大於 23 的第一個使用者。

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

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

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

假設沒有找到匹配意味著它返回 undefined

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

JavaScript filter() 方法

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

語法

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

我們將使用相同的使用者陣列和測試函式作為過濾器示例。

以下程式碼使用 filter() 方法查詢年齡大於 23 的第一個使用者。

console.log(users.filter(user => user.age > 23));
//console
現在我們要過濾年齡為 22 歲的使用者//[{ id: 3,age:24}]

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

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

假設沒有找到匹配意味著它返回一個空陣列

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

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

共點

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

區別

1、通過一個測試功能

find() 返回第一個元素。

filter() 返回一個包含所有通過測試函式的元素的新陣列。

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

find() 返回未定義；

filter() 返回一個空陣列；

直接上程式碼

let arr = [
  {
    name: 'Rick',age: 60
  },{
    name: 'Rick',age: 70
  },{
    name: 'Morty',age: 14
  }

]

let findResult = arr.find(i => i.name === 'Rick')
let filterResult = arr.filter(i => i.name === 'Rick')

console.log(arr); 
/*  輸出結果
  [
    {
      name: "Rick",age: 60
    },{
      name: "Rick",age: 70
    },{
      name: "Morty",age: 14
   VAQlKCviQ }
  ]

*/

console.log(findResult);   // {name: "Rick",age: 60}
console.log(filterResult);  // [{name: "Rick",age: 60},{name: "Rick",age: 70}]

根據以上程式碼輸出結果，可以發現 find 和 filter 都不改變原陣列

總結

到此這篇關於JavaScript中find()和filter()方法的區別小結的文章就介紹到這了,更多相關find()和filter()方法的區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！