JavaScript 数组过滤练习

在 JavaScript 中，数组过滤是常见的操作之一，它可以让我们从一个数组中筛选出符合条件的元素，从而实现数据的筛选与过滤。

本篇文章将介绍 JavaScript 数组过滤练习的相关知识点和技巧，并提供练习题和代码示例，供程序员练习和学习。

数组过滤方法

在 JavaScript 中，数组过滤可以使用 filter() 方法来实现。filter() 方法将遍历数组中的每个元素，并对每个元素应用一个回调函数，根据函数的返回结果来判断是否保留该元素。

filter() 方法返回一个新数组，其中包含所有回调函数返回 true 的元素。对于返回 false 或者其他相当于 false 的值（比如 null 或者 undefined），则会被过滤掉。原数组不会受到影响，仍保持完整。

以下是 filter() 方法的基本语法：

arr.filter(callback(ele[, index[, array]])[, thisArg])

参数解释：

• callback：必选，回调函数，用来测试每个元素是否符合条件。参数 ele 表示数组中的当前元素，参数 index（可选）表示当前元素在数组中的下标，参数 array（可选）表示当前数组。
• thisArg：可选，用来重新绑定回调函数中的 this 值。

以下是 filter() 方法的使用示例：

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

const filteredArr = arr.filter((ele) => ele > 3);

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

以上代码中，使用 filter() 方法筛选出数组 arr 中大于 3 的元素，结果保存在新数组 filteredArr 中。

数组过滤练习题

接下来，我们提供一些常见的 JavaScript 数组过滤练习题，供程序员练习和学习。

练习一：筛选手机号码

给定一个字符串数组，其中每个元素表示一个电话号码，请使用 filter() 方法筛选出所有格式正确的手机号码。

手机号码有如下格式：

• 只有数字；
• 长度为 11 位；
• 第一位数字为 1。

示例：

const phoneNumbers = [
  '13311112222',
  '1382222111',
  '17733334444',
  '14444444444',
  '13855557777',
  '18966668888',
  '199aaaabbbb'
];

// 请在此处编写代码，筛选出符合要求的手机号码并保存在 filteredPhoneNumbers 中

console.log(filteredPhoneNumbers); // 输出 ['13311112222', '17733334444', '13855557777', '18966668888']

练习二：筛选成绩

给定一个记录学生成绩的数组，其中每个元素表示一个学生的成绩，请使用 filter() 方法筛选出所有及格的学生。

成绩的计算方式为：总分为 100 分，及格线为 60 分。

示例：

const scores = [
  { name: '张三', grade: 50 },
  { name: '李四', grade: 70 },
  { name: '王五', grade: 80 },
  { name: '赵六', grade: 40 },
  { name: '钱七', grade: 55 },
  { name: '孙八', grade: 90 },
];

// 请在此处编写代码，筛选出及格的学生并保存在 filteredScores 中

console.log(filteredScores); // 输出 [{ name: '李四', grade: 70 }, { name: '王五', grade: 80 }, { name: '钱七', grade: 55 }, { name: '孙八', grade: 90 }]

练习三：筛选偶数

给定一个数字数组，其中每个元素表示一个整数，请使用 filter() 方法筛选出所有偶数。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 请在此处编写代码，筛选出所有偶数并保存在 filteredNumbers 中

console.log(filteredNumbers); // 输出 [2, 4, 6, 8, 10]

解答代码

以下是上述练习题的解答代码，仅供参考。

// 练习一：筛选手机号码
const phoneNumbers = [
  '13311112222',
  '1382222111',
  '17733334444',
  '14444444444',
  '13855557777',
  '18966668888',
  '199aaaabbbb'
];

const filteredPhoneNumbers = phoneNumbers.filter((number) => {
  // 判断手机号码格式是否正确
  const reg = /^1\d{10}$/;
  return reg.test(number);
});

console.log(filteredPhoneNumbers); // 输出 ['13311112222', '17733334444', '13855557777', '18966668888']


// 练习二：筛选成绩
const scores = [
  { name: '张三', grade: 50 },
  { name: '李四', grade: 70 },
  { name: '王五', grade: 80 },
  { name: '赵六', grade: 40 },
  { name: '钱七', grade: 55 },
  { name: '孙八', grade: 90 },
];

const filteredScores = scores.filter((stu) => stu.grade >= 60);

console.log(filteredScores); // 输出 [{ name: '李四', grade: 70 }, { name: '王五', grade: 80 }, { name: '钱七', grade: 55 }, { name: '孙八', grade: 90 }]


// 练习三：筛选偶数
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filteredNumbers = numbers.filter((num) => num % 2 === 0);

console.log(filteredNumbers); // 输出 [2, 4, 6, 8, 10]