Array的Filter方法详解

发布时间：2023-05-17

一、数组的filter方法怎么用

首先来了解一下filter方法的基本使用方法。简单说，filter方法是用来筛选数组中满足条件的元素并返回一个新的数组。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(num) {
  return num > 3;
});
console.log(newArr); // [4, 5]

在上面的例子中，我们先声明了一个数组arr，然后使用filter方法筛选出大于3的元素并返回一个新的数组newArr。通过console.log方法输出newArr可以看到，不满足条件的元素被过滤掉了，只保留了大于3的两个元素。

二、数组filter方法的返回undefine

如果没有指定回调函数或者回调函数返回值为undefined，那么filter方法将无法完成任何筛选操作，返回的就是原数组本身。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter();
console.log(newArr); // [1, 2, 3, 4, 5]

在上面的例子中，我们没有传递任何参数给filter方法，此时filter方法将无法完成筛选操作，直接返回原数组。上面的代码输出的是[1, 2, 3, 4, 5]。

三、数组的filter方法返回值

filter方法返回的是符合条件的元素组成的新数组，该数组的长度可以为0。新数组的元素顺序与原数组相同。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(num) {
  return num % 2 === 0;
});
console.log(newArr); // [2, 4]

在上面的例子中，我们使用filter方法筛选出原数组中的偶数元素并返回新数组newArr。console.log方法输出的是[2, 4]。

四、数组的filter方法返回什么

当没有满足条件的元素或者筛选条件是空数组时，filter方法返回一个空数组。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function(num) {
  return num > 5;
});
console.log(newArr); // []

在上面的例子中，我们试图筛选出大于5的元素，但是由于原数组中没有大于5的元素，所以filter方法返回一个空数组。console.log方法输出的是[]。

五、数组的方法filter

除了filter方法，数组还提供了其他一些类似的方法。比如：map、every、some等。这些方法都很类似，只是根据不同的返回值类型执行不同的操作。

var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function(num) {
  return num * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

在上面的例子中，我们使用map方法将数组中的每个元素都乘以2并返回新数组newArr。console.log方法输出的是[2, 4, 6, 8, 10]。

六、数组filter方法去重

filter方法也可以用来去重，只需在回调函数中判断该元素是否已经在新数组中出现过即可。

var arr = [1, 2, 2, 3, 3, 4, 5, 5];
var newArr = arr.filter(function(num, index, arr) {
  return arr.indexOf(num) === index;
});
console.log(newArr); // [1, 2, 3, 4, 5]

在上面的例子中，我们使用filter方法去除重复元素，并将结果保存到新数组newArr中。console.log方法输出的是[1, 2, 3, 4, 5]。

七、数组filter函数的用法

filter函数可以接收两个参数：回调函数和this值。回调函数用来筛选元素，this值用来指定回调函数中的this。 例如，我们可以使用bind方法来改变回调函数中的this指向：

var arr = [1, 2, 3, 4, 5];
var newObj = {
  num: 3
};
var newArr = arr.filter(function(num) {
  return num > this.num;
}.bind(newObj));
console.log(newArr); // [4, 5]

在上面的例子中，我们使用bind方法将回调函数中的this指向newObj对象。filter方法筛选出大于3的元素，并将结果保存到新数组newArr中。console.log方法输出的是[4, 5]。

八、用filter方法过滤数组

利用filter方法，我们可以过滤数组中的复杂数据。

var students = [
  {name: '小明', age: 18, gender: '男'},
  {name: '小红', age: 17, gender: '女'},
  {name: '小王', age: 16, gender: '男'},
  {name: '小李', age: 19, gender: '女'}
];
var boys = students.filter(function(student) {
  return student.gender === '男';
});
console.log(boys); 
/* 
[ 
  { name: '小明', age: 18, gender: '男' },
  { name: '小王', age: 16, gender: '男' }
] 
*/

在上面的例子中，我们使用filter方法筛选出男性学生，并将结果保存到新数组boys中。console.log方法输出的是符合条件的两个学生对象。

九、js数组filter

我们不仅可以使用filter方法来操作普通数组，也可以使用它来操作TypedArray和数组对象下的方法。

var nums = new Int16Array([1, 2, 3, 4, 5]);
var newArr = Array.prototype.filter.call(nums, function(num) {
  return num > 3;
});
console.log(newArr); // [4, 5]

在上面的例子中，我们使用filter方法来操作Int16Array类型的数组。注意，由于该类型的数组没有filter方法，我们需要使用Array.prototype.filter.call方法来执行filter方法。

结语

本文详细介绍了数组的filter方法，从基本使用方法、返回值类型、其他类似方法的使用、去重方法和在操作复杂数据时的应用等多个方面进行了阐述。希望本文能够为读者提供一些帮助。

推荐文章