如何在 ES7 中使用 Array.prototype.filter 方法过滤数组元素
在前端开发过程中，经常需要对数组进行过滤，以便获取符合条件的元素。ES7 中提供了 Array.prototype.filter 方法来处理数组元素，使得过滤操作变得简单、快速、可靠。在本文中，我们将学习如何在 ES7 中使用 Array.prototype.filter 方法过滤数组元素。
简介
Array.prototype.filter 方法是一个可以在数组上调用的高阶函数，用于筛选数组元素。该方法接收一个回调函数作为参数，函数需要返回一个布尔值，表示是否保留该元素。
当回调函数返回真值时，保留该元素并将其加入一个新的数组中；当回调函数返回假值时，将其丢弃并从新的数组中移除该元素。最后，Array.prototype.filter 方法将返回一个新的数组，其中包含使用回调函数筛选的元素。
语法
array.filter(callback(element[, index[, array]])[, thisArg])
Array.prototype.filter 方法的基本语法如上所示。它接收一个回调函数作为第一个参数，该回调函数可以接收三个参数：
- element：当前正在处理的数组元素。
- index：可选。当前正在处理的元素的索引。
- array：可选。正在处理的数组对象。
第二个可选参数 thisArg，用于指定回调函数中 this 的值。
示例
现在我们来看一个具体的例子。假设我们有一个数组，我们希望过滤出其中所有大于等于 5 的元素。我们可以使用 Array.prototype.filter 方法来实现这个需求：
const originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredArray = originalArray.filter((element) => {
return element >= 5;
});
console.log(filteredArray); // [5, 6, 7, 8, 9, 10]在上面的代码中，我们首先定义了一个原始数组 originalArray。然后我们调用 Array.prototype.filter 方法，并使用一个 lambda 表达式作为回调函数。
这个 lambda 表达式接收一个参数 element，它表示当前正在处理的数组元素。在这个 lambda 表达式中，我们返回一个布尔值，表示当前元素是否要被保留在过滤后的新数组中。
最后，我们使用 console.log 显示了过滤后的数组 filteredArray。
深入
在我们已经了解了 Array.prototype.filter 方法的基本用法之后，现在让我们来深入了解一些高级用法和技巧。
在回调函数中访问索引和数组对象
在原始数组中的每个元素都可以被处理时，很方便能访问其在数组中的索引。我们可以将这个索引传递给回调函数当中：
const originalArray = ["apple", "banana", "cherry", "date", "elderberry"];
const filteredArray = originalArray.filter((element, index) => {
return index % 2 === 0;
});
console.log(filteredArray); // ["apple", "cherry", "elderberry"]在这个示例中，我们首先定义了一个原始数组 originalArray。然后我们调用 Array.prototype.filter 方法，并使用了一个带有两个参数的回调函数：element 和 index。
回调函数返回一个布尔值，用于指示当前元素是否应该保留。我们使用了一个简单的算法，如果当前元素在数组中的索引是偶数，则保留该元素。
最后，我们使用 console.log 输出了过滤后的数组 filteredArray。
同样，在回调函数中，访问正在处理的元素所在的数组对象也是可能的：
const originalArray = [1, 2, 3, 4, 5, 6];
const filteredArray = originalArray.filter((element, index, array) => {
return index % 2 === 0 && element * array[index + 1] < 20;
});
console.log(filteredArray); // [1, 3, 5]在这个示例中，我们首先定义了一个原始数组 originalArray。然后我们调用 Array.prototype.filter 方法，并使用了一个带有三个参数的回调函数：element、index 和 array。
回调函数返回一个布尔值，用于指示当前元素是否应该保留。我们使用了一个简单的算法，如果当前元素在数组中的索引是偶数，并且它和它后面的值的乘积小于 20，则保留该元素。
最后，我们使用 console.log 输出了过滤后的数组 filteredArray。
运用箭头函数简化代码
在 ES6 中，我们可以使用箭头函数来简化回调函数的代码。有了箭头函数，我们可以大大减少不必要的单词和语法噪声。下面是前面示例的回调函数使用箭头函数的版本：
const originalArray = ["apple", "banana", "cherry", "date", "elderberry"]; const filteredArray = originalArray.filter((element, index) => index % 2 === 0); console.log(filteredArray); // ["apple", "cherry", "elderberry"]
这个示例中，我们使用箭头函数来简化回调函数。上面的示例将回调函数转换为单行，删除了 return 语句并省略了代码块。这种表示方式更简短、易读且精确。
使用 object destructuring 解构数组元素
ES6 中引入了一种方便的语法，叫做 "object destructuring"（对象解构）。这种语法可用于将一个数组元素解构为多个变量，以便方便访问和更直接处理。
下面是一个示例使用对象解构的示例：
-- -------------------- ---- ------- ----- ------------- - - - ----- -------- ------- - -- - ----- --------- ------- - -- - ----- --------- ------- - -- - ----- ------- ------- - -- - ----- ------------- ------- - -- -- ----- ------------- - ----------------------- ------ -- -- ------ - - --- --- --------------------------- -- ------- --------- ------- --- ------ ------- ------- ---
在这个示例中，我们首先定义了一个数组 originalArray，其中包含具有 name 和 weight 两个属性的对象元素。然后我们调用 Array.prototype.filter 方法，使用带有一种 "对象解构" 语法的回调函数。
使用对象解构语法，我们可以选择要从每个被处理元素中提取哪些属性，并将它们保存在单独的变量中。在这个简单的示例中，我们只提取了 weight 属性。
我们使用一个简单的算法，如果 weight 是偶数，则保留该元素。最后，我们使用 console.log 输出了过滤后的数组 filteredArray。
总结
在本文中，我们学习了如何在 ES7 中使用 Array.prototype.filter 方法过滤数组元素。我们看到了该方法的基本语法和用法，以及一些高级技巧，如在回调函数中访问索引和数组对象、使用箭头函数来简化代码和使用对象解构语法解构数组元素。
当我们需要从数组中获取符合特定条件的元素时，Array.prototype.filter 是一个非常有用的工具。希望这篇文章对你有所帮助，也希望你能在实践中更好地利用该方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d47350b5eee0b525bfe420