JavaScript filter() 方法详解：语法、回调与实战示例

何为filter()函数？

JavaScript内置的数组方法，旨在筛选数组中满足指定条件的项，并生成包含这些项的新数组。

该函数接收回调函数作为参数，遍历数组每个元素执行。若回调返回true，元素被纳入新数组；否则排除。此操作不修改原数组，仅返回符合条件元素构成的新数组。

filter()函数定义

具体语法结构如下：

array.filter(callback[, thisArg])

此处array指代待处理数组，callback为回调函数，thisArg为可选参数，用于指定回调执行时的this上下文。

filter()回调机制

回调函数接收三个参数：当前元素、索引及原数组。当前元素为必填，索引与数组为选填。

回调需返回布尔值。返回true时，当前元素被保留至新数组；返回false则被丢弃。

应用filter()处理数组

演示如何利用filter()从数组中筛选数据。以数字数组为例，目标是提取所有偶数。借助filter()配合箭头函数可达成，代码示例如下：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

上述代码定义了数字数组numbers。通过filter()结合箭头函数筛选偶数。逻辑为：若数字模2余0则返回true，否则false。最终将筛选结果存入evenNumbers并输出至控制台。

应用filter()处理对象数组

除数字外，filter()同样适用于对象数组。假设存在包含name与age属性的对象数组，需筛选年龄大于等于18岁的对象。利用filter()配合箭头函数实现，代码如下：

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 },
  { name: 'David', age: 16 },
  { name: 'Eva', age: 18 }
];
const adults = people.filter(person => person.age >= 18);
console.log(adults); // [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }, { name: 'Eva', age: 18 }]

代码首先定义对象数组people。通过filter()及箭头函数筛选成年用户。逻辑为：若age大于等于18则返回true，否则false。结果存入adults数组并打印至控制台。

应用filter()处理字符串数组

针对字符串数组，filter()同样有效。假设需筛选长度大于等于5的字符串。利用filter()配合箭头函数实现，代码示例如下：

const words = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];
const longWords = words.filter(word => word.length >= 5);
console.log(longWords); // ['apple', 'banana', 'cherry', 'elderberry']

代码定义字符串数组words。通过filter()及箭头函数筛选长字符串。逻辑为：若字符串长度大于等于5则返回true，否则false。结果存入longWords数组并打印至控制台。

总结

借助JavaScript的filter()方法，可高效便捷地筛选和处理数组元素。无论处理数字、对象或字符串数组，均可通过该方法提取符合条件元素并存入新数组。

本文关于深度解析JavaScript中filter()方法的内容至此结束。如需了解更多JavaScript filter()相关内容，请查阅本站历史文章或浏览后续文章，感谢支持！