filter()
方法会创建了一个新的数组,其中包含了旧数组中所有通过某个测试的元素,该方法是以函数形式提供的。
让我们来看看语法:
let new = array.filter((v, i, a) => { // 如果满足条件,元素会返回给new // 如果不满足条件则跳过该元素 }); // new - 新建的数组 // array - 被过滤的数组 // v - 当前被处理的值,也就是value // i - 当前被处理值的索引,也就是index // a - 原始数组,也就是array 复制代码
可以认为 filter()
方法是一个循环,专门用于过滤数组中的某些值。
请看下面的例子:
let nums = [11, 12, 13, 14, 15, 16]; let evenNums = []; for(var i = 0; i < nums.length; i++) { if (nums[i] % 2 === 0) evenNums.push(nums[i]); } // evenNums = [12,14,16] 复制代码
这段代码测试了nums数组中所有的值,只有偶数值被接受并push到了evenNums数组中。
虽然这样写是可以的,但有一个更简单的方法来实现同样的结果。
我们使用 filter()
方法重写前面的函数:
let nums = [11,12,13,14,15,16]; let evenNums = nums.filter(value => value % 2 === 0); // evenNums = [12,14,16] 复制代码
看,没有任何循环。
我们可以用一个干净漂亮的函数来创建同样的数组。因为我们只用数组中的值value,所以只把值传递给 filter()
方法就可以了。
现在我们看一个更加复杂的例子——一个对象数组,下面是我们需要使用的数据:
let data = [ { country: 'Netherlands', population: 17122267, }, { country: 'Germany' , population: 83694772, }, { country: 'United Kingdom', population: 67767045, }, { country: 'Belgium' , population: 11572813, } ]; 复制代码
So now what?
我们想要创建一个新的数组,其中只包含人口小于5000万的国家,我们需要测试数据并返回正确的数据,那些 data.population
小于5000万的国家的数据。
let smallCountries = data.filter(v => v.population > 50000000); 复制代码
只需要这一行代码就能确保小人口的国家进入我们的新数组。
尽管我们的数据更加复杂,但是过滤的过程相对没有变化。
在运行过我们的过滤函数后,我们得到了这个:
// smallCountries = [ // {country: "Netherlands", population: 17122267}, // {country: "Belgium", population: 11572813}, // ]; 复制代码
就到这里了,感谢你的阅读!