Comment utiliser le filtre es6()

Dans es6, filter() est une méthode de filtrage de tableau. Elle appellera une fonction de rappel pour filtrer les éléments du tableau et renvoyer tous les éléments qui remplissent les conditions. La syntaxe "Array.filter(callback(element[, index[. , tableau] ])(, thisArg])". La méthode filter() crée un nouveau tableau et les éléments du nouveau tableau sont vérifiés pour tous les éléments du tableau spécifié qui remplissent les conditions.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

La méthode de filtrage de tableau est l'une des méthodes les plus utilisées en JavaScript.

Cela nous permet de filtrer rapidement les éléments d'un tableau avec des conditions spécifiques.

Donc, dans cet article, vous saurez tout sur la méthode de filtrage et ses différents cas d'utilisation.

Alors commençons.

---

Regardez le code ci-dessous sans utiliser la méthode de filtrage :

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];
 
const filtered = [];
 
for(let i = 0; i  -1) {
   filtered.push(employees[i]);
 }
}
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Dans le code ci-dessus, nous recherchons des caractères avec John et nous utilisons le indexOf nom de méthode de tous les employés. John我们正在使用indexOf方法的名称的所有员工。

for 循环代码看起来很复杂，因为我们需要手动循环employees数组并将匹配的员工推送到filtered数组中。

但是使用数组过滤方法，我们可以简化上面的代码。

数组过滤方法filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

数组过滤方法的语法如下：

Array.filter(callback(element[, index[, array]])[, thisArg])

filter 方法不会更改原始数组，但会返回一个新数组，其中包含满足提供的测试条件的所有元素。

filter 方法将回调函数作为第一个参数，并为数组的每个元素执行回调函数。

在回调函数的每次迭代中，每个数组元素值都作为第一个参数传递给回调函数。

使用过滤器方法查看以下代码：

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];
 
const filtered = employees.filter(function (employee) {
  return employee.name.indexOf('John') > -1;
});
 
console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

在这里，使用数组过滤方法，我们不需要手动循环遍历employees数组，也不需要filtered事先创建数组来过滤掉匹配的员工。

了解过滤方法filter()

filter 方法接受一个回调函数，数组的每个元素在循环的每次迭代中都作为第一个参数自动传递。

假设我们有以下数字数组：

const numbers = [10, 40, 30, 25, 50, 70];

而我们想要找出所有大于30的元素，那么我们可以使用如下所示的过滤方法：

const numbers = [10, 40, 30, 25, 50, 70];

const filtered = numbers.filter(function(number) {
  return number > 30;
});

console.log(filtered); // [40, 50, 70]

所以在回调函数内部，在循环的第一次迭代中，数组中的第一个元素值 10 将作为number参数值传递，并且 10 > 30 为 false，因此数字 10 不会被视为匹配项。

数组过滤方法返回一个数组，因此 10 不大于 30，它不会被添加到filtered数组列表中。

然后在循环的下一次迭代中，数组中的下一个元素 40 将作为number参数值传递给回调函数，当 40 > 30 为真时，将被视为匹配并添加到filtered大批。

这将一直持续到数组中的所有元素都没有完成循环。

因此，只要回调函数返回一个false值，该元素就不会被添加到过滤后的数组中。filter 方法返回一个数组，该数组仅包含回调函数为其返回true值的那些元素。

您可以看到在循环的每次迭代中传递给回调函数的元素的当前值如果将值记录到控制台：

const numbers = [10, 40, 30, 25, 50, 70];
 
const filtered = numbers.filter(function(number) {
  console.log(number, number > 30);
  return number > 30;
});
 
console.log(filtered); // [40, 50, 70]
 
/* output
10 false
40 true
30 false
25 false
50 true
70 true
[40, 50, 70]
*/

现在，看看下面的代码：

const checkedState = [true, false, false, true, true];
 
const onlyTrueValues = checkedState.filter(function(value) {
  return value === true;
});
 
console.log(onlyTrueValues); // [true, true, true]

在上面的代码中，我们只找出那些值为true

