js filter过滤器用法|极客笔记

js filter过滤器用法

1. 简介

在JavaScript中，我们经常需要对数组进行过滤，以得到满足特定条件的元素集合。对于这种需求，可以使用数组的 filter() 方法来实现。filter() 方法会通过指定的函数判断数组中的每个元素是否应该被保留，如果判断为 true，则该元素将被保留在新数组中。

filter() 方法的语法如下：

let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

其中，arr 表示要进行过滤操作的数组，callback 是一个用于测试每个元素的函数。它接受三个参数：

element：表示当前正在被处理的元素。
index（可选）：表示当前正在被处理的元素的索引。
array（可选）：表示调用 filter 方法的数组。

callback 函数会返回一个布尔值，如果返回 true，则表示当前元素应该保留在新数组中。filter() 方法会遍历数组中的每个元素，依次调用 callback 函数，并将返回值为 true 的元素收集起来，形成一个新的数组，并将其返回。

2. 使用示例

在本节中，我们将通过一些实例来展示 filter() 方法的用法。

示例1：获取大于等于5的元素

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

let result = numbers.filter(function(number) {
  return number >= 5;
});

console.log(result);  // 输出: [5, 6, 7, 8, 9]

在这个示例中，我们定义了一个数组 numbers，其中包含了一系列数字。通过使用 filter() 方法，我们创建了一个新的数组 result，其中包含了 numbers 数组中大于等于5的元素。

示例2：过滤字符串数组

let fruits = ['apple', 'banana', 'grape', 'orange'];

let result = fruits.filter(function(fruit) {
  return fruit.length > 5;
});

console.log(result);  // 输出: ['banana', 'orange']

在这个示例中，我们定义了一个字符串数组 fruits，其中包含了一些水果的名称。通过使用 filter() 方法，我们创建了一个新的数组 result，其中包含了 fruits 数组中长度大于5的水果。

3. 注意事项

在使用 filter() 方法时，需要注意以下几点：

filter() 方法不会修改原始数组，而是返回一个新的数组。

let numbers = [1, 2, 3, 4, 5];

let result = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(numbers);  // 输出: [1, 2, 3, 4, 5]
console.log(result);   // 输出: [2, 4]

在这个示例中，我们过滤出了 numbers 数组中的偶数，但原始数组 numbers 并没有发生变化。

在 callback 函数中可以使用第二个参数 index 来获取当前元素的索引值。

let numbers = [1, 2, 3, 4, 5];

let result = numbers.filter(function(number, index) {
  return index % 2 === 0;
});

console.log(result);   // 输出: [1, 3, 5]

在这个示例中，我们过滤出了 numbers 数组中索引为奇数的元素。

在 callback 函数中可以使用第三个参数 array 来引用原始数组。

let numbers = [1, 2, 3, 4, 5];

let result = numbers.filter(function(number, index, array) {
  return array.indexOf(number) % 2 === 0;
});

console.log(result);   // 输出: [1, 3, 5]

在这个示例中，我们过滤出了 numbers 数组中在数组中的索引为偶数的元素。