持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
JavaScript 中的 filter 方法创建了一个数组的浅表副本，根据多个条件对其进行过滤。它接受一个回调函数。产生的数组filter通常是原始数组的简化版本。这是一个基本示例：
let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter((element) => {
return (element == '🔑' || element == '🔩'))
});
console.log(filteredArray); // [ '🔑', '🔩' ]
如您所见，如果该元素返回， filter 方法将允许一个元素位于新的过滤数组中true。它有效地循环遍历每个元素，并对其进行测试，看看应该留下什么。由于箭头函数在一行中隐式返回 true，因此您可能会看到此代码的简化版本，如下所示：
let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter(element => element == '🔑' || element == '🔩');
console.log(filteredArray); // [ '🔑', '🔩' ]
filter回调函数
如前所述，filter接受回调函数。回调函数由 3 个参数组成：
Array.filter((element, index, array) => {
// Filter the array
});
让我们看看它们各自的作用
element
这是当前正在检查的元素filter。filter遍历数组中的每个项目以测试它是否应该存在于新的过滤数组中。
index
这是我们正在使用的数组项的从零开始的索引。例如，如果我们正在查看数组中的第一个元素，这将是0.
array
这是整个数组，如果您想对原始数组做点什么。
在过滤器方法中改变数组
由于 filter 使用回调函数，因此可以改变我们正在检查的原始数组。例如，我们可以在每次过滤一个项目时将新项目推送到数组中：
let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter((element) => {
myArray.push('⚡️');
return true;
});
console.log(filteredArray); // [ '⚡️', '🔎', '🔑', '🔩' ]
您可能已经意识到，这将产生一个无限循环。幸运的是，就像在reduce中一样，JavaScript 不允许这种情况发生——相反，以这种方式添加到数组中的任何新元素都会被忽略。但是，现有元素的突变是完全可以的：
let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter((element, index) => {
myArray[index + 1] = '⚡️';
return (element == '⚡️');
});
console.log(filteredArray); // [ '⚡️', '⚡️', '⚡️', '⚡️' ]
过滤对象数组
过滤对象数组遵循与数组相同的约定。.我们可以使用符号过滤数组中对象的子属性。例如，如果我想通过 过滤以下数组age，其中年龄应该>18，我会做这样的事情：
let myArray = [ { age: 4 }, { age: 12 }, { age: 19 }, { age: 21 } ];
let filteredArray = myArray.filter((element, index) => {
return (element.age > 18);
});
console.log(filteredArray); // [ { age: 19 }, { age: 21 } ]
按搜索条件过滤数组
for 的常见用途filter是获取一组值，并根据搜索词搜索它们。这可以通过includes或来完成。例如：
let myArray = [ '小明的汽车', '小明的房子', '汽车', '房子', '公司' ]
let filteredArray = myArray.filter((element, index) => {
return element.includes('小明')
});
console.log(filteredArray); // ['小明的汽车', '小明的房子']
过滤器制作数组的浅拷贝
尽管看起来会filter生成原始数组的新副本，但事实并非如此。事实上，对原始数组filter进行浅拷贝，这意味着如果我们改变数组中的对象，原始数组也会改变。为了理解这一点，让我们再次看一下我们的年龄示例：
let myArray = [ { age: 4 }, { age: 12 }, { age: 19 }, { age: 21 } ];
let filteredArray = myArray.filter((element, index) => {
return (element.age > 18);
});
console.log(filteredArray); // [ { age: 19 }, { age: 21 } ]
filteredArray[0].age = 50;
filteredArray[1] = { age: 40 };
console.log(filteredArray); // [ { age: 50 }, { age: 40 } ]
console.log(myArray); // [ { age: 4 }, { age: 12 }, { age: 50 }, { age: 21 } ]
如您所见，使用filteredArray[0].age符号修改过滤后的数组也会修改原始数组 - 但请稍等！filteredArray[1] = { age: 40 }仅更改过滤后的数组。这是因为尽管 Javascript 将该.表示法解释为更新两个数组，但它将方括号表示法解释[]为在过滤后的数组的第二个位置设置一个新值。
这只是 Javascript 的另一个怪癖，可能会令人困惑，但了解它非常有用！
结论
过滤器方法被广泛使用，并且是一种根据特定标准更改创建新数组子集的简单方法。需要注意的是，原来的数组只是做了一个浅拷贝，所以以某种方式修改数组会影响到原来的。
