快捷導(dǎo)航

JavaScript中find()和?filter()方法的區(qū)別小結(jié)

更新時(shí)間：2021年12月29日 10:30:37 作者：鋒享前端

js中find和filter方法大家在工作中會(huì)經(jīng)常遇到,那么他們有什么區(qū)別呢？這篇文章主要給大家介紹了關(guān)于JavaScript中find()和?filter()方法區(qū)別的相關(guān)資料,需要的朋友可以參考下

前言

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

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

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

JavaScript find() 方法

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

語(yǔ)法

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

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

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

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

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

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

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

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

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

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

JavaScript filter() 方法

filter() 方法創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試函數(shù)的元素的新數(shù)組。如果沒(méi)有元素滿(mǎn)足測(cè)試函數(shù)，則返回一個(gè)空數(shù)組。

語(yǔ)法

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

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

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

console.log(users.filter(user => user.age > 23));
//console
現(xiàn)在我們要過(guò)濾年齡為 22 歲的用戶(hù)//[{ id: 3, name: 'Balaji', age:24}]

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

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

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

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

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

共點(diǎn)

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

區(qū)別

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

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

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

2、如果沒(méi)有值滿(mǎn)足測(cè)試函數(shù)

find() 返回未定義；

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

直接上代碼

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); 
/*  輸出結(jié)果
  [
    {
      name: "Rick",
      age: 60
    },

    {
      name: "Rick",
      age: 70
    },

    {
      name: "Morty",
      age: 14
    }
  ]

*/

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

根據(jù)以上代碼輸出結(jié)果，可以發(fā)現(xiàn) find 和 filter 都不改變?cè)瓟?shù)組

總結(jié)

到此這篇關(guān)于JavaScript中find()和filter()方法的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)js?find()?和?filter()?方法的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: