Javascript 过滤器数组

Javascript 中的过滤器数组是一个非常实用的工具，用于从给定的数组中过滤出一部分符合条件的元素并返回一个新数组。它可以让开发者轻松地完成数据过滤的需求，同时减少代码实现的复杂度。本文将介绍 Javascript 过滤器数组的基本用法和一些常见的应用场景。

语法

Javascript 中的过滤器数组的基本语法如下：

array.filter(callback[, thisArg])

其中，callback 是一个用来测试每个元素的函数，它会接收三个参数：

• currentValue：数组中正在被测试的当前元素。
• index（可选）：当前元素在数组中的索引。
• array（可选）：被调用的数组。

该函数应该返回一个布尔值。如果返回 true，则当前元素会被保留到新数组中；如果返回 false，则会被过滤掉。如果省略 thisArg 参数，则 callback 函数的 this 值会被设置为 undefined。

示例

下面是一个使用过滤器数组过滤偶数的示例代码：

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter((num) => num % 2 === 0);

console.log(filteredArray); // 输出 [2, 4]

在上面的代码中，我们首先定义了一个原始数组 originalArray，然后使用 filter 方法和一个 callback 函数过滤出所有的偶数，并将结果保存在 filteredArray 中。

常见应用场景

数组去重

过滤器数组可以很方便地用来实现数组去重的功能。例如，我们可以定义一个去重函数来过滤掉数组中的重复元素：

const duplicateArray = [1, 2, 3, 4, 2, 5, 3];
const uniqueArray = duplicateArray.filter((value, index, self) => {
  return self.indexOf(value) === index;
});

console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

在上面的代码中，我们首先定义了一个包含重复元素的数组 duplicateArray。然后，我们使用 filter 方法和一个 callback 函数来判断每个元素在数组中的第一个位置出现，并将其保留到新数组中，从而实现去重。

按条件过滤数组

过滤器数组可以很方便地支持按条件过滤数组的功能。例如，我们可以定义一个按条件过滤函数来过滤掉符合条件的元素：

const data = [
  { name: "Alice", age: 18 },
  { name: "Bob", age: 21 },
  { name: "Charlie", age: 24 },
  { name: "David", age: 27 },
  { name: "Eddie", age: 30 },
];

const filteredData = data.filter((item) => item.age >= 21 && item.age <= 27);

console.log(filteredData); // 输出 [{ name: "Bob", age: 21 }, { name: "Charlie", age: 24 }, { name: "David", age: 27 }]

在上面的代码中，我们首先定义了一个包含对象的数组 data。然后，我们使用 filter 方法和一个 callback 函数来判断根据年龄限制将符合条件的对象保留到新数组 filteredData 中。

多条件过滤数组

过滤器数组还可以支持多条件过滤数组的功能。例如，我们可以定义一个多条件过滤函数来同时过滤掉符合多个条件的元素：

const products = [
  { name: "Apple", price: 1.99, category: "fruit" },
  { name: "Banana", price: 0.99, category: "fruit" },
  { name: "Carrot", price: 0.49, category: "vegetable" },
  { name: "Pear", price: 2.99, category: "fruit" },
  { name: "Lettuce", price: 1.49, category: "vegetable" },
];

const filteredProducts = products.filter((product) => {
  return product.price < 1.5 && product.category === "vegetable";
});

console.log(filteredProducts); // 输出 [{ name: "Carrot", price: 0.49, category: "vegetable" }]

在上面的代码中，我们首先定义了一个包含产品信息的数组 products。然后，我们使用 filter 方法和一个 callback 函数来同时判断价格小于 1.5 并且类别为蔬菜的产品，并将其保留到新数组 filteredProducts 中。

总结

Javascript 过滤器数组是一个非常实用的工具，它可以让开发者轻松地完成数据过滤的需求，同时减少代码实现的复杂度。本文介绍了过滤器数组的基本用法和常见的应用场景。我们希望这篇文章对开发者们有所帮助。