Maison > interface Web > Questions et réponses frontales > implémentation du filtre javascript

implémentation du filtre javascript

PHPz
Libérer: 2023-05-16 11:53:07
original
642 Les gens l'ont consulté

Il existe de nombreuses fonctions intégrées en Javascript, filter() en fait partie. Sa fonction est de filtrer les éléments qui répondent aux critères d'un tableau et de renvoyer un nouveau tableau. La syntaxe de

filter() est la suivante :

array.filter(function(currentValue, index, arr), thisValue)
Copier après la connexion

Description du paramètre :

  • currentValue : l'élément actuel en cours de traitement dans le tableau
  • index : l'indice de l'élément actuel dans le tableau
  • arr : le tableau en cours de traitement
  • thisValue (facultatif) : utilisez cette valeur comme ceci lorsque l'objet est exécuté en tant que fonction (c'est-à-dire le contexte d'exécution de la fonction)

La méthodefilter() accepte une fonction comme paramètre, qui accepte trois paramètres : l'élément actuel , l'index de l'élément actuel et du tableau entier. La fonction doit renvoyer une valeur booléenne indiquant si l'élément actuel remplit les conditions. Si true est renvoyé, l'élément sera conservé dans le nouveau tableau, sinon il sera filtré.

Regardons un exemple, en supposant qu'il existe un tableau stockant des entiers de 1 à 10.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Copier après la connexion

Maintenant, nous voulons filtrer tous les éléments supérieurs ou égaux à 5. Ceci peut être réalisé grâce à la méthode filter() :

const result = numbers.filter(function(number) {
  return number >= 5;
});

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]
Copier après la connexion

Dans le code ci-dessus, la fonction filter() reçoit une fonction dont la valeur de retour est vraie ou fausse. Dans cette fonction, true est renvoyé si l'élément actuel est supérieur ou égal à 5. Sinon, si l'élément actuel est inférieur à 5, false est renvoyé. Enfin, les éléments répondant aux critères, c'est-à-dire supérieurs ou égaux à 5, sont conservés et renvoyés sous la forme d'un nouveau tableau.

En plus de définir une fonction, vous pouvez également utiliser le raccourci de la fonction flèche :

const result = numbers.filter(number => number >= 5);

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]
Copier après la connexion

La méthode filter() peut également être utilisée sur des objets dans des tableaux. Supposons que vous disposiez d’un tableau qui stocke des informations sur plusieurs personnes.

const people = [
  { name: 'Lucas', age: 25 },
  { name: 'Emma', age: 21 },
  { name: 'Tom', age: 30 },
  { name: 'Jane', age: 18 },
];
Copier après la connexion

Nous souhaitons désormais filtrer les personnes âgées de 25 ans ou plus. Ceci peut être réalisé grâce à la méthode filter() :

const result = people.filter(function(person) {
  return person.age >= 25;
});

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]
Copier après la connexion

De même, nous pouvons également utiliser l'abréviation de la fonction flèche :

const result = people.filter(person => person.age >= 25);

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]
Copier après la connexion

Dans le développement réel, la méthode filter() est souvent utilisée pour filtrer les données qui répondent à des conditions, telles que la recherche. , filtrage, classification, etc. dans la scène. Il est simple et facile à utiliser, et peut filtrer rapidement les éléments du tableau. On peut dire que c'est l'une des méthodes indispensables au développement.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal