filter() 方法介绍

一、定义：

filter 方法是 JavaScript 中用于数组处理的高阶函数之一，它用于创建一个新数组，包含所有通过提供的回调函数测试的元素。它不会修改原数组，而是返回一个新数组。通俗理解就是（filter 方法就是用来筛选数组里的元素的。它会遍历数组中的每个元素，然后让你自己写一个判断条件，符合条件的元素就留下，不符合的就被过滤掉，最后返回一个新的数组。原数组不会被修改。）

二、代码

let arr=[1,2,3,4,5,6,7,8,9,10]
 
letnewArr=arr.filter((number)=>{
return number%2===0
})
console.log(newArr)
[2, 4, 6, 8, 10]

三、注意事项

1、filter 不能提前终止不像 for 循环或 forEach 里可以用 break 提前终止，filter 会遍历整个数组如果希望找到第一个符合条件的元素，可以用 find 代替 filter：

2、return 返回 箭头函数可以简写

3、返回必须布尔值

4、不会修改原来数组，产生一个新数组

四、实现原理

filter 遍历数组的每个元素，并执行一个回调函数（callback）。

• 如果 callback 返回 true，该元素会被添加到新数组中。

• 如果 callback 返回 false，该元素会被跳过。

• 最终返回一个新数组，不修改原数组。

1、初始化

• filter 创建一个空数组 newArr，用于存储符合条件的元素。

2、 遍历数组

• filter 从 arr 的第一个元素 1 开始，调用回调函数：
  • 1 % 2 === 0 → false，跳过。
  • 2 % 2 === 0 → true，添加 2 到 newArr。
  • 3 % 2 === 0 → false，跳过。
  • 4 % 2 === 0 → true，添加 4 到 newArr。
  • 5 % 2 === 0 → false，跳过。
  • 6 % 2 === 0 → true，添加 6 到 newArr。

3、 返回新数组

最终返回 [2, 4, 6]，原数组 arr 不变。

五、常用法（数组去重面试经常考）

1、过滤假值

let arr = [0, 1, false, 2, "", 3, null, undefined, NaN];

// 过滤掉假值（Boolean() 只返回 true/false）
let filteredArr = arr.filter(Boolean);
console.log(filteredArr); // [1, 2, 3]

2、过滤筛选符合条件

let people = [
  { name: "小明", age: 15 },
  { name: "小红", age: 18 },
  { name: "老王", age: 25 }
];

// 筛选出成年人
let adults = people.filter(person => person.age >= 18);
console.log(adults);
/*
[
  { name: "小红", age: 18 },
  { name: "老王", age: 25 }
]
*/

3、数组去重

let arr=[1,2,2,3,3,4,5,3,6,7,7]
 
let newarr=arr.filter((number,index,arr1)=>{
return arr1.indexOf(number)===index

})
console.log(newarr)
[1, 2, 3, 4, 5, 6, 7]


//简写
let uniqueNumbers = numbers.filter((num, index, arr) => arr.indexOf(num) === index);

1. 第一个元素 1：

• arr.indexOf(1) 会返回 0，即 1 第一次出现的位置。
• 当前元素的 index 也是 0（因为它是第一个元素）。
• arr.indexOf(1) === index，即 0 === 0，说明 1 是第一次出现，保留它。

2. 第二个元素 2：

• arr.indexOf(2) 会返回 1，即 2 第一次出现的位置。
• 当前元素的 index 是 1（因为它是第二个元素）。
• arr.indexOf(2) === index，即 1 === 1，说明 2 是第一次出现，保留它。

3. 第三个元素 2（重复的）：

• arr.indexOf(2) 依然会返回 1，即 2 第一次出现的位置。
• 当前元素的 index 是 2（因为它是第三个元素）。
• arr.indexOf(2) !== index，即 1 !== 2，说明 2 之前已经出现过，这个 2 是重复的，跳过它。

4. 第四个元素 3：

• arr.indexOf(3) 会返回 3，即 3 第一次出现的位置。
• 当前元素的 index 是 3（因为它是第四个元素）。
• arr.indexOf(3) === index，即 3 === 3，说明 3 是第一次出现，保留它。

5. 后续元素同理：

• 依次类推，4、5、6 都会被保留，因为它们是第一次出现。
• 重复的 4 和 6 会被跳过。