在 JavaScript 中，Array.prototype.filter() 方法是常常用到的函数之一。在 ES7 中，Array.prototype.filter() 又作了一些新的改进，本文将对 ES7 中的 Array.prototype.filter() 方法进行详细的介绍和使用示例，帮助读者更好地理解和使用这个函数。
什么是 Array.prototype.filter() 方法
Array.prototype.filter() 方法用于从数组中筛选出符合条件的元素，返回一个新的数组，不会改变原数组。它的语法形式如下：
array.filter(callback(element, index, arr), thisArg);
其中：
- array：要操作的数组；
- callback：回调函数，用来判断数组的每个元素是否符合条件，应该返回布尔值；
- element：每个数组元素的值；
- index：每个数组元素的索引；
- arr：数组本身，一般情况下不需要使用；
- thisArg：回调函数中使用的 this 值，可以省略。
Array.prototype.filter() 方法会遍历数组，对每一个元素都执行一次 callback 函数，如果 callback 函数返回 true，则这个元素会被加入到一个新的数组中返回，否则就被过滤掉。
ES7 中 Array.prototype.filter() 方法的改进
在 ES7 中，Array.prototype.filter() 方法增加了 async/await 支持，使得我们可以在回调函数中使用异步操作。
具体来说，我们可以将回调函数改为 async function，然后在其中使用 await，如下所示：
const results = await array.filter(async function(element) {
// 异步操作
return condition;
});这样，异步操作就可以顺利进行，不会影响到代码的执行流程。
使用示例
下面我们来看一些使用 Array.prototype.filter() 方法的示例。
示例一：从数组中筛选出偶数
我们现在有一个数组，想要从中筛选出所有的偶数。可以使用以下代码：
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6]这里回调函数中的 num 代表每个数组元素的值，我们对每个元素都执行一次 % 运算，如果余数等于 0 则代表这个元素是一个偶数。
示例二：从数组中移除空字符串
我们现在有一个数组，想要将其中的空字符串全部移除。可以使用以下代码：
const strings = ['one', '', 'two', '', 'three'];
const nonEmptyStrings = strings.filter(function(str) {
return str !== '';
});
console.log(nonEmptyStrings); // ['one', 'two', 'three']这里回调函数中的 str 代表每个数组元素的值，我们去除空字符串就是判断这个元素不等于空字符串即可。
示例三：使用异步操作筛选出 URL 对应的内容
我们现在有一个数组，其中每个元素都是一个 URL，我们需要使用异步操作从 URL 对应的网页中筛选出一些内容。
-- -------------------- ---- -------
----- ---- - -
-----------------------------------------------
-----------------------------------------------
----------------------------------------------
--
----- -------- --------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
-
----- -------- --------------- -
----- ----- - ----- ----------------------------------
----- ------ - --------------------------- -
------ ---------------
--------------------- -
------ -----------
---
--------------------
-
----------------这里我们定义了一个 getUrlData 函数，用于从 URL 中获取数据，然后通过 Promise.all 将所有 URL 的异步操作组装起来，最后使用 Array.prototype.filter() 方法从返回数据中筛选出符合条件的元素。本示例中筛选出的内容是已经完成的任务的标题。
总结
通过本文的介绍，我们可以看到 Array.prototype.filter() 方法的作用及语法，以及在 ES7 中增加的异步操作支持。我们还学习了一些使用示例，其中包括从数组中筛选出偶数、移除空字符串以及从 URL 中获取数据等等。
掌握 Array.prototype.filter() 方法，能够让我们更方便地完成数组元素的操作和筛选，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d20c85b5eee0b52596c6a6