javascript怎么过滤数组中的元素-js教程-PHP中文网

javascript怎么过滤数组中的元素

小老鼠

发布： 2025-08-13 11:20:01

原创

594人浏览过

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怎么过滤数组中的元素

过滤数组元素，JavaScript 提供了

filter()

登录后复制

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

解决方案

filter()

登录后复制

方法的核心在于回调函数。这个回调函数会对数组中的每个元素执行一次，并返回一个布尔值：

true

登录后复制

表示该元素应该包含在新数组中，

false

登录后复制

表示不包含。

立即学习“Java免费学习笔记（深入）”；

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()

登录后复制

方法通常是更好的选择，因为它更易于维护和理解。

以上就是javascript怎么过滤数组中的元素的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript：高效实现数组元素按比例循环复用与动态映射 JS函数参数如何传递_JavaScript函数参数传递方式值传递与引用传递详解 JS函数如何定义内部函数_JS内部函数定义与作用域解析 JS注解怎么标注表单验证_ 表单输入参数的JS注解校验方法与实践 js构造函数模式是什么