在 JavaScript 中，我们经常需要对数据进行处理和筛选，以得到我们需要的结果。而 ES7 中新增的 Array.prototype.filter 方法，可以帮助我们更方便地进行数组数据的筛选和过滤，提高数据处理的效率和质量。
Array.prototype.filter 方法介绍
Array.prototype.filter 是 JavaScript 中的一个数组原型方法，用于筛选符合条件的数组元素，返回一个新的数组。该方法的语法如下：
array.filter(callback(element[, index[, array]])[, thisArg])
其中，callback 是一个回调函数，用于对数组元素进行筛选。它可以接收三个参数：
- element：当前正在处理的数组元素
- index：当前正在处理的数组元素的索引（可选）
- array：当前正在处理的数组（可选）
而 thisArg 则是可选的，用于指定 callback 函数中 this 的值。
callback 函数需要返回一个布尔值，表示当前元素是否符合条件。如果返回 true，该元素将被保留在新的数组中；否则，将被过滤掉。
Array.prototype.filter 方法的实例应用
下面我们来看几个实例，了解 Array.prototype.filter 方法的具体应用。
筛选出符合条件的元素
假设我们有一个数组，里面存放了一些数字，我们需要筛选出其中所有大于等于 5 的元素。我们可以使用 Array.prototype.filter 方法来实现：
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const newArray = array.filter((element) => element >= 5); console.log(newArray); // [5, 6, 7, 8, 9]
筛选出符合条件的对象
假设我们有一个数组，里面存放了一些对象，每个对象都有一个 age 属性，我们需要筛选出其中所有 age 大于等于 18 的对象。我们可以使用 Array.prototype.filter 方法来实现：
const array = [
{ name: '张三', age: 16 },
{ name: '李四', age: 20 },
{ name: '王五', age: 30 },
{ name: '赵六', age: 15 },
];
const newArray = array.filter((element) => element.age >= 18);
console.log(newArray); // [{ name: '李四', age: 20 }, { name: '王五', age: 30 }]筛选出符合条件的字符串
假设我们有一个数组，里面存放了一些字符串，我们需要筛选出其中所有包含 'a' 的字符串。我们可以使用 Array.prototype.filter 方法来实现：
const array = ['apple', 'banana', 'cherry', 'date'];
const newArray = array.filter((element) => element.includes('a'));
console.log(newArray); // ['apple', 'banana']使用 Array.prototype.filter 方法的注意事项
在使用 Array.prototype.filter 方法时，需要注意以下几点：
- callback 函数必须返回一个布尔值，否则会报错。
- 使用箭头函数时，如果只有一个参数，可以省略小括号；如果只有一个表达式，可以省略大括号和 return。
- 如果需要使用 this，可以使用第二个参数 thisArg 来指定。
- Array.prototype.filter 方法不会改变原数组，而是返回一个新的数组。
总结
Array.prototype.filter 方法是 JavaScript 中一个非常实用的数组方法，可以帮助我们更方便地进行数组数据的筛选和过滤。在实际开发中，我们可以根据具体需求，灵活运用该方法，提高数据处理的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ef46f72b3ccec22f853d1d