在前端开发中，对数组元素进行筛选是一个很常见的操作。ECMAScript 2019 中为 Array 对象新增了 Array.filter 方法，让数组元素的筛选变得更加简单和高效。
Array.filter 方法的定义
Array.filter 方法用于筛选数组中的元素，并返回符合条件的元素组成的新数组。
它的定义如下：
array.filter(callback(element[, index[, array]])[, thisArg])
callback 函数接受三个参数：
element：当前正在处理的数组元素。index：当前正在处理的元素在数组中的索引。array：原始数组。
Array.filter 方法会遍历数组中的每个元素，如果 callback 返回 true，则该元素将被加入到返回的新数组中。
Array.filter 方法的示例
我们可以通过一个简单的示例来演示 Array.filter 的用法：
const array = [1, 2, 3, 4, 5]; const newArray = array.filter(element => element % 2 === 0); console.log(newArray); // Output: [2, 4]
在上面的代码中，我们定义了一个数组 array，然后使用 Array.filter 方法筛选出其中所有的偶数。最终的结果是返回一个新数组 [2, 4]。
另一个示例是从一个对象数组中筛选出符合条件的元素：
const users = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
const newUsers = users.filter(user => user.age < 25);
console.log(newUsers);
// Output: [{ name: '张三', age: 20 }]在上面的代码中，我们定义了一个对象数组 users，然后使用 Array.filter 方法筛选出其中所有年龄小于 25 岁的用户。最终的结果是返回一个新数组 [{ name: '张三', age: 20 }]。
Array.filter 方法的应用
Array.filter 方法可以用于处理各种数据类型的筛选操作。在实际开发中，我们可以使用它来处理：
1. 数组的筛选
通过 Array.filter 方法，我们可以快速地筛选出数组中符合条件的元素。例如，我们可以使用它来筛选出数组中的所有空值：
const array = [1, null, undefined, '', 0, false, NaN, 2]; const newArray = array.filter(element => !!element); console.log(newArray); // Output: [1, 2]
在上面的代码中，我们定义了一个数组 array，其中包含了各种类型的空值，包括 null、undefined、空字符串、0、false、NaN 等。然后我们使用 Array.filter 方法筛选出数组中所有非空元素，最终返回 [1, 2]。
2. 对象数组的筛选
Array.filter 方法同样适用于对象数组的筛选操作。例如，我们可以使用它来筛选出对象数组中某个属性符合条件的元素：
const users = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
const newUsers = users.filter(user => user.name.indexOf('张') !== -1);
console.log(newUsers);
// Output: [{ name: '张三', age: 20 }]在上面的代码中，我们定义了一个对象数组 users，其中包含了三个用户对象。然后我们使用 Array.filter 方法筛选出其中名字包含「张」字的用户，最终返回 [{ name: '张三', age: 20 }]。
3. 复合条件的筛选
在实际开发中，我们可能会需要筛选出符合多个条件的元素。使用 Array.filter 方法，我们可以通过组合多个筛选条件来实现这一目的。例如，我们可以使用它来筛选出既是女性又年龄在 20 到 30 岁之间的用户：
const users = [
{ name: '张三', age: 20, sex: '男' },
{ name: '李四', age: 25, sex: '女' },
{ name: '王五', age: 30, sex: '女' }
];
const newUsers = users.filter(user => user.sex === '女' && user.age >= 20 && user.age <= 30);
console.log(newUsers);
// Output: [{ name: '李四', age: 25, sex: '女' }, { name: '王五', age: 30, sex: '女' }]在上面的代码中，我们定义了一个对象数组 users，其中包含了三个用户对象。然后我们使用 Array.filter 方法筛选出其中既是女性又年龄在 20 到 30 岁之间的用户，最终返回 [{ name: '李四', age: 25, sex: '女' }, { name: '王五', age: 30, sex: '女' }]。
总结
Array.filter 方法是 ECMAScript 2019 新增的一个非常实用的函数，它可以帮助我们在处理数组元素筛选时更加便捷高效。通过本文的介绍，我们学习到了 Array.filter 方法的定义、示例和应用场景，希望能够对大家在前端开发中的实际应用有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a521c95b1f8cacd24adc6