js中filter的高级用法

在 JavaScript 中，`filter()` 方法用于过滤数组中的元素，返回一个新的数组，新数组中的元素是符合指定条件的数组元素。

以下是 `filter()` 的基本用法:

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.filter((num) => {
  return num % 2 === 0;
});

console.log(filteredArr); // [2, 4]

上面的代码中，`filter()` 方法遍历了原数组 `arr` 中的元素，判断每个元素是否能被 2 整除，如果可以，则将其保存到新数组 `filteredArr` 中。

除了基本用法外，`filter()` 方法还有一些高级用法，下面让我们来一一介绍。

### 1. 使用箭头函数简化语法

当回调函数只有一行代码时，可以使用箭头函数简化语法。例如：

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.filter(num => num % 2 === 0);

console.log(filteredArr); // [2, 4]

### 2. 使用对象数组进行筛选

如果要对一个对象数组进行筛选，可以通过访问对象的属性来实现。例如：

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
];

const filteredPeople = people.filter(person => person.age > 30);

console.log(filteredPeople); // [{ name: 'Charlie', age: 35 }]

### 3. 使用正则表达式进行筛选

如果要对一个字符串数组进行筛选，可以使用正则表达式来实现。例如：

const arr = ['apple', 'banana', 'cherry', 'date'];

const filteredArr = arr.filter(str => /^a/.test(str));

console.log(filteredArr); // ['apple']

### 4. 使用第二个参数指定回调函数中的 `this` 值

`filter()` 方法的第二个参数可以指定回调函数中 `this` 的值。例如：

const obj = {
  minAge: 30,
  people: [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 },
  ],
  filterPeople: function() {
    return this.people.filter(function(person) {
      return person.age >= this.minAge;
    }, this);
  },
};

console.log(obj.filterPeople()); // [{ name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }]

在上面的例子中，我们使用了 `filter()` 的第二个参数来指定回调函数中的 `this` 值为 `obj` 对象本身。这样，在回调函数中就可以访问到 `obj` 对象的属性了。

### 5. 使用 `map()` 和 `filter()` 实现链式操作

由于 `filter()` 方法返回一个新数组，因此可以与 `map()` 方法结合使用，实现链式操作。例如：

const arr = [1, 2, 3, 4, 5];

const result = arr
  .filter(num => num % 2 === 0)
  .map(num => num * 2);

console.log(result); // [4, 8]

在上面的例子中，我们先使用 `filter()` 方法筛选出原数组中的偶数，然后再使用 `map()` 方法将每个偶数乘以 2，最终返回一个新数组 `[4, 8]`。

希望这些高级用法能够对你理解 `filter()` 方法有所帮助。