js 數組 find,some,filter,reduce區別詳解
區分清楚Array中filter、find、some、reduce這幾個方法的區別,根據它們的使用場景更好的應用在日常編碼中。
Array.find
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 }
// 如果我們是想找到第一個滿足條件的數據,應該使用`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 }
// 如果我們需要查找一個數組中是否存在某個數據的時候,使用Array.some直接拿到結果 console.log(arrTest.some(getStatus("success"))) // true
Array.filter
Array.filter 遍歷整個Array返回一個數組(包含所有滿足條件的對象)
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 } // 如果我們是需要過濾出一個數組中所有滿足條件的數據,應該使用Array.filter console.log(arrTest.filter(getStatus("loading"))) // [ // { id: 1, name: "a", status: "loading" }, // { id: 2, name: "b", status: "loading" } // ]
Array.reduce
Array.reduce 為數組的歸並方法,使用場景很多,比如求和、求乘積,計次,去重,多維轉一維,屬性求和等…
本節示例主要實現Array.reduce對一組數據進行條件過濾後,返回一個新的數組
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返回的數組的不同,filter返回的是原數組中符合條件的對象集合,filter與 Array.map 結合也可以實現上面的結果,為什麼使用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" } // ]
結論:同時使用 Array.filter 和 Array.map 的時候,對整個數組循環瞭 2 遍。第一次是過濾返回一個新的數組,第二次通過 map 又構造一個新的數組。使用瞭兩個數組方法,每一個方法都有各自的回調函數,而且 filter 返回的數組以後再也不會用到。
使用 Array.reduce 同樣的結果,代碼更優雅。
到此這篇關於js 數組 find,some,filter,reduce區別詳解的文章就介紹到這瞭,更多相關js 數組 find,some,filter,reduce內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue Element前端應用開發之常規的JS處理函數
- JavaScript循環遍歷的24個方法,你都知道嗎
- JavaScript數組對象高階函數reduce的妙用詳解
- JavaScript數組reduce常見實例方法
- JS數組reduce你不得不知道的25個高級用法