Maison > Article > interface Web > Comment utiliser à la fois la carte et le filtre sur un tableau à l'aide de JavaScript ?

Comment utiliser à la fois la carte et le filtre sur un tableau à l'aide de JavaScript ?

PHPzavant: 2023-08-28 20:29:05826parcourir

La méthode

如何使用 JavaScript 在数组上同时使用映射和过滤器？

filter() est utilisée pour filtrer les valeurs du tableau et la méthode map() est utilisée pour mapper les nouvelles valeurs à un autre tableau en fonction de chaque valeur de l'ancien tableau.

Parfois, nous devons utiliser les méthodes filter() et map() en même temps. Par exemple, nous voulons filtrer tous les nombres positifs d'un tableau et mapper leurs valeurs logarithmiques sur un nouveau tableau

Avant de commencer ce tutoriel, jetons un coup d'œil à l'introduction des méthodes filter() et map(). Dans ce didacticiel, nous apprendrons à utiliser les méthodes de mappage et de filtrage sur les tableaux à l'aide de JavaScript.

Syntaxe de la méthode array.filter()

Les utilisateurs peuvent utiliser la méthode JavaScript filter() selon la syntaxe suivante.

array.filter((element, index, self) => {
   // write a condition to filter values.
   
   // based on the filtering condition, return a boolean value to include in the filtered array.
})

Dans la syntaxe ci-dessus, nous passons la fonction de rappel comme paramètre de la méthode filter().

Syntaxe de la méthode array.map()

Les utilisateurs peuvent utiliser la méthode JavaScript map() selon la syntaxe suivante.

array.map((element, index, self) => {
   // perform some action on the element of the array
   
   // return element for a new array
})

Dans la syntaxe ci-dessus, nous devons renvoyer les éléments du tableau à partir de la fonction de rappel de la méthode map().

Paramètres

element – Lors d'une itération sur un tableau à l'aide de la méthode filter(), il s'agit de l'élément actuel du tableau.
index – C'est l'index de l'élément dans le tableau.
self – C'est un tableau en soi.

Utilisez les méthodes array.map() et array.filter()

Cette section nous apprendra à utiliser les méthodes filter() et map() ensemble sur un seul tableau.

Grammaire

Les utilisateurs peuvent utiliser les méthodes map() et filter() ensemble selon la syntaxe suivante.

let logarithmic_values = array.filter((element, index, self) => {
   
   // filtering condition
})
.map((element, index, self) => {
   // return value from map method
})

Dans la syntaxe ci-dessus, nous avons d'abord utilisé la méthode filter() sur le tableau, puis la méthode map().

Exemple 1

Dans l'exemple ci-dessous, le tableau contient des nombres positifs et négatifs. Nous prenons le tableau comme référence et appelons la méthode filter() sur le tableau pour filtrer toutes les valeurs positives du tableau. Dans la fonction de rappel de la méthode filter(), on renvoie true si le nombre est supérieur à zéro sinon une erreur ;

Après cela, nous utilisons la méthode map() et renvoyons le logarithme de chaque élément filtré. L'utilisateur peut voir que le tableau logarithmic_values contient seulement six valeurs car nous avons supprimé toutes les valeurs négatives du tableau filtré.

<html>
<body>
   <h3>Using the <i> array.map() and array.filter() </i> methods together in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array = [10, 20, -2, -4, 32, -6, -7, -8, 10, 11, -20]
      let logarithmic_values = array.filter((element, index, self) => {
         if (element > 0) {
            return true;
         }
         return false;
      })
      .map((element, index, self) => {
         return Math.log(element);
      })
      output.innerHTML += "The original array values are " + array + "<br/>";
      output.innerHTML += "The logarithmic_values are " + logarithmic_values + "<br/>";
   </script>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous créons un tableau d'objets, chaque objet du tableau contient l'ID de l'employé, les années de service et le salaire.

Après cela, nous utilisons la méthode filter() pour filtrer tous les employés ayant plus de 3 ans d'expérience. Ensuite, nous utilisons la méthode map() pour augmenter les salaires de tous les employés de 50 % et stockons les nouveaux salaires dans le tableau new_salaries.

Dans la sortie, les utilisateurs peuvent initialement observer le salaire total après l'augmentation.

<html>
<body>
   <h2>Using the <i> array.map() and array.filter() </i> methods together in JavaScript </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      
      // Creating the array of objects
      let array = [{ emp_id: "01", experience: 3, salary: 50000 },
      { emp_id: "02", experience: 7, salary: 30000 },
      { emp_id: "03", experience: 6, salary: 20000 },
      { emp_id: "04", experience: 5, salary: 10000 },
      { emp_id: "05", experience: 3, salary: 5000 },
      { emp_id: "06", experience: 2, salary: 40000 },
      { emp_id: "07", experience: 1.5, salary: 60000 },
      { emp_id: "08", experience: 2, salary: 70000 }]
      
      // use the forEach() loop method to find the total initial salary
      let total_initial_salary = 0;
      array.forEach((employee) => {
         total_initial_salary += employee.salary;
      })
      
      // filter all employees with experience greater than 3 years.
      let new_salaries = array.filter((element) => {
         if (element.experience > 3) {
            return true;
         }
         return false;
      })
      .map((element) => {
         
         // increase the salary of all employees by 50%, who have experienced greater than 3 years
         return element.salary * 0.5;
      })
      
      // find the sum of new salaries
      let new_salary = total_initial_salary;
      let total_increased_salary = new_salaries.forEach((salary) => {
         new_salary += salary
      })
      output.innerHTML += "The initial total salaries of all employees is " + total_initial_salary + "<br/>";
      output.innerHTML += "The total salaries of all employees after increasing salaries for some employees is " + new_salary + "<br/>";
   </script>
</body>
</html>

Les utilisateurs ont appris à utiliser les méthodes filter() et map() ensemble à travers divers exemples. Dans le premier exemple, nous utilisons les méthodes filter() et map() avec un tableau de nombres. Dans le deuxième exemple, nous avons également appris à utiliser les méthodes filter() et map() avec un tableau d’objets.

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 Filter 回调函数 map 对象

Déclaration：

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

Article précédent：Créez un menu de hamburgers WordPress adapté aux mobilesArticle suivant：Créez un menu de hamburgers WordPress adapté aux mobiles

Articles Liés

Voir plus