前端開發之JS中filter()的使用
前言
在前端開發過程中，對數組的數據進行處理也是比較常見的操作之一，而且對數組進行操作的頻率遠遠大於對 對象進行操作，因此在開發過程中對於數組里面的數據進行處理是一項比較重要的技能，尤其是對於剛入行的前端開發者來說尤為重要，所以一定要掌握好相關技能。本篇博文來分享一下關於對數組里面的數據進行篩選的操作，那么就用到了JS中filter()方法使用。
filter()方法
1、定義
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。【關注尚硅谷，輕松學IT】
2、語法
array.filter(function(currentValue,index,arr), thisValue);
3、參數說明
具體參數描述，如下圖所示：
返回值
返回值 返回數組，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數組。
4、用法
filter() 方法用於把Array中的某些元素過濾掉，然后返回剩下的未被過濾掉的元素。
5、注意事項
（1）filter() 不會對空數組進行檢測；
（2）filter() 不會改變原始數組。
6、使用實例
根據實際開發過程中的不同需求，把實戰中比較常見的處理方式匯總出來，需求是做不完的，也不可能全部覆蓋到，這里只分享一些比較常見的操作，方便有需要的開發者查閱使用，具體的實例如下所示。
1.返回數組array中所有元素都大於等於14的元素
eg:
var array = [14, 17, 18, 32, 33, 16, 40];
function checkItem(num) {
return num >= 14;
}
function numFunction() {
document.getElementById(“test”).innerHTML = array.filter(checkItem); //顯示結果：17, 18, 32, 33, 16, 40
}
判斷數組里面是否存在某個值：
var array = [14, 17, 18, 32, 33, 16, 40];
newarr.filter(item => item.num==14); //判斷數組中是否有14
console.log(newarr.filter(item => item.num==14)) //true
2.數組去重操作：對數組array中所有相同的元素進行去重復操作
function merge(array) {
return array.filter(function(item, index, arr) {
//當前元素，在原始數組中的第一個索引===當前索引值，否則返回當前元素
return array.indexOf(item, 0) === index;
});
}
var array = [2,2,’a’,’a’,true,true,15,17];
console.log(merge(array)); // 輸出結果：[2, “a”, true, 15 ,17]
數組去重的另一個實例：
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]
var newArray = array.filter(function(item, i, arr) {
let a = arr.indexOf(item)
return arr.indexOf(item) === i;
});
console.log(newArray); //輸出結果：[1, 2, 3, 4, 5, 6, 7, 8, 9]
3.數組中保留奇數或者偶數
(1)保留數組中的偶數：
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var newArray = array.filter((item, i, arr) => {
//函數自身返回的是一個布爾值，只當返回值為true時，當前元素才會存入新的數組中。
return item % 2 === 0;
})
console.log(newArr); //輸出結果：[2, 4, 6, 8, 10]
(2)保留數組中的奇數：
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var newArray = array.filter((item, i, arr) => {
//函數自身返回的是一個布爾值，只當返回值為true時，當前元素才會存入新的數組中。
return item % 2 !== 0;
})
console.log(newArr); //輸出結果：[1, 3, 5, 7, 9]
4.去掉數組中的空字符串、undefined、null
(1)去掉數組中的undefined
var array = ['1','2',undefined, '3.png',undefined, ‘a’]
var newArray = arr.filter(item => item)
console.log(newArray)
(2)去掉數組中的null
var array = ['1','2',null, '3.png',null, ‘a’]
var newArray = arr.filter(item => item)
console.log(newArray)
(3)去掉數組中的空字符串，但是空字符串里面不能包含空格
var array = ['1', '2', '', '3.png’, ’’, ‘a’]
var newArray = arr.filter(item => item)
console.log(newArray)
(4)另外一種去除空字符串的方法
var array = ['1','2',undefined, '3.png', ‘’, undefined, ‘a’, ' '];
let newArray=array.filter(i=>i && i.trim()); // 注意：IE9以下的版本沒有這個trim()方法
console.log(newArray); //返回結果:['1','2', '3.png', ‘a’,]
5.把對象數組a中的某個屬性值取出來存到數組b中
var arrayA = [
{name:"a",type:"letter"},{name:”1”,type:"digital"},
{name:”c”,type:"letter"},{name:”2”,type:"digital"},
];
var arrayB = arrayA.filter(function(array){ //對arrayA數組對象過濾如果array.type === "letter"就return出去, 再用一個變量接收
return array.type === "letter"
});
console.log(arrayB); //輸出結果：[{name:"a",type:"letter"},{name:”c”,type:"letter"},]
6.filter()和find()結合使用，實現從數組中查找想要的元素
projectDetail() {
if (this.value) {
return this.sourcedata.filter((item) => {
return [item.ProjectName, item.ProjectNewNo].find( //通過item.ProjectName、item.ProjectNewNo來匹配是否是想要查找的元素
(si) => {
return si.indexOf(this.value) != -1; //根據是否輸入來匹配
}
);
});
}
return this.sourcedata; //最后返回想要的元素的數組
}
原創作者：三掌櫃666