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

https://www.cnblogs.com/ltb6w/p/10994571.html

定义和用法

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

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

语法

<pre style="margin-top: 0px; margin-bottom: 0px; color: rgb(0, 0, 0); font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">array.filter(function(currentValue,index,arr), thisValue) </pre>

参数说明

| 参数 | 描述 |
| function(currentValue, index,arr) | 必须。函数，数组中的每个元素都会执行这个函数
函数参数:

|
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined" |

首先回顾一下filter的作用：过滤数组中符合条件的元素

基本用法

<pre style="margin-top: 0px; margin-bottom: 0px;">let arr = [1, 3, 5, 8]
let arrFilter = arr.filter(ele => ele > 4)
console.log(arrFilter) // [5, 8] </pre>

另外也可以用来过滤对象数组中符合条件的对象，eg：

<pre style="margin-top: 0px; margin-bottom: 0px;">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}] </pre>

进阶用法

数组去重（有点过时）

<pre style="margin-top: 0px; margin-bottom: 0px;">let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {
return arr.indexOf(ele) === index
})
console.log(arrFIlter) </pre>

目前比较常用的方法是使用ES6的set完成，eg：

<pre style="margin-top: 0px; margin-bottom: 0px;">let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = [...new Set(arr)]
console.log(arrFilter) </pre>

数组中的空字符去除

<pre style="margin-top: 0px; margin-bottom: 0px;">let arr = ['1', '2', '3', '', null, undefined, ' ', '4']
let arrFilter = arr.filter((ele, index, arr) => {
return ele && ele.trim()
})
console.log(arrFIlter) </pre>

高级用法

结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段,比如:

<pre style="margin-top: 0px; margin-bottom: 0px;">// 需求: 年龄大于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']</pre>

filter()

简单讲filter就是一个数组过滤器，参数接收一个函数，数组的每一项经过函数过滤，返回一个符合过滤条件的新数组

函数接收三个参数：

item （当前遍历的数组项）
i （当前项索引）
arr （调用filter数组本身）

<pre class="hljs javascript" style="margin-top: 0px; margin-bottom: 0px;"> // 需求找到数组内偶数</pre>

[

复制代码

](javascript:void(0); "复制代码")

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 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)</pre>

[

复制代码

](javascript:void(0); "复制代码")

再来一个应用，巧妙地用filter结合indexof实现去重

indexOf在js中有着重要的作用，可以判断一个元素是否在数组中存在，或者判断一个字符是否在字符串中存在，如果存在返回该元素或字符第一次出现的位置的索引，不存在返回-1。

[

复制代码

](javascript:void(0); "复制代码")

<pre style="margin-top: 0px; margin-bottom: 0px; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]

    let newArr = arr1.filter(function(item, i, self) {
        let a = self.indexOf(item)
        console.log(`item----${item},self.indexOf(item)---${a},i----${i}`) return self.indexOf(item) === i;
    });

    console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8] </pre>

[

复制代码

](javascript:void(0); "复制代码")