JS的filter

JS的filter

在JavaScript中，filter()方法是一个数组方法，用于筛选数组中的元素并返回符合条件的元素。使用filter()方法可以快速、简洁地对数组进行筛选操作。

语法

filter()方法的语法如下：

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

• array：要操作的数组。
• callback：一个用来测试每个元素的函数，返回 true 表示该元素通过测试，需要保留；返回 false 则表示不通过。
• element：数组中当前被处理的元素。
• index：数组中当前被处理的元素的索引。（可选）
• array：调用 filter() 方法的数组本身。（可选）
• newArray：经过filter()筛选后的新数组。

示例

假设我们有一个包含多个学生对象的数组：

const students = [
    { name: 'Alice', score: 85 },
    { name: 'Bob', score: 70 },
    { name: 'Carol', score: 92 },
    { name: 'David', score: 65 },
    { name: 'Eve', score: 88 }
];

现在我们希望筛选出分数大于等于80分的学生，可以使用filter()方法：

const topStudents = students.filter(student => student.score >= 80);

console.log(topStudents);

运行以上代码，将输出符合条件的学生数组：

[
    { name: 'Alice', score: 85 },
    { name: 'Carol', score: 92 },
    { name: 'Eve', score: 88 }
]

使用场景

filter()方法常用于对数组进行筛选操作，例如：

• 筛选出满足某种条件的元素，如筛选出所有大于某个值的数字。
• 过滤掉数组中的空值、未定义值或其他非法值。
• 根据指定条件从数组中找出符合要求的元素。

下面我们来看一些更复杂的示例。

过滤掉含有空字符串的元素

假设我们有一个包含多个字符串的数组，现在希望过滤掉数组中的空字符串：

const words = ['hello', '', 'world', ' ', 'javascript', ''];

const filteredWords = words.filter(word => word.trim() !== '');

console.log(filteredWords);

运行以上代码，将输出去掉空字符串的新数组：

['hello', 'world', 'javascript']

筛选出包含特定关键词的元素

假设我们有一个包含多个商品对象的数组，现在希望从中筛选出包含关键词“apple”的商品：

const products = [
    { name: 'iPhone', price: 999 },
    { name: 'iPad', price: 499 },
    { name: 'MacBook', price: 1299 },
    { name: 'Apple Watch', price: 299 },
    { name: 'AirPods', price: 159 }
];

const appleProducts = products.filter(product => product.name.toLowerCase().includes('apple'));

console.log(appleProducts);

运行以上代码，将输出包含关键词“apple”的商品数组：

[
    { name: 'iPhone', price: 999 },
    { name: 'iPad', price: 499 },
    { name: 'Apple Watch', price: 299 }
]

总结

filter()方法是JavaScript中常用的数组方法之一，通过传入一个回调函数，可以方便地对数组进行筛选操作，使代码更加简洁和可读。在实际开发中，我们经常会用到filter()方法来筛选、过滤数据，帮助完成各种复杂的数据处理任务。