JavaScript中的.filter()方法

在JavaScript中，.filter()是一个数组方法，用于过滤并返回一个新的数组，其中包含符合指定条件的元素。该方法基于给定函数的返回值来判断元素是否应该被包含在返回的数组中。

语法

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

• callback：必需。一个函数，用于对每个元素进行处理的测试函数。它接收三个参数：

  • element：当前正在被处理的元素。
  • index：可选。当前正在被处理的元素的索引。
  • array：可选。调用.filter()方法的数组。

• thisArg：可选。可在callback函数中用作this关键字的一个对象。

返回值

.filter()方法返回一个新数组，其中包含通过测试的元素。

示例

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

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

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

上述代码中，通过.filter()方法将数组numbers中的奇数筛选出来并存入新的数组oddNumbers。回调函数判断条件为number是否为奇数，如果是奇数则返回true，否则返回false。最终oddNumbers数组中包含的就是numbers中的奇数 [1, 3, 5]。

更多示例

过滤对象数组

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' },
  { name: 'orange', color: 'orange' }
];

const redFruits = fruits.filter(function (fruit) {
  return fruit.color === 'red';
});

console.log(redFruits); // 输出 [{ name: 'apple', color: 'red' }]

上述代码中，通过.filter()方法筛选出颜色为红色的水果。

过滤基于条件的字符串数组

const words = ['hello', 'world', 'foo', 'bar', 'baz'];

const filteredWords = words.filter(function (word) {
  return word.length > 3;
});

console.log(filteredWords); // 输出 ['hello', 'world']

上述代码中，通过.filter()方法筛选出长度大于3的单词。

总结

.filter()方法是一个在JavaScript中对数组进行筛选操作的有用工具。它能够根据指定的条件过滤数组，返回一个包含通过测试的元素的新数组。学会灵活运用.filter()方法可以提高程序的效率。