在 JavaScript 中，数组是一个非常重要的数据类型。它可以存储许多值，而且可以方便地对这些值进行操作。在 ES9 中，数组原型方法中增加了 Array.prototype.filter()，让数组操作更加便捷。这篇文章将详细讨论 ES9 中的数组原型方法 Array.prototype.filter()，包括它的用法、实现以及示例代码。
什么是 Array.prototype.filter()?
Array.prototype.filter() 是用于过滤数组的原型方法，它会返回一个新的数组，其中包含所有满足指定条件的元素。这个方法接收一个函数作为参数，这个函数用于判断每个元素是否应该包含在过滤后的数组中。
这个过滤函数接收三个参数，分别是:
- currentValue (当前元素的值)
- index (当前元素的索引)
- arr (要过滤的数组)
如果返回值是 true，当前元素就会加入到过滤后的新数组中, 否则会被抛弃。
语法
Array.prototype.filter() 的语法如下:
---------------------- --------
其中，callback 是过滤函数，thisArg 是可选的。如果指定了 thisArg 参数，则在回调函数执行时，this 指向 thisArg。
返回值
Array.prototype.filter() 方法返回一个新数组，其中包含所有满足 callback 函数返回的 true 值的元素。
实现示例
下面将通过一些实例来更全面地理解和使用 Array.prototype.filter() 方法。
示例 1: 过滤出大于 10 的数
----- --- - --- -- --- --- ---- ----- ----------- - ------------------- ------- - ------ ----- - --- --- ------------------------- -- ---- ---
上面的代码中，我们定义了一个数组，然后调用 Array.prototype.filter() 方法，将大于 10 的数过滤出来，最后打印出过滤后的新数组。
示例 2: 过滤出长度大于 3 的字符串
----- --- - --------- --------- --------- --------- ----- ----------- - ------------------- ------- - ------ ------------ - -- --- ------------------------- -- --------- --------- --------- --------
上面的代码中，我们定义了一个字符串数组，然后调用 Array.prototype.filter() 方法，将长度大于 3 的字符串过滤出来，最后打印出过滤后的新数组。
示例 3: 过滤出偶数
----- --- - --- -- -- -- -- --- ----- ----------- - ------------------- ------- - ------ ----- - - --- -- --- ------------------------- -- --- -- --
上面的代码中，我们定义了一个数字数组，然后调用 Array.prototype.filter() 方法，将偶数过滤出来，最后打印出过滤后的新数组。
示例 4: 模拟 Array.prototype.filter() 的实现
---------------------- - -------- ---------- -
----- ------ - ---
--- ---- - - -- - - ------------ ---- -
-- ------------------ -- ------ -
---------------------
-
-
------ -------
--
----- --- - --- -- -- -- ---
----- ----------- - ------------------- ------- -
------ ----- - --
---
------------------------- -- --- --上面的代码中，我们通过给 Array.prototype.filter() 方法添加实现，模拟了它的功能，在自定义函数内部使用 for 循环判断每一个元素是否符合条件，将符合条件的元素 push 到一个新的数组中，最终返回这个数组。
结论
Array.prototype.filter() 是一种非常有用的数组原型方法，它可以帮助我们便捷地过滤数组中的元素，而不需要使用复杂的循环语句。使用它能够使代码更加简洁、易读，同时也可以提高开发效率。希望本文对大家能有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f2bcf8a44b36ee57678c66