使用 ES6/7/8/9/10 中的 Array.filter() 方法过滤数组

在前端开发中，我们经常需要对数组进行过滤，以根据某些条件筛选出符合要求的元素，这时候常常使用 Array.filter() 方法。ES6/7/8/9/10 中不断增强的 Array.filter() 方法可以帮助我们更加方便地进行数组过滤。本文将介绍如何使用 ES6/7/8/9/10 中的 Array.filter() 方法来过滤数组，并提供一些示例代码，以便读者更好地理解。

基本语法

Array.filter() 方法的基本语法如下：

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

其中，callback 是一个用来测试数组中的每个元素的函数，它通过返回一个布尔值来表示元素是否符合条件。需要注意的是，callback 函数接收三个参数：

• element：表示当前正在测试的元素。
• index（可选）：表示当前元素的索引。
• array（可选）：表示原数组本身。

此外，还可以使用可选的 thisArg 参数来指定 callback 函数中 this 的指向。

另外，需要注意的是，Array.filter() 方法并不会改变原数组，而是返回一个新的数组，其中包含符合条件的元素。

常见用法与示例

下面我们将介绍一些常见的用法，并提供相应的示例代码。

过滤数组中的特定元素

如果我们想要过滤数组中的特定元素，可以很容易地使用 Array.filter() 方法来实现。例如，以下代码将过滤出数组中所有的偶数：

const arr = [1, 2, 3, 4, 5, 6];
const evenArr = arr.filter(item => item % 2 === 0);
console.log(evenArr); // [2, 4, 6]

过滤数组中的空值

有时候我们需要过滤掉数组中的空值或 undefined 值，以下是一种常见的用法：

const arr = [1, null, undefined, '', 'hello', ' ', 0, 2, NaN];
const filteredArr = arr.filter(item => !!item);
console.log(filteredArr); // [1, 'hello', ' ', 2]

过滤数组中的重复元素

如果我们需要过滤数组中的重复元素，可以使用以下方法：

const arr = [1, 2, 3, 2, 4, 1, 5];
const uniqueArr = arr.filter((item, index, array) => array.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

过滤数组中长度大于某个值的元素

如果我们需要过滤数组中长度大于某个值的元素，可以使用以下方法：

const arr = ['apple', 'banana', 'orange', 'pear', 'grape'];
const filteredArr = arr.filter(item => item.length > 5);
console.log(filteredArr); // ['banana', 'orange']

根据对象的某个属性查询元素

如果我们有一个包含多个对象的数组，并且需要根据对象的某个属性查询元素，可以使用以下方法：

const arr = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 },
  { name: 'David', age: 35 },
];
const filteredArr = arr.filter(item => item.age > 25);
console.log(filteredArr); // [{ name: 'Charlie', age: 30 }, { name: 'David', age: 35 }]

结合 map() 方法实现链式调用

在实际开发中，我们往往需要在过滤之后进行进一步的操作，如对过滤后的成员进行计算、映射等操作，我们可以使用 map() 方法来实现链式调用。例如，以下代码将过滤掉一个数组中小于 3 的元素，并对剩余的元素进行平方计算：

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item >= 3).map(item => item * item);
console.log(filteredArr); // [9, 16, 25]

总结

本文介绍了如何使用 ES6/7/8/9/10 中的 Array.filter() 方法来过滤数组，并提供了一些常见用法和相应的示例代码。如果您在实际开发中遇到了数组过滤的问题，不妨试试使用 Array.filter() 方法来解决，相信会为您带来不少的便利。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6467143e968c7c53b077c24b