JS中filter( )數(shù)組過(guò)濾器的使用
一、前言
數(shù)組過(guò)濾器是前端數(shù)據(jù)處理的一種常用方法，對(duì)于前端來(lái)說(shuō)，后端返回的數(shù)據(jù)我們需要經(jīng)過(guò)處理以后才能獲取到自己想要的數(shù)據(jù)，進(jìn)行進(jìn)一步的操作。有時(shí)候后端返回給我我們的值僅可以作為參考。
二、方法簡(jiǎn)介
filter( )方法會(huì)創(chuàng)建一個(gè)新數(shù)組，數(shù)組中的數(shù)據(jù)是經(jīng)過(guò)指定數(shù)據(jù)中過(guò)濾出來(lái)的符合條件的數(shù)據(jù)
filter( )的兩大特點(diǎn)
1.filter( )不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)
2.filter( )不會(huì)改變?cè)瓟?shù)組
filter( )方法的用法：
array.filter(function(currentValue,index,arr), thisValue) //currentValue：當(dāng)前元素的值 //index：當(dāng)前元素的下標(biāo) //arr：原數(shù)組
三、用法案例
1.獲取數(shù)組中符合條件的元素
const school = [
{
occupation:"老師",
age:40
},
{
occupation:"學(xué)生",
age:23
},{
occupation:"程序猿",
age:1
}
]
var newShool = school.filter(item => item.age > 20)
console.log(newShool);//[ { occupation: '老師', age: 40 }, { occupation: '學(xué)生', age: 23 } ]
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
- JavaScript遍歷數(shù)組的三種方法map、forEach與filter實(shí)例詳解
- JavaScript 數(shù)組some()和filter()的用法及區(qū)別
- JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳解
- js 數(shù)組 find,some,filter,reduce區(qū)別詳解
- JS中的常見數(shù)組遍歷案例詳解(forEach,?map,?filter,?sort,?reduce,?every)
- JavaScript數(shù)組常用方法find、findIndex、filter、map、flatMap及some詳解
- JavaScript 數(shù)組的常用方法find 和 filter詳解及區(qū)別介紹
- JavaScript數(shù)組方法push()、forEach()、filter()、sort()實(shí)戰(zhàn)教程
相關(guān)文章
JavaScript中arguments和this對(duì)象用法分析
這篇文章主要介紹了JavaScript中arguments和this對(duì)象用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了arguments對(duì)象和this對(duì)象的功能、常見用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
在多個(gè)頁(yè)面使用同一個(gè)HTML片段的代碼
有一個(gè)比較復(fù)雜的HTML片段(A)，如果把這個(gè)HTML片段嵌入到其他頁(yè)面中（B,C,D....）。 問(wèn)題的關(guān)鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說(shuō)分頁(yè)，點(diǎn)擊事件響應(yīng)等。2011-03-03
原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能詳解
這篇文章主要介紹了原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript拖動(dòng)進(jìn)度條插件的具體定義與使用技巧,需要的朋友可以參考下2019-08-08
JS下拉框內(nèi)容左右移動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JS下拉框內(nèi)容左右移動(dòng)效果的具體實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-07-07
Redux中進(jìn)行異步操作(網(wǎng)絡(luò)請(qǐng)求)的示例方案
這篇文章主要介紹了Redux中進(jìn)行異步操作(網(wǎng)絡(luò)請(qǐng)求)的方案,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了使用AutoJs實(shí)現(xiàn)微信搶紅包的代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序地圖實(shí)現(xiàn)展示線路，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
詳解如何用webpack打包一個(gè)網(wǎng)站應(yīng)用項(xiàng)目
本篇文章主要介紹了如何用webpack打包一個(gè)網(wǎng)站應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
原生javascript實(shí)現(xiàn)DIV拖拽并計(jì)算重復(fù)面積
這篇文章主要介紹了使用原生javascript實(shí)現(xiàn)DIV拖拽并計(jì)算重復(fù)面積的方法及示例代碼分享，效果十分漂亮,需要的朋友可以參考下2015-01-01
腳本收藏iframe...2006-07-07