深入理解JavaScript中的Filter函数

发布时间：2023-05-10

一、Filter函数的介绍

在JavaScript中，数组是一个非常重要的数据类型，属于对象的一种。在实际的开发过程中，我们往往需要对数组进行筛选、过滤等操作，这时候就可以使用JavaScript中的filter函数。 filter函数是JavaScript中一个很实用的函数，它可以筛选出符合指定条件的数组元素，然后将这些元素组成一个新的数组返回，不影响原来的数组。filter函数的语法如下：

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

其中，参数currentValue表示数组中正在处理的当前元素，index表示当前元素的索引值，arr表示当前数组；而thisValue则可选，表示传递给函数的额外值，这个值在函数中使用。

二、Filter函数的基本使用

为了更好的理解filter函数，接下来我们将结合代码进行详细的讲解。首先，我们定义一个数组：

const arr = [1,2,3,4,5,6,7,8,9];

现在，我们来使用filter函数将这个数组中大于等于5的数筛选出来，并形成一个新的数组：

const result = arr.filter(function(item){
  return item >= 5;
});
console.log(result);  // [5,6,7,8,9]

我们还可以使用箭头函数进行简写：

const result = arr.filter(item => item >= 5);
console.log(result);  // [5,6,7,8,9]

三、Filter函数进阶使用

1. 字符串的筛选

在使用filter函数中，我们不仅可以对数字进行筛选，还可以对字符串进行筛选。比如下面这个例子，我们来对一个字符串数组进行筛选，只要包含字母e的字符串：

const strArr = ['hello', 'world', 'apple', 'pear', 'peach'];
const result = strArr.filter(function(item){
  return item.indexOf('e') >= 0;
});
console.log(result);  // ["hello", "pear", "peach"]

2. 对象的筛选

除了对数组和字符串进行筛选，我们还可以对对象进行筛选。比如下面这个例子，我们有一个存储人员信息的数组，我们来筛选出工资大于等于5000的人员：

const staff = [
  {name: 'Bob', salary: 4000},
  {name: 'Alice', salary: 6000},
  {name: 'John', salary: 5000},
  {name: 'Tom', salary: 7000}
];
const result = staff.filter(function(item){
  return item.salary >= 5000;
});
console.log(result);  // [{name: 'Alice', salary: 6000},{name: 'John', salary: 5000},{name: 'Tom', salary: 7000}]

3. 复杂条件筛选

除了基本的条件筛选，我们还可以使用filter函数进行更加复杂的筛选操作。比如下面这个例子，我们要将一个数值数组按照奇数和偶数分别存储到两个数组中：

const arr = [1,2,3,4,5,6,7,8,9];
const result = {
  odd:[],
  even:[]
};
arr.filter(function(item){
  if(item%2 === 0){
    result.even.push(item);
  }else{
    result.odd.push(item);
  }
});
console.log(result); // {odd: [1, 3, 5, 7, 9], even: [2, 4, 6, 8]}

四、总结

通过本文的介绍和实例演示，我们了解了JavaScript中的filter函数的基本语法和用法，并能够熟练的运用到我们的开发工作中。同时，我们也发现filter函数不仅可以应用于数组筛选上，还可以应用到字符串和对象等其他数据类型上，功能非常强大。

推荐文章