js filter方法|极客笔记

js filter方法

1. 概述

JavaScript中的filter()方法是Array对象的一个内置方法，用于过滤数组中的元素，返回一个新的数组，由符合特定条件的元素组成。这个方法提供了一种简洁的方式来筛选出数组中需要的元素，同时也使代码更可读并且易于维护。

2. 语法

filter()方法的语法如下：

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

其中，array是要操作的原始数组，callback是一个回调函数，thisArg是可选参数，指定回调函数中的this值。

callback函数接收三个参数:element代表当前正在被处理的元素，index表示当前元素的下标，array是原始数组。
callback函数应该返回一个布尔值，当返回true时，表示当前元素符合条件，会被包括在返回的新数组中；如果返回false或者不返回任何值，则当前元素将被忽略。

3. 示例

下面通过几个示例来详细说明filter()方法的使用。

示例1：筛选数组中的偶数

const numbers = [1, 2, 3, 4, 5, 6];

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

console.log(evenNumbers); // 输出[2, 4, 6]

在这个示例中，我们定义了一个名为numbers的数组，包含了一些数字。然后，我们调用filter()方法，传入一个回调函数来筛选出数组中的偶数。由于filter()方法会根据回调函数的返回值来决定是否保留当前元素，我们使用取模运算符（%）来判断元素是否为偶数。最后，我们打印输出所得到的新数组evenNumbers，结果为[2, 4, 6]。

示例2：筛选包含特定关键字的字符串

const fruits = ["apple", "banana", "kiwi", "orange", "watermelon"];

const keyword = "n";
const filteredFruits = fruits.filter(function(fruit) {
  return fruit.includes(keyword);
});

console.log(filteredFruits); // 输出["banana", "orange"]

在这个示例中，我们定义了一个名为fruits的数组，包含了一些水果名称。然后，我们利用filter()方法筛选出包含特定关键字的水果。这里我们定义了一个变量keyword，表示我们要查找的关键字为”n”。然后，我们传入一个回调函数，利用字符串的includes()方法来判断水果名称是否包含关键字。最后，我们打印输出所得到的新数组filteredFruits，结果为["banana", "orange"]。

示例3：使用箭头函数简化代码

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

在示例1中，我们使用了一个普通的匿名函数作为回调函数。在ES6中，我们可以使用箭头函数进一步简化代码。箭头函数使用=>语法，并且具有隐式返回值的特性。因此，我们可以将示例1中的回调函数简化为箭头函数，并且省略掉函数的大括号和return关键字。这样，我们得到的代码更加简洁。运行结果和示例1相同。

4. 使用注意事项

filter()方法返回的是一个新的数组，不会改变原始数组。这个新数组中的元素是符合条件的元素的拷贝。
使用filter()方法时，应该避免修改被筛选的数组。如果要在原始数组上进行修改，则推荐使用forEach()或map()方法。
在回调函数中，可以根据需要使用第2个参数index和第3个参数array。例如，可以通过index参数来判断奇偶数，或者通过array参数来获取数组的长度。
如果没有提供thisArg参数，回调函数中的this值默认为undefined。
如果需要在回调函数中使用this值，可以传入第2个参数thisArg来指定this的值。

5. 总结

filter()方法是JavaScript Array对象的一个有用的方法，用于从数组中筛选出符合特定条件的元素。通过回调函数的灵活运用，我们可以实现各种不同的筛选需求。使用filter()方法可以使代码更加简洁、易读，并提高代码的可维护性。在使用时，需要注意方法的语法和使用注意事项，确保正确使用该方法。