js中filter過濾用法總結

定義和用法
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']