區(qū)分清楚Array中filter、find、some、reduce這幾個方法的區(qū)別，根據(jù)它們的使用場景更好的應(yīng)用在日常編碼中。

Array.find 返回一個對象（第一個滿足條件的對象）后停止遍歷

const arrTest = [ { id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'b' }, { id: 4, name: 'c' }]// 過濾條件function getName(val) { return arrTest => arrTest.name === val}

// 如果我們是想找到第一個滿足條件的數(shù)據(jù)，應(yīng)該使用`Array.find`console.log(arrTest.find(getName('b')))// { id: 2, name: 'b' }Array.some

Array.some 返回是否滿足條件的布爾值

const arrTest = [ { id: 1, name: 'a', status: 'loading' }, { id: 2, name: 'b', status: 'loading' }, { id: 3, name: 'b', status: 'success' }]// 過濾條件function getStatus(val) { return arrTest => arrTest.status === val}

// 如果我們需要查找一個數(shù)組中是否存在某個數(shù)據(jù)的時候，使用Array.some直接拿到結(jié)果console.log(arrTest.some(getStatus('success')))// trueArray.filter

Array.filter 遍歷整個Array返回一個數(shù)組（包含所有滿足條件的對象）

const arrTest = [ { id: 1, name: 'a', status: 'loading' }, { id: 2, name: 'b', status: 'loading' }, { id: 3, name: 'b', status: 'success' }]// 過濾條件function getStatus(val) { return arrTest => arrTest.status === val} // 如果我們是需要過濾出一個數(shù)組中所有滿足條件的數(shù)據(jù)，應(yīng)該使用Array.filterconsole.log(arrTest.filter(getStatus('loading')))// [// { id: 1, name: 'a', status: 'loading' },// { id: 2, name: 'b', status: 'loading' }// ]Array.reduce

Array.reduce 為數(shù)組的歸并方法，使用場景很多，比如求和、求乘積，計(jì)次，去重，多維轉(zhuǎn)一維，屬性求和等...本節(jié)示例主要實(shí)現(xiàn)Array.reduce對一組數(shù)據(jù)進(jìn)行條件過濾后，返回一個新的數(shù)組

const arrTest = [ { id: 1, status: 'loading' }, { id: 2, status: 'loading' }, { id: 3, status: 'success' }]console.log( arrTest.reduce((acc, character) => {return character.status === 'loading' ? acc.concat( Object.assign({}, character, { color: 'info' }) ) : acc }, []))// [// { id: 1, status: 'loading', color: 'info' },// { id: 2, status: 'loading', color: 'info' }// ]

與Array.filter返回的數(shù)組的不同，filter返回的是原數(shù)組中符合條件的對象集合，filter與 Array.map 結(jié)合也可以實(shí)現(xiàn)上面的結(jié)果，為什么使用reduce更好呢？

// Array.map 和 Array.filter 組合console.log( arrTest.filter(character => character.status === 'loading').map(character => Object.assign({}, character, { color: 'info' })))// [// { id: 1, status: 'loading', color: 'info' },// { id: 2, status: 'loading', color: 'info' }// ]

結(jié)論：同時使用 Array.filter 和 Array.map 的時候，對整個數(shù)組循環(huán)了 2 遍。第一次是過濾返回一個新的數(shù)組，第二次通過 map 又構(gòu)造一個新的數(shù)組。使用了兩個數(shù)組方法，每一個方法都有各自的回調(diào)函數(shù)，而且 filter 返回的數(shù)組以后再也不會用到。使用 Array.reduce 同樣的結(jié)果，代碼更優(yōu)雅。

到此這篇關(guān)于js 數(shù)組 find,some,filter,reduce區(qū)別詳解的文章就介紹到這了,更多相關(guān)js 數(shù)組 find,some,filter,reduce內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！