学习JavaScript数组过滤功能

306 阅读5分钟

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的 _过滤器()_函数和它的用法。它包含了一些基本的例子,有助于理解 过滤器()函数。