跳到主要内容

JavaScript 数组的 filter() 方法详解

filter() 方法返回一个新数组，其中包含通过给定函数定义的测试的所有元素。

示例​

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

// 检查偶数的函数
function checkEven(number) {
  if (number % 2 == 0) return true;
  else return false;
}

// 通过筛选 numbers 数组中的偶数来创建新数组
let evenNumbers = numbers.filter(checkEven);
console.log(evenNumbers);

// 输出：[ 2, 4, 6, 8, 10 ]

filter() 语法​

filter() 方法的语法为：

arr.filter(callback(element), thisArg);

这里，arr 是一个数组。

filter() 参数​

filter() 方法接受：

  • callback - 在每个数组元素上执行的测试函数；如果元素通过测试则返回 true，否则返回 false。它接受：

  • element - 数组中正在传递的当前元素。

thisArg（可选）- 执行回调时使用的 this 的值。默认为 undefined。

filter() 返回值​

  • 返回只包含通过测试的元素的新数组。

注释：

  • filter() 不改变原始数组。
  • filter() 不会对没有值的数组元素执行 callback。

示例 1：从数组中过滤出值​

const prices = [1800, 2000, null, 3000, 5000, "Thousand", 500, 8000];

function checkPrice(element) {
  return element > 2000 && !Number.isNaN(element);
}

let filteredPrices = prices.filter(checkPrice);
console.log(filteredPrices); // [ 3000, 5000, 8000 ]

// 使用箭头函数
let newPrices = prices.filter((price) => price > 2000 && !Number.isNaN(price));
console.log(newPrices); // [ 3000, 5000, 8000 ]

输出

[ 3000, 5000, 8000 ]
[ 3000, 5000, 8000 ]

在这里，所有 小于或等于 2000 的数字和所有 非数字 值都被过滤掉了。

示例 2：在数组中搜索​

const languages = [
  "JavaScript",
  "Python",
  "Ruby",
  "C",
  "C++",
  "Swift",
  "PHP",
  "Java",
];

function searchFor(arr, query) {
  function condition(element) {
    return element.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  }
  return arr.filter(condition);
}

let newArr = searchFor(languages, "ja");
console.log(newArr); // [ 'JavaScript', 'Java' ]

// 使用箭头函数
const searchArr = (arr, query) =>
  arr.filter(
    (element) => element.toLowerCase().indexOf(query.toLowerCase()) !== -1,
  );

let newLanguages = searchArr(languages, "p");
console.log(newLanguages); // [ 'JavaScript', 'Python', 'PHP' ]

输出

[ 'JavaScript', 'Java' ]
[ 'JavaScript', 'Python', 'PHP' ]

在这里，元素和查询都被转换为小写，并使用 indexOf() 方法检查查询是否存在于元素中。

未通过此测试的元素被过滤掉。

推荐阅读： JavaScript 数组 map()

最后于 更新