js 中数组的 filter() 函数的基本使用

filter() 又称为过滤器函数或筛选函数。filter() 把传入的函数依次作用于每个元素，然后根据返回值是 true 还是 false 决定保留还是丢弃该元素

一、 定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

注意：filter() 不会对空数组进行检测

注意：filter() 不会改变原始数组

二、语法

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

注意：返回值返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

下面是几个示例

1、在一个 Array 中，删掉偶数保留奇数

// 正常写法
var arr = [1, 2, 4, 5, 6, 9, 10, 15]
var result = arr.filter(function (x){
    return x % 2 !== 0
})
console.log(result)  // [1,5,9,15]

// 简便写法
var arr = [1, 2, 4, 5, 6, 9, 10, 15]
var result = arr.filter(x => x % 2 !== 0)
console.log(result)

2、将 Array 中的空字符串删掉

// 正常写法
var arr = ['A', '', 'B', null, undefined, 'C', ' ']
var result = arr.filter(function (x) { 
     // trim() 方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。
     return x && x.trim(); // 注意：IE9以下的版本没有trim()方法 
})
console.log(result) // ['A', 'B', 'C']

// 简便写法
var arr = ['A', '', 'B', null, undefined, 'C', ' ']
var result = arr.filter(x => x && x.trim())
console.log(result)

filter() 接收的回调函数，可以有多个参数。通常我们仅使用第一个参数，表示数组的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身。

var arr = ['A', 'B', 'C']
var result = arr.filter(function (element, index, self) {
    console.log(element) // 依次打印 'A', 'B', 'C'
    console.log(index) // 依次打印 0, 1, 2
    console.log(self) // self 就是变量 arr
    return true
})

因此，利用 filter() 可以巧妙的去除数组的重复元素

var r= [],
var arr = ['apple', 'strawberry','pear', 'apple', 'orange', 'orange', 'strawberry']
r = arr.filter(function (element, index, self) {
   return self.indexOf(element) === index
})
console.log(r.toString()) //apple,strawberry,pear,orange

去除重复元素依靠的是 indexOf 总是返回第一个元素的位置，后面的重复元素位置的索引与 indexOf 返回的位置不相等，因此被 filter 滤掉了。