javascript filter()方法

Posted on by

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方法回调函数#

如前所述，接受回调函数。回调函数由 3 个参数组成：filter

Array.filter((element, index, array) => {
    // Filter the array
});

让我们来看看它们中的每一个都是做什么的

元素

这是 正在检查的当前元素。 遍历数组中的每个项，以测试它是否应存在于新的、经过筛选的数组中。filterfilter

索引

这是我们正在使用的数组项的从零开始的索引。例如，如果我们查看数组中的第一个元素，这将是 。0

数组

这是整个数组，如果您希望对原始数组执行某些操作。

在filter方法中改变数组#

由于 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); // [ '⚡️', '⚡️', '⚡️', '⚡️' ]

filter对象数组#

筛选对象数组遵循与数组相同的约定。我们可以使用符号来过滤数组中对象的子属性。例如，如果我想按 过滤以下数组，其中 age 应为 >18，我会执行如下操作：.age

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 } ]

按搜索条件filter数组#

一个常见用途是获取一个值数组，并根据搜索词搜索它们。这可以通过 、 或 来完成。例如：filterincludesregex

let myArray = [ 'cat', 'catdog', 'dog', 'fish', 'fishcat' ]
let filteredArray = myArray.filter((element, index) => {
    return element.match(/cat/)
});
console.log(filteredArray); // ['cat', 'catdog', 'fishcat']

filter制作数组的浅层副本#

尽管看起来可能会生成原始数组的新副本，但事实并非如此。实际上，制作原始数组的浅副本，这意味着如果我们在数组中改变对象，原始数组也会更改。为了理解这一点，让我们再看一遍我们的年龄示例：filterfilter

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 } ]

如您所见，使用符号修改过滤后的数组也会修改原始数组 – 但请稍候！ 仅更改已过滤的数组。这是因为尽管 Javascript 将表示法解释为更新两个数组，但它将方括号表示法解释为在筛选数组的第二个位置设置新值。filteredArray[0].agefilteredArray[1] = { age: 40 }.[]

这只是Javascript的另一个怪癖，可能会令人困惑，但知道起来非常有用！

结论#

filter方法被广泛使用，它是一种简单的更改方法，可根据某些条件创建新的数组子集。应该注意的是，原始数组只有浅层副本，因此以某种方式修改数组会影响原始数组。

推荐阅读：