在 JavaScript 的 ES10 版本中，新增了许多有用的方法来帮助我们更加高效地编写代码。其中，Array.filter 方法是一个非常实用的方法，它可以帮助我们筛选出数组中符合指定条件的元素，从而让我们更加方便地处理数组数据。本文将详细介绍 ES10 中新引入的 Array.filter 方法，并提供使用示例和实际应用场景，帮助读者更好地理解和掌握这个方法。
Array.filter 方法的基本语法
在 ES10 中，Array.filter 方法的基本语法如下：
array.filter(callback(element[, index[, array]])[, thisArg])
其中，array 表示要被筛选的数组，callback 是一个回调函数，用于定义筛选条件。这个回调函数可以接受三个参数：
- element：当前正在被遍历的数组元素。
- index：当前正在被遍历的数组元素的索引。
- array：原始的数组。
callback 函数必须返回一个布尔值，如果返回 true，表示当前元素符合筛选条件，将会被保留在新数组中，否则将被过滤掉。最终，Array.filter 方法将返回一个新数组，其中包含符合筛选条件的元素。
另外，Array.filter 方法还可以接受一个可选参数 thisArg，用于指定回调函数中 this 的值。
Array.filter 方法的使用示例
下面是一个简单的使用 Array.filter 方法的示例，用于筛选出数组中所有大于等于 10 的元素：
const arr = [1, 2, 3, 4, 5, 10, 15, 20]; const filteredArr = arr.filter((element) => element >= 10); console.log(filteredArr); // [10, 15, 20]
在这个示例中，我们首先定义了一个数组 arr，然后使用 Array.filter 方法来筛选出所有大于等于 10 的元素，并将结果保存在 filteredArr 中。最终，我们使用 console.log 方法来输出 filteredArr，可以看到输出结果为 [10, 15, 20]，符合我们的预期。
除了上述示例外，Array.filter 方法还可以用于应对更加复杂的应用场景。下面是一些实际的使用示例，帮助读者更好地理解和掌握这个方法。
示例 1：筛选出所有偶数
下面的代码演示了如何使用 Array.filter 方法筛选出数组中所有偶数：
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const filteredArr = arr.filter((element) => element % 2 === 0); console.log(filteredArr); // [2, 4, 6, 8, 10]
在这个示例中，我们首先定义了一个数组 arr，然后使用 Array.filter 方法来筛选出所有偶数，并将结果保存在 filteredArr 中。最终，我们使用 console.log 方法来输出 filteredArr，可以看到输出结果为 [2, 4, 6, 8, 10]，符合我们的预期。
示例 2：筛选出所有长度大于等于 5 的字符串
下面的代码演示了如何使用 Array.filter 方法筛选出数组中所有长度大于等于 5 的字符串：
const arr = ['hello', 'world', 'javascript', 'es10', 'filter', 'array']; const filteredArr = arr.filter((element) => element.length >= 5); console.log(filteredArr); // ['hello', 'world', 'javascript', 'filter', 'array']
在这个示例中，我们首先定义了一个数组 arr，然后使用 Array.filter 方法来筛选出所有长度大于等于 5 的字符串，并将结果保存在 filteredArr 中。最终，我们使用 console.log 方法来输出 filteredArr，可以看到输出结果为 ['hello', 'world', 'javascript', 'filter', 'array']，符合我们的预期。
示例 3：筛选出所有包含指定字符串的元素
下面的代码演示了如何使用 Array.filter 方法筛选出数组中所有包含指定字符串的元素：
const arr = ['hello', 'world', 'javascript', 'es10', 'filter', 'array'];
const filteredArr = arr.filter((element) => element.includes('e'));
console.log(filteredArr); // ['hello', 'javascript', 'es10', 'filter']在这个示例中，我们首先定义了一个数组 arr，然后使用 Array.filter 方法来筛选出所有包含指定字符串的元素，并将结果保存在 filteredArr 中。最终，我们使用 console.log 方法来输出 filteredArr，可以看到输出结果为 ['hello', 'javascript', 'es10', 'filter']，符合我们的预期。
Array.filter 方法的实际应用场景
除了上述示例外，Array.filter 方法还可以应用于许多实际的场景中。下面是一些实际的应用场景，帮助读者更好地理解和掌握这个方法。
应用场景 1：过滤掉数组中的空值
在实际开发中，我们经常需要从数组中过滤掉空值。下面的代码演示了如何使用 Array.filter 方法过滤掉数组中的空值：
const arr = ['hello', '', 'world', null, undefined, 'javascript', '', 'es10', 'filter', 'array']; const filteredArr = arr.filter((element) => element); console.log(filteredArr); // ['hello', 'world', 'javascript', 'es10', 'filter', 'array']
在这个示例中，我们首先定义了一个数组 arr，其中包含了一些空值，如 ''、null 和 undefined。然后，我们使用 Array.filter 方法来过滤掉这些空值，并将结果保存在 filteredArr 中。最终，我们使用 console.log 方法来输出 filteredArr，可以看到输出结果为 ['hello', 'world', 'javascript', 'es10', 'filter', 'array']，符合我们的预期。
应用场景 2：筛选出符合指定条件的元素
在实际开发中，我们经常需要筛选出符合指定条件的元素。下面的代码演示了如何使用 Array.filter 方法筛选出数组中所有价格大于 100 的商品：
-- -------------------- ---- ------- ----- -------- - - - ----- --------- ------ --- -- - ----- ------- ------ --- -- - ----- ---------- ------ ---- -- - ----- ------- ------ ---- -- - ----- ---------- ------ --- -- -- ----- ---------------- - ------------------------- -- ------------- - ------ ------------------------------ -- -- ----- ---------- ------ ---- -- - ----- ------- ------ ---- --
在这个示例中，我们首先定义了一个商品数组 products，其中包含了一些商品的名称和价格。然后，我们使用 Array.filter 方法来筛选出价格大于 1000 的商品，并将结果保存在 filteredProducts 中。最终，我们使用 console.log 方法来输出 filteredProducts，可以看到输出结果为 [{ name: 'MacBook', price: 1499 }, { name: 'iMac', price: 1799 }]，符合我们的预期。
应用场景 3：筛选出符合指定条件的用户
在实际开发中，我们经常需要筛选出符合指定条件的用户。下面的代码演示了如何使用 Array.filter 方法筛选出数组中所有年龄大于等于 18 岁且性别为男性的用户：
-- -------------------- ---- ------- ----- ----- - - - ----- ------ ---- --- ------- ------ -- - ----- ------- ---- --- ------- ------ -- - ----- ------- ---- --- ------- -------- -- - ----- ------- ---- --- ------- ------ -- - ----- ------- ---- --- ------- -------- -- -- ----- ------------- - ------------------- -- -------- -- -- -- ----------- --- -------- --------------------------- -- -- ----- ------ ---- --- ------- ------ -- - ----- ------- ---- --- ------- ------ --
在这个示例中，我们首先定义了一个用户数组 users，其中包含了一些用户的姓名、年龄和性别。然后，我们使用 Array.filter 方法来筛选出年龄大于等于 18 岁且性别为男性的用户，并将结果保存在 filteredUsers 中。最终，我们使用 console.log 方法来输出 filteredUsers，可以看到输出结果为 [{ name: 'Tom', age: 20, gender: 'male' }, { name: 'Mike', age: 19, gender: 'male' }]，符合我们的预期。
总结
本文详细介绍了 ES10 中新引入的 Array.filter 方法，并提供了使用示例和实际应用场景，帮助读者更好地理解和掌握这个方法。在实际开发中，Array.filter 方法可以帮助我们更加高效地处理数组数据，提高开发效率。希望本文对读者有所帮助，欢迎大家提出宝贵意见和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c72ab6add4f0e0ff14c005