filter的用法详解

filter

定义

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得" callback 返回 true 或 等价于 true 的值 的元素"创建一个新数组。

var new_array = arr.filter(callback[, thisArg])

基础用法

let spread = [12, 5, 8, 130, 44]
let filtered = spread.filter(n => n >= 10)
console.log('filtered', filtered) // => [12, 130, 44]

进阶用法

数组对象的键名/键值的搜索

let users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'ared',   'age': 24, 'active': false },
  { 'user': 'ered',   'age': 80, 'active': false },
  { 'abc': 'ered',   'age': 80, 'active': false }
]
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered)   // => [{user: "fred", age: 40, active: false}，{user: "ared", age: 24, active: false}]

高阶用法

数组去重

let spread = [12, 5, 8, 8, 130, 44,130]
let filtered = spread.filter((item, idx, arr) => {
  return arr.indexOf(item) === idx;
})
console.log('数组去重结果', filtered)

数组中的空字符串删掉

let spread = ['A', '', 'B', null, undefined, 'C', '  ']
let filtered = spread.filter((item, idx, arr) => {
  return item && item.trim()
})
console.log('数组中的空字符串删掉', filtered) // => ["A", "B", "C"]

总结：充分利用callback返回true的特点当作"过滤条件"函数，生产新的数组

filter的常用搭配

有条件筛选数组并生成新的数组
filter与map的搭配使用(可代替for + continue 的使用)
代码演示：
filter +map 写法

let arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
// filter : 有条件的筛选
// 筛选出性别为男性的名字集合
let newArr = arr.filter(n => n.gender === 'man').map(item => {
  return {
    name: item.name
  }
})
console.log('男性名字集合', newArr)   // => [{name: 'john'}, {name: 'jerry'}]

for + continue 写法

let forArr = []
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].gender === 'woman') continue
    let temp = {
      name: arr[i].name
    }
    forArr.push(temp)
  }
console.log('for循环过滤后的数组', forArr) // => [{name: 'john'}, {name: 'jerry'}]