JavaScript 数组 filter() 方法介绍

JavaScript 中，数组可以通过 filter() 方法进行筛选过滤，返回一个新数组，新数组中只包含符合条件的元素。该方法接受一个回调函数作为参数，用于判断每一个元素是否符合条件，回调函数返回值为 true 或 false，true 表示该元素被筛选，false 表示该元素不被筛选。

语法

arr.filter(callback[, thisArg])

• arr：要进行筛选的数组，必选。
• callback：用于筛选过滤的回调函数，必选。
• thisArg：可选，回调函数执行时 this 对象指向。

回调函数参数

回调函数支持三个参数：

• element：当前元素的值。
• index：当前元素的索引。
• array：原始数组。

返回值

• 返回符合条件的元素组成的新数组。

示例

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

const result = arr.filter((element) => element % 2 === 0);

console.log(result); // [2, 4]

使用示例

筛选出数组中大于 10 的元素

const arr = [1, 5, 10, 15, 20];

const result = arr.filter((element) => element > 10);

console.log(result); // [15, 20]

筛选出数组中单词长度大于等于 5 的元素

const arr = ["apple", "banana", "grape", "peach"];

const result = arr.filter((element) => element.length >= 5);

console.log(result); // ["apple", "banana", "grape"]

筛选出数组中对象某一属性符合条件的元素

const arr = [
  { name: "apple", price: 10 },
  { name: "banana", price: 20 },
  { name: "grape", price: 8 },
  { name: "peach", price: 15 },
];

const result = arr.filter((element) => element.price > 10);

console.log(result); // [{ name: "banana", price: 20 }, { name: "peach", price: 15 }]

使用 thisArg 改变回调函数中的 this 指向

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

const result = arr.filter(function (element) {
  return element > this;
}, 2);

console.log(result); // [3, 4, 5]

注意事项

• 回调函数需要注意返回值类型。
• filter() 方法不会改变原始数组，而是返回一个新数组。
• 如果传参 thisArg，则回调函数中的 this 指向 thisArg。
• 如果原数组中存在空元素，则新数组中同样会存在该空元素。
• 回调函数不会改变原始数组中各个元素的类型和值。