JS數(shù)組中filter方法的使用實例

第JS數(shù)組中filter方法的使用實例目錄1、定義2、語法3、參數(shù)說明4、用法5、注意事項6、使用實例附：多條件單數(shù)據(jù)篩選總結(jié)

1、定義

filter()創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

2、語法

array.filter(function(currentValue,index,arr),thisValue);

3、參數(shù)說明

返回

4、用法

filter()方法用于把Array中的某些元素過濾掉，然后返回剩下的未被過濾掉的元素。

5、注意事項

1、filter()不會對空數(shù)組進(jìn)行檢測；

2、filter()不會改變原始數(shù)組。

6、使用實例

1.返回數(shù)組array中所有元素都大于等于14的元素、返回等于14、返回大于某個值和小于某個值的元素的元素。

constarray=[14,17,18,32,33,16,40];

constnewArr=array.filter(num=num14)

console.log(newArr);//打印[17,18,32,33,16,40]

//查找某個值-------------------------

constarray=[14,17,18,32,33,16,40];

constnewArr=array.filter(num=num==14)

console.log(newArr);//打印[14]

//返回大于某個值和小于某個值的元素

constarray=[14,17,18,32,33,16,40];

constnewArr=array.filter(num=num14num33)

console.log(newArr);//打印[17,18,32,16]

2.數(shù)組去重操作：對數(shù)組array中所有相同的元素進(jìn)行去重復(fù)操作。

constarray=[2,2,'a','a',true,true,15,17]

constnewArr=array.filter((item,i,arr)={

returnarr.indexOf(item)===i

console.log(newArr);//打印[2,'a',true,15,17]

//-------------------------------------------------------------------------

constarray=[1,2,3,4,5,6,7,8,9,4,5,6,7,9,]

constnewArr=array.filter((item,i,arr)={

returnarr.indexOf(item)===i

console.log(newArr);//打印[1,2,3,4,5,6,7,8,9]

3、數(shù)組中保留奇數(shù)或者偶數(shù)。

//保留偶數(shù)----------------------------------------

constarray=[1,2,3,4,5,6,7,8,9,10]

constnewArr=array.filter((item,i,arr)={

returnitem%2===0

console.log(newArr);//打印[2,4,6,8,10]

//保留奇數(shù)----------------------------------------

constarray=[1,2,3,4,5,6,7,8,9,10]

constnewArr=array.filter((item,i,arr)={

returnitem%2!==0

console.log(newArr);//打印[1,3,5,7,9]

4、去掉數(shù)組中的假值，比如：空字符串、undefined、null、0、false。

constarray=[

{id:3},

{id:4},

{id:null},

{id:undefined},

{id:''},

{id:0},

{id:false}

constnewArr=array.filter(({id})=id)

console.log(newArr);//打印[{"id":3},{"id":4}]

//-------------------------------------------------------------------

constarray=[undefined,null,3,5,'a',false,0]

constnewArr=array.filter(item=item)

console.log(newArr);//打印[3,5,'a']

5、把對象數(shù)組array中的某個屬性值取出來存到數(shù)組newArr中。

constarray=[

{name:"a",type:"letter"},

{name:'1',type:"digital"},

{name:'c',type:"letter"},

{name:'2',type:"digital"},

constnewArr=array.filter((item,i,arr)={

returnitem.type==="letter"

console.log(newArr);

//打印[{"name":"a","type":"letter"},{"name":"c","type":"letter"}]

6、filter結(jié)合find方法，實現(xiàn)兩個數(shù)組的補(bǔ)集的解決方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。

find()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。這里有四個元素，那么就會返回兩個數(shù)組元素相等的值，這里取反就返回不相等的值，不取反的時候因為30的元素不符合，所以不返回30的值。

constarray=[32,4,11,55,46,99,104,54,16,33,78,43,40]

constoldArr=[32,33,16,40,30]

functionmyfunction(){

constresult=array.filter(item1={

//此處取反去掉，將變換元素狀態(tài)

return!oldArr.find(item2={

returnitem1===item2

returnresult

constnewArr=myfunction()

console.log(newArr);

//取反打印[4,11,55,46,99,104,54,78,43]

//不取反打印[32,16,33,40]此處30的元素不符合，所以不返回30的值

附：多條件單數(shù)據(jù)篩選

根據(jù)單個名字或者單個年齡篩選，用filter方法，判斷條件之間