這篇“es6中find和filter有哪些區(qū)別”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“es6中find和filter有哪些區(qū)別”文章吧。

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為富民企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)，富民網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

es6中find和filter的區(qū)別：1、在不改變數(shù)組的情況下查找數(shù)組內(nèi)符合條件的內(nèi)容時，find方法返回的結(jié)果是對象，filter方法返回的結(jié)果是數(shù)組；2、若沒有值滿足測試函數(shù)，find方法返回的是未定義，filter方法返回一個空數(shù)組。

本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6.0版、Dell G3電腦。

es6中find和filter有什么區(qū)別

1. find 和 filter 都是不改變原數(shù)組的方法，都是在不改變數(shù)組的情況下查找數(shù)組內(nèi)符合條件的內(nèi)容，區(qū)別是find返回的是對象，filter返回的是數(shù)組。

示例如下：

const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]
let list2 = list.find(i=>i.name==='1') 
let list3 = list.filter(i=>i.name==='1')
console.log(list); [ { name: '1', index: 1 }, { name: '2' }, { name: '1' } ]
console.log(list2); { name: '1', index: 1 }
console.log(list3);[ { name: '1', index: 1 }, { name: '1' } ]

find只查出第一個符合條件的結(jié)果，像例子里是直接返回了一個對象而不是數(shù)組！，而filter返回全部結(jié)果仍然是數(shù)組。

注意：find()找到第一個元素后就不會在遍歷其后面的元素,所以如果數(shù)組中有兩個相同的元素，他只會找到第一個，第二個將不會再遍歷了。

2. 綜上來看find的查詢效率更高一些，所以在數(shù)組的中的數(shù)據(jù)唯一的話最好使用find

find()

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

語法

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

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

filter()

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

語法

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

共點

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

區(qū)別

1、通過一個測試功能

find() 返回第一個元素。

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

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

find() 返回未定義；

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

以上就是關(guān)于“es6中find和filter有哪些區(qū)別”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。