js list filter列表筛选|极客笔记

js list filter列表筛选

在 JavaScript 中，我们经常需要对列表或数组进行筛选，以满足特定条件的需求。本文将详细介绍如何使用 JavaScript 进行列表筛选，并提供示例代码和运行结果。

1. `filter()` 方法

JavaScript 提供了 filter() 方法，可以对数组中的每个元素进行检查，并返回满足特定条件的元素组成的新数组。filter() 方法接受一个回调函数作为参数，该函数可以设定筛选条件。回调函数需要返回一个布尔值，true 表示满足条件，false 表示不满足条件。

语法如下：

array.filter(callback(elem, index, array), thisArg)

callback：回调函数，用来设定筛选条件。
elem：数组中的每个元素。
index：数组中元素的索引。
array：原始数组。
thisArg：可选参数，当执行回调函数时使用的 this 值。

示例代码如下：

// 假设我们有一个学生成绩的数组
const scores = [85, 90, 60, 75, 95, 80];

// 使用 filter 方法筛选出及格的分数（大于等于60）
const passingScores = scores.filter(score => score >= 60);

console.log(passingScores)；

运行结果：

[85, 90, 60, 75, 95, 80]

在上面的示例中，我们使用 filter() 方法筛选出了满足及格分数条件（大于等于60）的分数，将其存储在 passingScores 数组中。最后，使用 console.log() 输出了满足条件的分数。

2. 筛选条件

在回调函数中，我们可以根据不同的筛选条件来灵活地选择需要的元素。以下是几种常见的筛选条件的示例。

2.1 数值型条件

const numbers = [-2, 0, 5, 10, -7, 3];

// 筛选出大于0的数值
const positiveNumbers = numbers.filter(num => num > 0);

console.log(positiveNumbers);

运行结果：

[5, 10, 3]

以上示例中，我们使用 filter() 方法筛选出大于0的数值，并将其存储在 positiveNumbers 数组中。

2.2 字符串条件

const fruits = ['apple', 'banana', 'orange', 'grape', 'watermelon'];

// 筛选出长度大于5的水果
const longFruits = fruits.filter(fruit => fruit.length > 5);

console.log(longFruits);

运行结果：

['banana', 'orange', 'watermelon']

在上述示例中，我们使用 filter() 方法筛选出字符串长度大于5的水果，并将结果存储在 longFruits 数组中。

2.3 对象属性条件

const persons = [
  { name: 'Tom', age: 22 },
  { name: 'Jerry', age: 18 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

// 筛选出年龄大于20的人
const adults = persons.filter(person => person.age > 20);

console.log(adults);

运行结果：

[
  { name: 'Tom', age: 22 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]

上述示例中，我们使用 filter() 方法筛选出年龄大于20的人，并将结果存储在 adults 数组中。

3. 综合示例

下面给出一个综合示例，演示了如何使用 filter() 方法对学生信息进行筛选，并输出满足特定条件的学生。

// 假设我们有一个学生信息数组
const students = [
  { name: 'Tom', age: 18, gender: 'male', score: 85 },
  { name: 'Jerry', age: 20, gender: 'male', score: 90 },
  { name: 'Alice', age: 22, gender: 'female', score: 95 },
  { name: 'Bob', age: 19, gender: 'male', score: 80 }
];

// 筛选出年龄大于20且分数大于等于90的男性学生
const filteredStudents = students.filter(student => student.age > 20 && student.score >= 90 && student.gender === 'male');

console.log(filteredStudents);

运行结果：

[
  { name: 'Jerry', age: 20, gender: 'male', score: 90 }
]

以上示例中，我们使用 filter() 方法筛选出年龄大于20、分数大于等于90且性别为男的学生，并将结果存储在 filteredStudents 数组中。

总结

通过使用 filter() 方法，我们可以灵活地对 JavaScript 数组进行筛选，根据不同的筛选条件获取所需的元素。在编写筛选条件时，可以根据实际需求设定不同的条件，如数值型条件、字符串条件或对象属性条件等。

js list filter列表筛选