Maison > Article > interface Web > Comment trouver tous les éléments correspondant à une condition spécifique en JavaScript ?

Comment trouver tous les éléments correspondant à une condition spécifique en JavaScript ?

王林avant: 2023-08-24 09:37:08741parcourir

JavaScript 中如何找出与特定条件匹配的所有元素？

Nous pouvons trouver les conditions spécifiques à l'aide de la fonction _.ware().

_.where() appartient à underscore.js, une bibliothèque javascript qui fournit une variété de fonctions. _.where() est une fonction utilisée pour trouver un élément spécifique en fonction d'une condition donnée.

Supposons que vous souhaitiez trouver tous les détails utilisateur de la classe, puis appliquez la fonction _.where() à la liste de toutes les sections et transmettez la condition comme nom de section. Ainsi, les noms de tous les utilisateurs correspondant aux critères spécifiques seront renvoyés.

Grammaire

_.where( list, [predicate], [context] )

Cette fonction accepte trois paramètres comme paramètres.

List - Paramètre utilisé pour enregistrer une liste de données.
Prédicat- Ce paramètre contient la condition de test.
Context - Le texte que nous devons afficher.

Valeur de retour− Cette fonction renvoie toutes les valeurs qui remplissent les conditions.

Exemple 1 : Passer un tableau à la fonction _.where()

La fonction

_.where() obtient les éléments du tableau un par un et correspond aux conditions spécifiées. Est-ce vrai ou faux pendant longtemps. S'il y a une correspondance, cette valeur est renvoyée.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var users = [
         { name: "priya", Long: "false" },
         { name: "aishwarya", Long: "true" },
         { name: "akanksha", Long: "true" },
         { name: "ruby", Long: "true" },
      ];
      document.write(JSON.stringify(_.where(users, { Long: "true" }))); 
   </script>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous transmettons une liste d'éléments avec plusieurs attributs à la fonction _.where() -

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var details = [
         { "city": "Ranchi", "state": "Jharkhand", "id": "1" },
         { "city": "Jamshedpur", "state": "Jharkhand", "id": "2" },
         { "city": "Hyderabad", "state": "Telangana", "id": "3" },
         { "city": "Delhi", "state": "Delhi", "id": "4" },
         { "city": "Delhi", "Pune": "Maharastra", "id": "5" }
      ];
      document.write(JSON.stringify(_.where(details,{state:"Jharkhand"})));
   </script>
</body>
</html>

Exemple : 3

Dans cet exemple, nous transmettons un tableau avec un nombre comme l'une de ses propriétés à la fonction _.where() -

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var users = [
         { id: 1, name: "priya" },
         { id: 2, name: "aishwarya" },
         { id: 3, name: "akanksha" },
         { id: 4, name: "ruby" },
         { id: 5, name: "Aman" },
      ];
      document.write(JSON.stringify(_.where(users, { id: 5 })));
   </script>
</body>
</html>

Exemple 4 : fonction _.where() comme fonction _.findWhere()

Nous pouvons utiliser la fonction _.findWhere() au lieu de la fonction _.where() car les deux donnent le même résultat.

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var users = [
         { id: 1, name: "priya" },
         { id: 2, name: "aishwarya" },
         { id: 3, name: "akanksha" },
         { id: 4, name: "ruby" },
         { id: 5, name: "Aman" },
      ];
      document.write(JSON.stringify(_.findWhere(users, { id: 5 })));
   </script>
</body>
</html>

Exemple 5 : Utilisation de la méthode _.filter()

Dans cet exemple, nous utiliserons la méthode _.filter() pour vérifier si les éléments du tableau remplissent les conditions.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>_.filter() method example</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
   <div id="filter"></div>
</head>
<body>
   <script>
      let arr = [2, 4, 6, 8, 10];
      let flag = false;
      let getEvenNum = _.filter(arr, function (num) {
         return num % 2 == 0;
      });
      if (JSON.stringify(getEvenNum) === JSON.stringify(arr)) {
         flag = true;
      }
      document.getElementById("filter").innerHTML ="The array elements passed the condition : " + flag;
   </script>
</body>
</html>

Exemple 6 : Utilisation de la méthode each()

Dans cet exemple, nous utiliserons la méthode array.every() pour vérifier si les éléments du tableau remplissent les conditions.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Array.every() method example</title>
   <div id="every"></div>
</head>
<body>
   <script>
      let arr = new Array(2, 4, 6, 8, 10);
      let getEvenNum = arr.every(function (num) {
         return num % 2 == 0;
      });
      document.getElementById("every").innerHTML ="The array elements have passed the condition : " + getEvenNum;
   </script>
</body>
</html>

Exemple 7 : Utiliser une boucle for

Voyons maintenant un exemple utilisant une boucle for -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Using for loop example</title>
   <div id="every"></div>
</head>
<body>
   <script>
      let arr = new Array(2, 4, 6, 8, 10);
      let flag = true;
      for (let i = 0; i < arr.length; i++) {
         if (arr[i] > 10) {
            flag = false;
            break;
         }
      }
      document.getElementById("every").innerHTML = "The array elements have passed the condition : " + flag;
   </script>
</body>
</html>

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!

JavaScript Array for Filter 循环 JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelle est la différence entre la file d'attente de microtâches et la file d'attente de rappel en JavaScript asynchrone ?Article suivant：Quelle est la différence entre la file d'attente de microtâches et la file d'attente de rappel en JavaScript asynchrone ?

Articles Liés

Voir plus