ES6 数组 filter() 方法

在 JavaScript 中，对于数组的操作是基础中的基础。数组的 filter() 方法是 ES6 中新增的方法之一，它可以筛选出符合条件的数组元素，并返回一个新的数组。

语法

array.filter(callback[, thisArg])

参数:

• callback: 必须。用来测试每个元素的函数，接收三个参数：
  • element：当前元素
  • index：当前元素下标
  • array：目标数组
  • thisArg：可选。执行 callback 函数时使用的 this 值。

返回值：

• 一个新的、由通过测试的元素组成的数组，如果没有任何元素通过测试，则返回一个空数组。

例子

const fruits = ['apple', 'banana', 'grape', 'watermelon', 'strawberry'];
const filteredFruits = fruits.filter(fruit => fruit.length > 5);
console.log(filteredFruits); // ['banana', 'watermelon', 'strawberry']

上述例子中，数组 fruits 中的所有元素都映射到了一个返回值为布尔类型的函数中，并且只有字符长度大于 5 的水果才会被保留到返回的新数组 filteredFruits 中。

实战应用

数组去重

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index, array) => array.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用 filter() 方法结合 indexOf() 方法即可实现数组去重。

数组筛选

const persons = [
  { name: 'A', age: 25 },
  { name: 'B', age: 18 },
  { name: 'C', age: 30 },
  { name: 'D', age: 16 }
];
const validPersons = persons.filter(person => person.age >= 18); // 仅保留年龄大于等于 18 岁的人
console.log(validPersons); // [{ name: 'A', age: 25 }, { name: 'C', age: 30 }]

上述例子中，我们使用了 filter() 方法结合箭头函数以及 ES6 的对象解构语法，仅保留年龄大于等于 18 岁的人。

注意

filter() 方法不会改变原始数组。它会返回一个新的数组，其中仅仅包含符合条件的元素，同时保持原始数组的顺序不变。如果对新数组进行更改，对原数组无影响。

结论

数组的 filter() 方法非常方便，它可以帮助我们快速筛选出符合条件的数组元素，并返回一个新的数组，同时不会改变原始数组，让我们在实际项目中提高了效率。