https://www.cnblogs.com/ltb6w/p/10994571.html
定義和用法
filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。
注意： filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意： filter() 不會(huì)改變?cè)紨?shù)組。
語(yǔ)法
<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>
參數(shù)說(shuō)明
| 參數(shù) | 描述 |
| function(currentValue, index,arr) | 必須。函數(shù)，數(shù)組中的每個(gè)元素都會(huì)執(zhí)行這個(gè)函數(shù)
函數(shù)參數(shù):
| 參數(shù) | 描述 |
| currentValue | 必須。當(dāng)前元素的值 |
| index | 可選。當(dāng)期元素的索引值 |
| arr | 可選。當(dāng)期元素屬于的數(shù)組對(duì)象 |
|
| thisValue | 可選。對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值為 "undefined" |
首先回顧一下filter的作用：過(guò)濾數(shù)組中符合條件的元素
基本用法
|
<pre style="margin-top: 0px; margin-bottom: 0px;">1
2
3 </pre>
|
<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>
|
另外也可以用來(lái)過(guò)濾對(duì)象數(shù)組中符合條件的對(duì)象，eg：
|
<pre style="margin-top: 0px; margin-bottom: 0px;">1
2
3
4
5
6
7
8
9
10
11
12
13 </pre>
|
<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>
|
進(jìn)階用法
數(shù)組去重（有點(diǎn)過(guò)時(shí)）
|
<pre style="margin-top: 0px; margin-bottom: 0px;">1
2
3
4
5 </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;">1
2
3 </pre>
|
<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>
|
數(shù)組中的空字符去除
|
<pre style="margin-top: 0px; margin-bottom: 0px;">1
2
3
4
5 </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>
|
高級(jí)用法
結(jié)合map使用可以先過(guò)濾出符合條件的對(duì)象然后去除某些不需要的字段,比如:
|
<pre style="margin-top: 0px; margin-bottom: 0px;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 </pre>
|
<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()
簡(jiǎn)單講filter就是一個(gè)數(shù)組過(guò)濾器，參數(shù)接收一個(gè)函數(shù)，數(shù)組的每一項(xiàng)經(jīng)過(guò)函數(shù)過(guò)濾，返回一個(gè)符合過(guò)濾條件的新數(shù)組
函數(shù)接收三個(gè)參數(shù)：
- item （當(dāng)前遍歷的數(shù)組項(xiàng)）
- i （當(dāng)前項(xiàng)索引）
- arr （調(diào)用filter數(shù)組本身）
<pre class="hljs javascript" style="margin-top: 0px; margin-bottom: 0px;"> // 需求找到數(shù)組內(nèi)偶數(shù)</pre>
](javascript:void(0); "復(fù)制代碼")
<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) => { //函數(shù)本身返回布爾值，只有當(dāng)返回值為true時(shí)，當(dāng)前項(xiàng)存入新數(shù)組。
return item % 2 == 0 })
console.log(newArr)</pre>
](javascript:void(0); "復(fù)制代碼")
再來(lái)一個(gè)應(yīng)用，巧妙地用filter結(jié)合indexof實(shí)現(xiàn)去重
indexOf在js中有著重要的作用，可以判斷一個(gè)元素是否在數(shù)組中存在，或者判斷一個(gè)字符是否在字符串中存在，如果存在返回該元素或字符第一次出現(xiàn)的位置的索引，不存在返回-1。
[
](javascript:void(0); "復(fù)制代碼")
<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); "復(fù)制代碼")