Le code de la boucle for semble compliqué car nous devons parcourir manuellement le tableau employees et pousser les employés correspondants dans le tableau filtered. 🎜🎜Mais en utilisant la méthode de filtrage de tableau, nous pouvons simplifier le code ci-dessus. 🎜

Méthode de filtre de tableau filter()

🎜La méthode filter() crée un nouveau tableau et les éléments du nouveau tableau sont vérifiés pour tous les éléments du tableau spécifié qui répondent aux conditions. 🎜🎜La syntaxe de la méthode de filtrage de tableau est la suivante : 🎜

const onlyTrueValues = checkedState.filter(value => {
  return value === true;
});

🎜La méthode de filtrage ne modifie pas le tableau d'origine, mais renvoie un nouveau tableau contenant tous les éléments qui satisfont à la condition de test fournie. La méthode 🎜🎜filter prend une fonction de rappel comme premier paramètre et exécute la fonction de rappel pour chaque élément du tableau. 🎜🎜À chaque itération de la fonction de rappel, chaque valeur d'élément du tableau est transmise à la fonction de rappel comme premier paramètre. 🎜🎜Voir le code suivant en utilisant la méthode de filtrage : 🎜

const onlyTrueValues = checkedState.filter(value => value === true);

🎜🎜🎜Ici, en utilisant la méthode de filtrage de tableau, nous n'avons pas besoin de parcourir manuellement le tableau employés, ni de filtré créez un tableau à l'avance pour filtrer Supprimer les employés correspondants. 🎜

Comprendre la méthode de filtrage filter()

🎜La méthode de filtrage accepte une fonction de rappel, et chaque élément du tableau est appelé pendant chaque itération de la boucle est automatiquement passée comme premier paramètre. 🎜🎜Supposons que nous ayons le tableau de nombres suivant : 🎜

const onlyTrueValues = checkedState.filter(Boolean);

🎜 Et que nous voulons trouver tous les éléments supérieurs à 30, nous pouvons alors utiliser la méthode de filtrage comme indiqué ci-dessous : 🎜

const checkedState = [true, false, false, true, true];

checkedState.filter(function(value, index, array) {
  console.log(value, index, array);
  return value === true;
});

/* output

true   0  [true, false, false, true, true]
false  1  [true, false, false, true, true]
false  2  [true, false, false, true, true]
true   3  [true, false, false, true, true]
true   4  [true, false, false, true, true]

*/

🎜🎜🎜Donc, à l'intérieur de la fonction de rappel, dans la première itération de la boucle, Le premier élément du tableau, la valeur 10, sera transmis comme valeur du paramètre number, et 10 > 30 est faux, donc le nombre 10 ne sera pas considéré comme une correspondance. 🎜🎜La méthode de filtrage de tableau renvoie un tableau, donc 10 n'est pas supérieur à 30, il ne sera pas ajouté à la liste des tableaux filtrés. 🎜🎜Ensuite, lors de la prochaine itération de la boucle, l'élément suivant du tableau, 40, sera transmis à la fonction de rappel en tant que valeur du paramètre number, et lorsque 40 > sera considéré comme une correspondance et ajouté au lot filtré. 🎜🎜Cela continuera jusqu'à ce que tous les éléments du tableau n'aient pas terminé la boucle. 🎜🎜🎜Donc, tant que la fonction de rappel renvoie une valeur false, l'élément ne sera pas ajouté au tableau filtré. La méthode filter renvoie un tableau contenant uniquement les éléments pour lesquels la fonction de rappel renvoie une valeur true. 🎜🎜🎜Vous pouvez voir la valeur actuelle de l'élément passé à la fonction de rappel à chaque itération de la boucle si vous enregistrez la valeur dans la console : 🎜

const users = [
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'John', age: 28},
  {name: 'Tim', age: 48}
];

const userToRemove = 'John';

const updatedUsers = users.filter(user => user.name !== userToRemove);

console.log(updatedUsers);

/* output

[
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'Tim', age: 48}
]

*/

🎜🎜🎜Maintenant, regardez le code suivant : 🎜

