数组过滤filter

一、基本介绍

数组过滤是指根据特定条件从数组中筛选出符合条件的元素形成新数组，这个过程就是数组过滤。在JavaScript中，可以使用filter()方法完成数组过滤的操作。

此方法创建一个新的数组，其包含通过给定函数实现的测试的所有元素。

filter()方法不会改变原始数组

    const array = [1, 2, 3, 4, 5];
    const newArray = array.filter(element => element > 3);
    console.log(newArray);// [4,5]>

二、基本语法

filter()方法有两个参数，分别是回调函数和可选参数this。回调函数一共接受三个参数：

1. 数组当前项的值
2. 当前项的下标
3. 当前操作的数组

回调函数必须返回一个布尔类型。如果为true，则保留该项并将其添加到新的输出数组中，如果为false，则删除该项。

    var new_array = arr.filter(callback(element[, index[, array]])[, thisArg])

三、常见操作

1.filter()方法实现数字去重

数组去重是一项经常需要完成的操作，JS中使用filter()方法可以快速去重一个数字数组，比如使用 Set() 方法也可以实现去重，但filter()方法更方便易用。

    const numbers = [1,2,2,3,4,4,5];
    let uniqueNumbers = numbers.filter((value, index, array) => array.indexOf(value) === index);
    console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

2.filter()方法实现对象数组条件过滤

objects数组是一个具有结构化数据的对象数组。可以使用filter方法对此类型的数组进行过滤。

从对象数组中获取符合特定属性值的对象，只需在回调内对该值进行比较即可完成对象数组的筛选。

    const users = [
        { id: 1, name: 'Alex', age: 27 },
        { id: 2, name: 'Max', age: 20 },
        { id: 3, name: 'Jack', age: 25 }
    ];
    const result = users.filter(user => user.age > 23);
    console.log(result);// [{ id: 1, name: 'Alex', age: 27 }, { id: 3, name: 'Jack', age: 25 }]

3.filter()方法实现模糊关键字过滤

filter还可以根据数组元素中的字符进行模糊过滤，比如删除名字中包含某个字符的对象。这个技巧很有用，因为你不一定总能确切的知道要筛选的值。

    const fruits = ['apple', 'banana', 'citrus', 'peach', 'grape'];
    const result = fruits.filter(fruit => fruit.includes('a'));
    console.log(result);// ['apple', 'banana', 'grape']

四、结束语

使用filter()方法能快速方便的对数组进行过滤操作，我们可以根据需要自由的组合使用filter()方法来实现复杂的需求。

本篇文章介绍到常见操作，可能还有一些不常见的用法，需要动手实践多多尝试。