JS数组filter方法详解|极客笔记

JS数组filter方法详解

什么是数组filter方法

在JavaScript中，数组是一种存储多个值的数据结构。数组提供了许多方法来操作数组中的元素，其中filter()方法是一种常用且非常有用的方法。

filter()方法是Array对象的原生方法，它用于筛选数组中的元素，返回一个新的数组，新数组中包含符合条件的元素。该方法接受一个函数作为参数，该函数会对数组中的每个元素进行调用，并返回true或false，true表示该元素满足条件，false表示不满足条件。

filter方法的语法

filter()方法的语法如下：

array.filter(function(currentValue, index, arr), thisValue)

function(currentValue, index, arr): 这是必需的参数，表示处理每个元素的函数。该函数接收三个参数：
- currentValue: 表示数组中正在被处理的当前元素。
- index: 可选参数，表示数组中当前元素的索引。
- arr: 可选参数，表示当前数组对象。
thisValue: 可选参数，用于指定当执行回调函数时 this 的值。

filter方法的使用示例

现在我们来看一个使用filter()方法的示例，假设有一个存储用户年龄的数组，我们要筛选出大于18岁的用户：

let ages = [15, 20, 25, 30, 18, 16];

let adults = ages.filter(function(age) {
  return age > 18;
});

console.log(adults); // [20, 25, 30]

在上面的示例中，我们定义了一个名为ages的数组，包含了一些用户的年龄。然后使用filter()方法筛选出大于18岁的用户，并将结果存储在名为adults的新数组中，最后打印出结果。

filter方法与map、forEach的区别

在JavaScript中，数组还有其他一些处理元素的方法如map()和forEach()，这里简单介绍一下它们与filter()方法的区别：

filter(): 返回一个新数组，其中包含符合条件的元素。
map(): 返回一个新数组，其中包含对原数组中的每个元素应用函数后的返回值。
forEach(): 对数组中的每个元素执行一次提供的函数，没有返回值。

filter方法的应用场景

filter()方法在实际开发中有许多应用场景，比如筛选出符合条件的数据、过滤掉不需要的数据等。

下面是几个常见的应用场景：

过滤出符合条件的数据

let numbers = [1, 2, 3, 4, 5, 6];

let filteredNumbers = numbers.filter(function(num) {
  return num % 2 === 0; // 筛选出偶数
});

console.log(filteredNumbers); // [2, 4, 6]

过滤掉不需要的数据

let products = [
  {name: 'apple', category: 'fruit'},
  {name: 'banana', category: 'fruit'},
  {name: 'carrot', category: 'vegetable'}
];

let filteredProducts = products.filter(function(product) {
  return product.category === 'fruit'; // 只保留水果类商品
});

console.log(filteredProducts);

搜索功能

let fruits = ['apple', 'banana', 'cherry', 'orange'];

function searchFruit(keyword) {
  return fruits.filter(function(fruit) {
    return fruit.includes(keyword);
  });
}

console.log(searchFruit('a')); // ['apple', 'banana', 'orange']