const numbers = [10, 20, 10, 30, 10, 30, 50, 70];

const unique = numbers.filter((value, index, array) => {
  return array.indexOf(value) === index;
})

console.log(unique); // [10, 20, 30, 50, 70]

const duplicates = numbers.filter((value, index, array) => {
  return array.indexOf(value) !== index;
})

console.log(duplicates); // [10, 10, 30]

🎜🎜🎜Dans le code ci-dessus, nous ne trouvons que ceux La valeur est true.🎜

回调函数可以如上所示编写，也可以使用箭头函数如下所示：

const onlyTrueValues = checkedState.filter(value => {
  return value === true;
});

而如果箭头函数中只有一条语句，我们可以跳过return关键字，隐式返回值，如下：

const onlyTrueValues = checkedState.filter(value => value === true);

上面的代码可以进一步简化为：

const onlyTrueValues = checkedState.filter(Boolean);

要了解它是如何工作的，请查看我的这篇文章。

回调函数参数

除了数组的实际元素外，传递给 filter 方法的回调函数还接收以下参数：

• 我们正在循环的index数组中当前元素的
• array我们循环播放的原版

看看下面的代码：

const checkedState = [true, false, false, true, true];

checkedState.filter(function(value, index, array) {
  console.log(value, index, array);
  return value === true;
});

/* output

true   0  [true, false, false, true, true]
false  1  [true, false, false, true, true]
false  2  [true, false, false, true, true]
true   3  [true, false, false, true, true]
true   4  [true, false, false, true, true]

*/

过滤方法的用例

正如您在上面看到的，数组过滤器方法对于过滤掉数组中的数据很有用。

但是过滤器方法在一些实际用例中也很有用，例如从数组中删除重复项，分离两个数组之间的公共元素等。

从数组中删除元素

filter 方法最常见的用例是从数组中删除特定元素。

const users = [
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'John', age: 28},
  {name: 'Tim', age: 48}
];

const userToRemove = 'John';

const updatedUsers = users.filter(user => user.name !== userToRemove);

console.log(updatedUsers);

/* output

[
  {name: 'David', age: 35},
  {name: 'Mike', age: 30},
  {name: 'Tim', age: 48}
]

*/

在这里，我们从users名称为 的数组中删除用户John。

userToRemove因此，在回调函数中，我们正在检查保留名称与存储在变量中的名称不匹配的用户的条件。

从数组中查找唯一或重复项

const numbers = [10, 20, 10, 30, 10, 30, 50, 70];

const unique = numbers.filter((value, index, array) => {
  return array.indexOf(value) === index;
})

console.log(unique); // [10, 20, 30, 50, 70]

const duplicates = numbers.filter((value, index, array) => {
  return array.indexOf(value) !== index;
})

console.log(duplicates); // [10, 10, 30]

该indexOf方法返回第一个匹配元素的索引，因此，在上面的代码中，我们正在检查我们正在循环的元素的当前索引是否与第一个匹配元素的索引匹配，以找出唯一和重复元素.

查找两个数组之间的不同值

const products1 = ["books","shoes","t-shirt","mobile","jackets"];

const products2 = ["t-shirt", "mobile"];

const filteredProducts = products1.filter(product => products2.indexOf(product) === -1);

console.log(filteredProducts); // ["books", "shoes", "jackets"]

在这里，我们products1使用 filter 方法循环，在回调函数中，我们正在检查products2数组是否包含我们使用 arrayindexOf方法循环的当前元素。

如果该元素不匹配，则条件为真，该元素将被添加到filteredProducts数组中。

您还可以使用数组includes方法来实现相同的功能：

const products1 = ["books","shoes","t-shirt","mobile","jackets"];

const products2 = ["t-shirt", "mobile"];

const filteredProducts = products1.filter(product => !products2.includes(product));

console.log(filteredProducts); // ["books", "shoes", "jackets"]

浏览器对过滤方法的支持

• 所有现代浏览器和 Internet Explorer (IE) 版本 9 及更高版本
• Microsoft Edge 版本 12 及更高版本

【相关推荐：web前端开发】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!