龙空技术网

学习和理解JavaScript的 Filter 功能

技术大蜜儿 477

前言:

现在咱们对“js的filter怎么用”大概比较珍视,朋友们都想要知道一些“js的filter怎么用”的相关知识。那么小编同时在网络上收集了一些关于“js的filter怎么用””的相关知识,希望小伙伴们能喜欢,朋友们一起来学习一下吧!

filter定义和语法

filter()方法返回从通过在原始数组上执行的某个测试的所有元素创建的新数组。

这是语法的样子:

let newArr = oldArr.filter(callback);
newArr - 返回的新数组 oldArr - 运行过滤器功能的数组 callback - 用于测试oldArr的每个元素的函数。返回true保持元素,返回false以不保留它。

我们的callback函数可以有三个参数:

element - 数组的当前元素 index - 正在处理的值的当前索引 arr - 原始数组filter与for循环示例

您可以将filter()视为for循环,它专门用于从数组中过滤/输出某些值。请考虑以下代码:

let arr = [1, 2, 3, 4, 5, 6];let even = [];for(var i = 0; i < arr.length; i++) { if (arr[i] % 2 === 0) even.push(arr[i]);}// even = [2,4,6]

此代码测试arr数组中的所有值。只接受偶数值并将其推到偶数数组上。结果是所有偶数的数组:偶数= [2,4,6]。

同样,这段代码可行,但有一种更简单的方法可以实现相同的结果 - 使用filter()方法。

要使用filter()函数,我们将从相同的简单数字数组开始:

let arr = [1,2,3,4,5,6];

arr是我们要映射的数组。因为我们只想保持偶数,所以如果数是偶数则返回true,如果数是奇数则返回false。这是一种方法:

let even = arr.filter(val => { return val % 2 === 0;});// even = [2,4,6]

不需要循环,我们不再需要手动将值添加到数组中。使用filter()函数时,您需要做的就是定义要保留的内容,然后为这些值返回true。 Filter()将处理剩下的事情。

在上面我们测试以查看值(val)是否是偶数。如果是偶数,我们返回true,将其添加到偶数数组。如果是奇数,我们返回false,跳过该值。我们剩下的就是我们偶数阵中的所有偶数值!

过滤器示例#2

让我们考虑一个利用对象数组的更复杂的例子。这是我们将使用的数据:

let data = [ { country: 'China', population: 1409517397, }, { country: 'India', population: 1339180127, }, { country: 'USA', population: 324459463, }, { country: 'Indonesia', population: 263991379, }]

我们想要做的是创建一个新阵列,只有人口超过5亿的国家。

要做到这一点,我们所要做的就是测试我们的数据,如果data.population大于500,000,000,则返回true。

let cities = data.filter(val => { return val.population > 500000000;});

只需这两行代码就可以确保只有最大的城市才能列入我们的列表。即使我们的数据更复杂,过滤它的过程仍然相对不变。运行我们的过滤功能后,我们留下了这个:

// cities = [{country: "China", population: 1409517397}, {country: "India", population: 1339180127}]
Filter & ES6

ES6中箭头函数的引入进一步简化了使用filter()。考虑上面的例子,我们只返回人口超过5亿的城市。这是当前的代码:

let cities = data.filter(val => { return val.population > 500000000;});

我们已经使用了箭头函数,但我们的filter()方法仍然可以进一步清理。这是因为从箭头函数返回值时,您可以删除函数中的括号以指示您要返回的值。以下代码完全等于上面的代码:

let cities = data.filter(val => val.population > 500000000);

如上所述,此代码将测试数组中的每个值,以确定是否大于5亿。如果是,则返回一个真值,将元素添加到cities数组中!

标签: #js的filter怎么用