filter 的中文含义“滤镜,过滤”。
所以,数组的 filter 的方法,简单来说就是过滤数组的元素,保留自己需要的,去掉不需要的。
基础用法:
filter 方法需要回调函数。回调函数需要三个参数:元素值,索引,数组本身。其中,元素值参数是必须的,其他两个是可选的。
arr.filter(function(v,i,arr){
console.info(v); // 元素值
console.info(i); // 索引
console.info(arr); // 就是 arr 数组本身的引用
});
回调函数里的 return 语句的返回 true 会保留当前元素值;返回 false 会去掉当前元素值。
但是,filter 方法不会破坏原数组。所以,要获得结果必须使用另一个数组存储。
这里列举一些经典用法:
1. 数组去重
利用数组的 indexOf 方法,查找元素在数组里的位置。如果位置跟索引一样,说明是唯一元素,就要保留这个值。
// 数组去重
let arr = [10,230,230,10,10,324,43,657,87];
arr = arr.filter((v,i)=>{
return arr.indexOf(v) == i ;
});
console.info( arr ); // [10, 230, 324, 43, 657, 87]
2. 筛选指定元素
这种用法应该是 filter 方法的最初始的用法。也是使用最多的方法。
// 筛选元素:筛选偶数
let arr = [10,230,230,10,10,324,43,657,87];
arr = arr.filter((v,i)=>{
return v%2==0
});
console.info( arr ); // [10, 230, 230, 10, 10, 324]
3. 筛选元素:元素是对象
// 筛选对象:赛选数组中 age 大于等于 18 的对象。
let arr = [
{name:"lily",age:16},
{name:"toy",age:17},
{name:"jerry",age:20},
{name:"kate",age:19},
];
arr = arr.filter(v=>{
return v.age >= 18;
});
console.info( arr );
// {name: 'jerry', age: 20}
// {name: 'kate', age: 19
4. 筛选 DOM:查找兄弟标签
html:
<ul id="box">
<li>标签 1</li>
<li>标签 2</li>
<li id="li3">标签 3</li>
<li>标签 4</li>
</ul>
JS:
// 找兄弟标签
let li3 = document.getElementById("li3");
let box = document.getElementById("box");
let child = box.children;
let siblings = [];
for(let i=0; i<=child.length-1 ;i++){
siblings.push(child[i]);
}
siblings = siblings.filter(v=>{
return v != li3 ;
});
console.info(siblings);
当然,filter 还有更多用法,等着大家去发现。