js的filter函数(JavaScript中的数组筛选方法)

JavaScript中的数组筛选方法——filter函数

在JavaScript中，经常需要对数组进行筛选、过滤操作，以达到实现一些特定需求的目的。而其中最为常用的方法，便是filter函数。

filter函数的基本用法

filter的作用是生成一个新数组，该数组元素是符合指定筛选函数（即回调函数）的原数组元素。具体使用方式为：

  const newArray = array.filter(callback(element[, index[, array]])[,thisArg])

其中，callback是筛选函数，element为当前元素，index为当前元素的索引，array为原数组，thisArg是指定回调函数的this值。

简单筛选示例

假设已有以下一个数组：

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

现在需要筛选出其中的偶数元素。那么可以编写如下筛选函数：

  function isEven(num){
    return num % 2 === 0;
  }

然后使用filter函数进行筛选：

  const evenArr = numArr.filter(isEven);
  console.log(evenArr); //输出[2,4,6,8]

使用箭头函数简化代码

在上面的示例中，我们编写了一个isEven函数，来判断一个数是否为偶数。但实际上，可以使用ES6中的箭头函数来简化代码。

  const evenArr = numArr.filter(num => num % 2 === 0);
  console.log(evenArr); //输出[2,4,6,8]

这里的箭头函数可以替换所有简单的筛选函数。

高级筛选示例

除了简单的筛选之外，还可以根据需要使用更为高级的筛选操作。比如，查找数组中的一组固定元素。

  const fruitArr = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];
  const fruitToFind = ['banana', 'fig', 'watermelon'];
  function inArray(arr){
    return (fruitToFind.indexOf(arr) !== -1);
  }
  const foundFruitArr = fruitArr.filter(inArray);
  console.log(foundFruitArr); //输出['banana', 'fig']

上面的示例中，使用了indexOf函数来判断一个元素是否在一个固定数组中，进而完成了过滤操作。

使用对象属性进行筛选

除了可以使用自定义的函数对数组进行筛选操作之外，还可以通过对象属性来进行筛选。

  const peopleArr = [
    {name: 'John', age: 20},
    {name: 'Sarah', age: 25},
    {name: 'Tom', age: 30},
    {name: 'Mike', age: 35},
  ];
  const age30Arr = peopleArr.filter(person => person.age === 30);
  console.log(age30Arr); //输出[{name: 'Tom', age: 30}]

以上示例中，使用对象属性person.age来判断是否符合筛选规则。

结语

filter函数是JavaScript中的一个非常实用的数组筛选方法，可以根据各种不同需求，完成不同样的筛选操作。希望本篇文章对大家能有所帮助，也欢迎大家提出意见和建议，共同学习进步！