js filter函数的用法|极客笔记

js filter函数的用法

1. 概述

JavaScript中的filter()函数是一个用于筛选数组元素的高阶函数。它接受一个回调函数作为参数，该回调函数用于定义筛选的条件。filter()函数遍历数组的每一个元素，对满足条件的元素进行筛选，最后返回一个新的数组包含满足条件的元素。

filter()函数的语法如下：

array.filter(callback[, thisArg])

其中，array是要操作的数组，callback是回调函数，thisArg是可选参数，用于指定回调函数的this值。回调函数定义了筛选的条件，它接受三个参数：

element：当前遍历到的数组元素
index：当前遍历到的数组元素的索引
array：原始数组

回调函数要返回一个布尔值，表示元素是否满足条件。满足条件的元素会被保留在新的数组中，不满足条件的元素会被忽略掉。

下面我们将逐步介绍filter()函数的具体用法和示例。

2. 数组的筛选

filter()函数是一个用于数组筛选的重要工具，它可以根据我们的需求从一个数组中筛选出符合特定条件的元素。

假设我们有一个教师数组，每个教师对象都包含姓名（name）和年龄（age）两个属性。我们想要筛选出年龄大于60岁的教师。可以使用filter()函数来实现：

const teachers = [
  { name: '张三', age: 29 },
  { name: '李四', age: 63 },
  { name: '王五', age: 53 },
  { name: '赵六', age: 71 },
  { name: '钱七', age: 84 }
];

const oldTeachers = teachers.filter(function(teacher) {
  return teacher.age > 60;
});

console.log(oldTeachers);

运行以上代码，控制台会输出如下结果：

[
  { name: '李四', age: 63 },
  { name: '赵六', age: 71 },
  { name: '钱七', age: 84 }
]

可以看到，只有三位年龄大于60岁的教师被筛选出来，并存放在新数组oldTeachers中。

3. 字符串的筛选

除了数组，filter()函数也可以用于字符串的筛选。字符串被看作一个字符的数组，我们可以使用filter()函数筛选出符合特定条件的字符。

假设我们有一个字符串Hello, World!，我们想要筛选出所有的小写字母。可以使用filter()函数来实现：

const str = 'Hello, World!';

const lowercaseLetters = Array.from(str).filter(function(char) {
  return /[a-z]/.test(char);
});

console.log(lowercaseLetters.join(''));

运行以上代码，控制台会输出如下结果：

elloorld

可以看到，原始字符串中的大写字母H和逗号被筛除，只有小写字母被保留，并通过join('')方法将它们连接起来。

4. 数组元素的筛选和映射

filter()函数既可以筛选数组元素，也可以在筛选的同时对元素进行映射。

假设我们有一个整数数组，我们想要筛选出所有的偶数，并将它们乘以2。可以使用filter()函数和map()函数结合使用来实现：

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

const evenDoubled = numbers.filter(function(number) {
  return number % 2 === 0;
}).map(function(number) {
  return number * 2;
});

console.log(evenDoubled);

运行以上代码，控制台会输出如下结果：

[4, 8, 12, 16, 20]

可以看到，原始数组中的奇数和非偶数元素被筛除，只有偶数元素被保留，并且经过乘以2的操作。

5. 使用箭头函数

在ES6中，我们可以使用箭头函数来简化filter()函数的写法。箭头函数可以提供更简洁的语法，使代码更加易读。

将前面的示例中的filter()函数的回调函数改写为箭头函数：

const teachers = [
  { name: '张三', age: 29 },
  { name: '李四', age: 63 },
  { name: '王五', age: 53 },
  { name: '赵六', age: 71 },
  { name: '钱七', age: 84 }
];

const oldTeachers = teachers.filter(teacher => teacher.age > 60);

console.log(oldTeachers);

运行以上代码，控制台会输出与之前相同的结果：

[
  { name: '李四', age: 63 },
  { name: '赵六', age: 71 },
  { name: '钱七', age: 84 }
]

可以看到，通过使用箭头函数，代码更加简洁和易读。

6. 注意事项

使用filter()函数时，需要注意以下几点：

filter()函数返回的是一个新的数组，而不是修改原始数组。
如果原始数组中不存在满足条件的元素，filter()函数返回一个空数组。
filter()函数不会改变原始数组中元素的位置，新数组的顺序与原数组保持一致。
如果传入的回调函数是一个箭头函数，this的值将指向当前的词法作用域，而不是调用者。

7. 总结

filter()函数是JavaScript中一个非常有用的数组方法，可以用于筛选数组元素，字符串筛选，以及数组元素的筛选和映射等操作。掌握filter()函数的用法，能够更加灵活地处理数组和字符串，提高开发效率和代码的可读性。

js filter函数的用法