Javascript提供了许多内置的数组函数,可以快速、有效地完成任务。Javascript的 filter()函数是其中一个常用的函数,用于遍历数组的元素,并获得所需的结果。
在这篇文章中,我们将掌握javascript的概念 filter()函数的概念。什么是 过滤器()函数,以及我们如何利用它来帮助简化Javascript代码,并有效和最快速地完成任务。
什么是JavaScript中的_过滤器_函数
Javascript的 filter()数组的函数是用来根据给定的条件或测试过滤出数据的。
- 该 filter()函数逐一接收数组中的元素,并对每个元素施加条件。
- 该 filter()函数将通过条件的元素保存在一个不同的数组中,并在遍历整个数组后返回结果数组。
- 这个 filter()数组的函数并不影响原来的数组。
让我们更深入地探索它,了解它的语法和功能,并举几个例子。
在JavaScript中过滤函数的语法
array.filter(function_name, thisValue);
数组的 过滤器()函数需要一个带有三个参数的函数作为回调函数。回调函数的语法和参数的顺序将是这样的。
function function_name(value, index, array) {
return condition;
}
在回调函数的 _filter()_方法中。
- 第一个参数是迭代过程中数组元素的当前 值。
- 第二个参数是可选参数,是迭代过程中数组元素的当前索引。
- 最后,我们还可以将数组本身传递给回调函数,以便在回调函数中拥有一些自定义功能。
我们还可以向函数传递 "thisValue",其中 "this "关键字指的是父块/对象。
现在我们将用几个例子来看看它在现实生活中的实现。
注意:我们将使用浏览器控制台来演示本篇文章中执行的例子。要打开浏览器的控制台。
- 在Chrome和其他基于chromium的浏览器中使用F12键。
- 在Mozilla使用CTRL + SHIFT + K键盘快捷键。
- 在Safari浏览器中使用Option + ⌘ + C键盘快捷键(如果没有出现开发者菜单,则按⌘ + 打开偏好**,** 并在 高级标签中勾选 "在菜单栏中显示开发菜单")。
如何使用JavaScript中的filter()函数
理解该函数的最好例子是 filter()函数是根据给定的条件从一个数组中过滤一些数字。
例1:
假设我们有一个数字数组,我们想得到大于某个特定数字的数字。
var numbers = [23,16,38,5,10,19]
获得所需数字范围的第一种方法是循环浏览整个数组,并在循环中设置一个条件,检查数字是否通过了给定的测试(是否大于18)。如果该数字通过了测试,它将被添加到一个新的数组中。下面是过滤数字的for循环的代码。
varfilteredArray = [];
for (leti = 0; i18) {
filteredArray.push(numbers[i])
}
}
console.log(filteredArray);
在上面的代码中,我们首先在 "numbers "数组上建立一个循环,然后使用if语句设置一个条件,如果数组元素通过条件,它将被追加/推送到 "filteredArray "变量。
虽然我们已经得到了想要的范围作为输出。但是,为什么不使用一个聪明而简单的方法来获得过滤后的数组,使用 filter()方法得到过滤后的数组,在这里我们不需要对 "filteredArray"这样的变量进行变异。
使用filter()函数
这个 filter()获得大于18的数字的函数是这样的。
varfilteredArray = numbers.filter(getAdults);
functiongetAdults(n){
return n >18;
}
console.log(filteredArray);
在上面给出的代码中,你可以看到,我们首先将 "getAdults "函数传递给了 过滤器()函数,在 "getAdults "函数的定义中,我们只是检查了该数字是否大于18,如果该条件返回为真,则返回该数组元素。
一旦 "filter "函数检查了 "numbers "数组中的所有数字,它将把最后的结果存储在 "filteredArray "变量中。
最后,我们刚刚安慰了 "filteredArray "变量以验证我们的 filter()函数是否正常工作。
你可以通过上面的截图来验证,该 filter()函数已经返回了所有大于18的数字。
另一种更简短、更容易的写法 filter()的回调函数是将 filter()的回调函数为箭头函数。
将回调函数写在 filter()函数的括号内写回调函数的语法将是这样的。
varfilteredArray = numbers.filter((n) => {
return n >18
});
console.log(filteredArray);
好了,这只是一个简单的例子,我们只有一个数字数组;那么对象数组呢。让我们也来试试。
例2:
假设我们有一个数组中的学生列表,我们想得到学费高于8000美元的学生列表。
var students = [
{
id: 1,
name: "John,"
age: 12,
fee: 8500
},
{
id: 2,
name: "Bob",
age: 15,
fee: 4500
},
{
id: 3,
name: "Steve",
age: 10,
fee: 7500
},
{
id: 4,
name: "Harry",
age: 13,
fee: 10500
},
{
id: 5,
name: "Tom",
age: 14,
fee: 9000
},
{
id: 6,
name: "Ron",
age: 11,
fee: 6000
},
]
该 过滤()获取过滤后的学生名单的函数将是这样的。
varfilteredStudents = students.filter((student) => {
returnstudent.fee> 8000
});
console.log(filteredStudents);
现在,这段代码中唯一的区别是,一个单一的对象被作为值传递给回调函数,在回调函数的定义里面,我们放了一个条件,并返回学生的费用大于8000美元的那个对象。
通过观察上面的截图,你可以看到学生的费用大于8000美元,并作为输出显示。所以这就是我们如何在函数中访问数组的对象。 filter()函数中访问数组的对象。
结论
在这篇文章中,我们已经了解了什么是 filter()函数是什么,以及我们如何使用它来帮助简化Javascript的代码。
我们已经知道, filter()函数根据给定的条件过滤掉数组中的元素。该 filter()函数逐一接收数组中的元素,接收应用于数组中每个元素的回调函数,并返回过滤后的新数组。
这篇文章是关于JavaScript的 _过滤器()_函数和它的用法。它包含了一些基本的例子,有助于理解 过滤器()函数。