JS数组过滤filter详解

一、JS数组过滤方法

在js中，数组是一个非常重要的数据类型，它可以存储多个数据项，并且可以通过下标来访问每个数据项。在实际应用中，我们常常需要对数组进行筛选，只留下符合条件的数据项。这时候，就需要用到js中的数组过滤方法filter。

数组过滤方法filter的语法如下：

array.filter(callback[, thisArg]);

其中，array是要进行筛选的数组；callback是用于测试每个元素的函数，同时该函数还可以接收三个参数：当前元素、当前元素的索引、原数组。thisArg是可选参数，代表在执行callback函数时使用的this值。该方法将返回一个符合条件的新数组。

二、JS数组过滤对象

在js中，数组的每个元素可以是任意的数据类型，包括对象。如果我们要对一个包含多个对象的数组进行筛选，可以使用filter配合箭头函数进行操作。

例如，我们有一个包含多个人员信息的数组，我们要筛选出18岁以下的人员信息。代码如下：

const people = [
  {name: "Tom", age: 20},
  {name: "Jerry", age: 17},
  {name: "John", age: 15},
  {name: "Mary", age: 19}
];

const under18s = people.filter(person => person.age < 18);

console.log(under18s);
// Output: [{name: "Jerry", age: 17}, {name: "John", age: 15}]

三、数组过滤JS

在进行数组过滤时，我们不仅可以使用箭头函数，还可以使用普通函数来进行筛选。例如，我们有一个包含多个整数的数组，我们要筛选出大于等于10的整数。代码如下：

const nums = [8, 10, 5, 12, 3];

function filterNum(num) {
  return num >= 10;
}

const result = nums.filter(filterNum);

console.log(result);
// Output: [10, 12]

四、JS数组过滤返回新数组

在使用数组过滤方法filter时，原数组不会发生改变，而是返回一个符合条件的新数组。例如，我们有一个包含多个整数的数组，我们要筛选出大于等于10的整数，并将原数组输出。代码如下：

const nums = [8, 10, 5, 12, 3];

function filterNum(num) {
  return num >= 10;
}

const result = nums.filter(filterNum);

console.log(nums);
console.log(result);
// Output: [8, 10, 5, 12, 3]
// Output: [10, 12]

五、JS数组过滤取值

在使用数组过滤方法filter时，我们不仅可以进行数据筛选，还可以取出符合条件的数据项中的某个值。例如，我们有一个包含多个人员信息的数组，我们要取出18岁以下的人员的姓名。代码如下：

const people = [
  {name: "Tom", age: 20},
  {name: "Jerry", age: 17},
  {name: "John", age: 15},
  {name: "Mary", age: 19}
];

const under18sName = people
  .filter(person => person.age < 18)
  .map(person => person.name);

console.log(under18sName);
// Output: ["Jerry", "John"]

六、JS数组过滤重复

在使用数组过滤方法filter时，我们还可以去重。例如，我们有一个包含多个整数的数组，其中存在重复的元素，我们要去除重复的元素并输出。代码如下：

const nums = [1, 2, 3, 4, 3, 2, 1];

const uniqueNums = nums.filter((num, idx, arr) => arr.indexOf(num) === idx);

console.log(uniqueNums);
// Output: [1, 2, 3, 4]

上面的代码中，我们通过调用数组方法indexOf来判断当前元素是否第一次出现，如果是，就将其加入到新数组中。

七、JS数组过滤掉某一项

在使用数组过滤方法filter时，我们还可以将指定的元素从数组中剔除。例如，我们有一个包含多个人员信息的数组，我们要剔除姓名为Jerry的人员信息。代码如下：

const people = [
  {name: "Tom", age: 20},
  {name: "Jerry", age: 17},
  {name: "John", age: 15},
  {name: "Mary", age: 19}
];

const filteredPeople = people.filter(person => person.name !== "Jerry");

console.log(filteredPeople);
// Output: [{name: "Tom", age: 20}, {name: "John", age: 15}, {name: "Mary", age: 19}]

八、JS数组过滤空字符串

在进行数组过滤时，我们经常要处理空字符串的情况。例如，我们有一个包含多个字符串的数组，其中某些元素为空字符串，我们要将其过滤掉并输出。代码如下：

const strs = ["abc", "", "def", "", "ghi"];

const filteredStrs = strs.filter(str => str !== "");

console.log(filteredStrs);
// Output: ["abc", "def", "ghi"]

九、JS数组过滤空值

在进行数组过滤时，我们还要考虑null、undefined等空值的情况。例如，我们有一个包含多个元素的数组，其中某些元素为null或undefined，我们要将其过滤掉并输出。代码如下：

const arr = ["abc", null, "def", undefined, "ghi"];

const filteredArr = arr.filter(item => item);

console.log(filteredArr);
// Output: ["abc", "def", "ghi"]