js中filter過濾用法總結
阿新 • • 發佈:2022-12-05
定義和用法
filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。
注意: filter() 不會對空陣列進行檢測。
注意: filter() 不會改變原始陣列。
返回陣列,包含了符合條件的所有元素。如果沒有符合條件的元素則返回空陣列。
簡單講filter就是一個數組過濾器,引數接收一個函式,陣列的每一項經過函式過濾,返回一個符合過濾條件的新陣列
函式接收三個引數:
item (當前遍歷的陣列項)
i (當前項索引)
arr (呼叫filter函式的陣列本身)
//需求找到陣列內偶數
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let newArr = arr.filter((item, i, arr) => {
//函式本身返回布林值,只有當返回值為true時,當前項存入新陣列。
return item % 2 == 0
})
console.log(newArr)
%是指整數除法中被除數未被除盡部分,且餘數的取值範圍為0到除數之間(不包括除數)的整數。例如27除以6,商數為4,餘數為3。
一個數除以另一個數,要是比另一個數小的話,商為0,餘數就是它自己。例如:1除以2,商數為0,餘數為1。2除以3,商數為0,餘數為2。
//filter結合indexof實現去重
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]
let newArr = arr1.filter(function(item, i, arr) {
//當前元素,在原始陣列中的第一個索引 == 當前索引值,當前項則存入新陣列,
//否則當前項**不**存入新陣列,進行下一次迴圈
return arr.indexOf(item) === i;
});
console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]
基本用法
let arr = [1, 3, 5, 8]
let arrFilter = arr.filter(ele => ele > 4)
console.log(arrFilter) // [5, 8]
//另外也可以用來過濾物件陣列中符合條件的物件,eg
let arrObj = [{
name: 'aa', age: 13
}, {
name: 'bb', age: 23
}, {
name: 'cc', age: 18
}, {
name: 'dd', age: 11
}, {
name: 'ee', age: 28
}]
let arrObjFilter = arrObj.filter(ele => ele.age > 18)
console.log(arrObjFilter) // [{name: 'bb', age: 23}, {name: 'ee', age: 28}]
進階用法
//陣列去重(有點過時)
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {
return arr.indexOf(ele) === index
})
console.log(arrFIlter)
//目前比較常用的方法是使用ES6的set完成
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = [...new Set(arr)]
console.log(arrFilter)
陣列中的空字元去除
let arr = ['1', '2', '3', '', null, undefined, ' ', '4']
let arrFilter = arr.filter((ele, index, arr) => {
return ele && ele.trim()
})
console.log(arrFIlter)
高階用法
//結合map使用可以先過濾出符合條件的物件然後去除某些不需要的欄位
// 需求: 年齡大於18的姓名
let arrObj = [{
name: 'aa', age: 13
}, {
name: 'bb', age: 23
}, {
name: 'cc', age: 18
}, {
name: 'dd', age: 11
}, {
name: 'ee', age: 28
}]
let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => {
return ele.name
})
console.log(arrObjFilter) // ['bb', 'ee']