JavaScript 练手小技巧：数组的filter方法

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>标签 1li>
    <li>标签 2li>
    <li id="li3">标签 3li>
    <li>标签 4li>
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 还有更多用法，等着大家去发现。