JavaScript 过滤数组

JavaScript filter() 方法

在 JavaScript 中，我们可以使用 filter() 方法来实现对数组的过滤。filter() 方法会为数组每个元素依次执行一次相同的函数，然后返回一个数组（该数组包含所有符合条件的元素）。

语法：

arr.filter(callbackFn, thisArg)

说明：

filter() 方法可以接收以下 2 个参数。

callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
thisArg（可选）：回调函数 this 的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数接收 3 个参数，说明如下。

element（必选）：表示当前处理的数组元素。
index（可选）：表示当前处理的元素下标。
array（可选）：表示当前数组对象（代表整个数组）。

当回调函数返回 true 时，则会将当前元素添加到新数组中去。当回调函数返回 false 时，则不会将当前元素添加到新数组中去。

注意:

filter() 方法不会修改原数组，而是返回一个新数组。
对于没有值的数组元素（即空槽元素），不会执行 filter() 方法的回调函数。

JavaScript 过滤数组示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript 是如何过滤数组的。

示例 1：过滤出数组中所有大于等于 18 的数字

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const ages = [12, 19, 25, 17, 30, 16, 22];

        // 过滤大于等于 18 的元素
        const result = ages.filter((age) => {
            return age >= 18;
        });

        console.log("原数组：", ages);
        console.log("过滤后：", result);
    </script>
</body>
</html>

运行结果如下。

原数组：[12, 19, 25, 17, 30, 16, 22]
过滤后：[19, 25, 30, 22]

分析：

在这个例子中，我们使用 filter() 方法遍历 ages 数组的每一个元素，将满足 age >= 18 条件（返回 true）的元素（19, 25, 30, 22）收集到一个新数组 result 中。

示例 2：过滤复杂数组

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const tasks = [
            { id: 1, title: "游故宫", completed: true },
            { id: 2, title: "爬泰山", completed: false },
            { id: 3, title: "去新疆", completed: true },
            { id: 4, title: "爬黄山", completed: false }
        ];

        // 过滤出所有 completed 属性为 true 的对象
        const filteredTasks = tasks.filter((task) => {
            return task.completed === true;
        });

        console.log(filteredTasks);
    </script>
</body>
</html>

运行结果如下。

[
    {
        "id": 1,
        "title": "游故宫",
        "completed": true
    },
    {
        "id": 3,
        "title": "去新疆",
        "completed": true
    }
]

分析：

这个例子实现的效果是：过滤出数组中所有 completed 为 true 的元素。在前后端数据处理中，使用 filter() 方法处理 “包含对象的数组” 是非常常见的。