JavaScript数组filter方法全解析

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript数组过滤方法详解》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

JavaScript中过滤数组元素使用filter()方法，它通过回调函数测试每个元素并返回新数组；1. 回调函数返回true则保留元素，如numbers.filter(number => number > 3)筛选大于3的数；2. 可结合trim()和逻辑判断过滤空字符串，如str && str.trim()排除空值和空格字符串；3. 去重可用filter()配合indexOf()判断首次出现，或用Set结构去重，如[...new Set(numbers)]更高效；4. 对象数组按属性过滤时，如product.category === "Fruit"筛选水果，或用includes()实现模糊匹配；5. filter()不修改原数组，性能良好，现代引擎已优化，通常优于手动循环，推荐优先使用。

过滤数组元素，JavaScript 提供了 filter() 方法，它会创建一个新数组，其中包含通过提供函数实现的测试的所有元素。简单来说，就是你给它一个条件，它帮你把符合条件的元素挑出来，组成一个新的数组。

解决方案

filter() 方法的核心在于回调函数。这个回调函数会对数组中的每个元素执行一次，并返回一个布尔值：true 表示该元素应该包含在新数组中，false 表示不包含。

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

// 过滤出所有大于 3 的数字
const filteredNumbers = numbers.filter(number => number > 3);

console.log(filteredNumbers); // 输出: [4, 5, 6]

上面的例子中，number => number > 3 就是回调函数，它检查每个数字是否大于 3。

除了简单的比较，你还可以使用更复杂的逻辑。例如，过滤掉数组中的空字符串：

const strings = ["hello", "", "world", null, undefined, "  "];

const filteredStrings = strings.filter(str => str && str.trim());

console.log(filteredStrings); // 输出: ["hello", "world"]

这里，str && str.trim() 确保字符串既不是 null、undefined、""，也不是只包含空格的字符串。 trim() 方法用于移除字符串首尾的空白字符。

filter() 方法不会改变原始数组。它总是返回一个新的数组。

如何过滤掉数组中的重复元素？

过滤重复元素是一个常见的需求。可以利用 filter() 方法结合 indexOf() 或 Set 数据结构来实现。

使用 indexOf()：

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.filter((number, index) => numbers.indexOf(number) === index);

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

这里，numbers.indexOf(number) === index 检查当前元素的索引是否是它第一次出现的索引。如果是，说明它不是重复元素。

使用 Set (ES6)：

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = [...new Set(numbers)];

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

Set 对象只允许存储唯一值。将数组转换为 Set，然后再转换回数组，就可以去除重复元素。 这种方法更简洁，效率也更高。

如何根据对象数组的属性进行过滤？

假设你有一个对象数组，你需要根据对象的某个属性值进行过滤。

const products = [
  { id: 1, name: "Apple", category: "Fruit" },
  { id: 2, name: "Banana", category: "Fruit" },
  { id: 3, name: "Carrot", category: "Vegetable" },
  { id: 4, name: "Broccoli", category: "Vegetable" }
];

// 过滤出所有水果
const fruits = products.filter(product => product.category === "Fruit");

console.log(fruits);
// 输出:
// [
//   { id: 1, name: "Apple", category: "Fruit" },
//   { id: 2, name: "Banana", category: "Fruit" }
// ]

product => product.category === "Fruit" 检查每个产品的 category 属性是否等于 "Fruit"。

如果需要更复杂的过滤条件，例如，过滤出所有名称包含 "a" 的产品：

const productsWithA = products.filter(product => product.name.toLowerCase().includes("a"));

console.log(productsWithA);
// 输出:
// [
//   { id: 1, name: "Apple", category: "Fruit" },
//   { id: 2, name: "Banana", category: "Fruit" },
//   { id: 3, name: "Carrot", category: "Vegetable" }
// ]

这里，product.name.toLowerCase().includes("a") 首先将产品名称转换为小写，然后检查是否包含字母 "a"。

filter() 方法的性能如何？

filter() 方法的性能通常取决于数组的大小和回调函数的复杂度。 对于大型数组和复杂的回调函数，性能可能会成为一个问题。

在某些情况下，可以使用循环来手动过滤数组，这可能会提供更好的性能，但代码会更冗长。

通常情况下，filter() 方法已经足够高效，并且代码更简洁易读。 只有在性能至关重要的情况下，才需要考虑其他方法。

此外，现代 JavaScript 引擎对 filter() 方法进行了优化，因此在大多数情况下，性能都不会成为问题。 选择 filter() 方法通常是更好的选择，因为它更易于维护和理解。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~