【转】[JavaScript] 数组的 filter 用法

转自：kimi.ai

filter 方法用于创建一个新数组，新数组中的元素是通过测试指定条件（由提供的函数实现）的所有元素。以下是其详细用法：

基本语法

JavaScript复制

array.filter(function(currentValue[, index[, array]]) {
    // return true to keep element, false to remove element
}[, thisArg])

• array：要操作的数组。
• function：为数组中的每个元素执行的函数。
  • currentValue：当前正在处理的元素。
  • index（可选）：当前正在处理的元素的索引。
  • array（可选）：调用 filter 方法的数组。
• thisArg（可选）：执行回调时使用的 this 值。

返回值

返回一个新数组，新数组的元素是通过测试指定条件的所有元素。如果没有任何元素通过测试，则返回一个空数组。

示例

1. 基本用法：过滤出数组中的偶数
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5, 6];
   let evenNumbers = numbers.filter(function(num) {
       return num % 2 === 0;
   });
   console.log(evenNumbers); // [2, 4, 6]

2. 使用箭头函数简化代码
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5, 6];
   let evenNumbers = numbers.filter(num => num % 2 === 0);
   console.log(evenNumbers); // [2, 4, 6]

3. 同时使用索引和数组参数
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5, 6];
   let filteredNumbers = numbers.filter((num, index, arr) => {
       return num > 3 && index % 2 === 0;
   });
   console.log(filteredNumbers); // [4, 6]

4. 处理对象数组
   JavaScript复制

   let users = [
       { id: 1, name: 'Alice', age: 25 },
       { id: 2, name: 'Bob', age: 30 },
       { id: 3, name: 'Charlie', age: 20 },
       { id: 4, name: 'David', age: 35 }
   ];
   let youngUsers = users.filter(user => user.age < 30);
   console.log(youngUsers); 
   // [{ id: 1, name: 'Alice', age: 25 }, { id: 3, name: 'Charlie', age: 20 }]

5. 使用 thisArg 参数
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5, 6];
   let min = 3;
   let filteredNumbers = numbers.filter(function(num) {
       return num > this.min;
   }, { min: min });
   console.log(filteredNumbers); // [4, 5, 6]

注意事项

• filter 方法不会修改原数组，而是返回一个新数组。
• filter 方法不会遍历数组中被删除或从未被赋值的元素。
• filter 方法的回调函数可以接受多个参数，但通常只需要使用 currentValue 参数。如果需要使用索引或数组本身，可以按需添加。
• filter 方法可以与箭头函数一起使用，使代码更加简洁。
• filter 方法可以用于处理复杂的数据结构，如对象数组，通过返回对象的特定属性来创建新数组。
• filter 方法的回调函数应该返回一个布尔值，表示当前元素是否应该包含在新数组中。如果返回 true，则当前元素会被包含在新数组中；如果返回 false，则当前元素会被排除在新数组之外。