Maison > Article > interface Web > Comment utiliser map() sur un tableau dans l’ordre inverse en utilisant JavaScript ?

Comment utiliser map() sur un tableau dans l’ordre inverse en utilisant JavaScript ?

PHPzavant: 2023-08-30 08:33:15486parcourir

如何使用 JavaScript 以相反的顺序在数组上使用 map() ？

Nous avons reçu un tableau d'éléments et devons utiliser map() sur le tableau dans l'ordre inverse via JavaScript.

La méthode

map() mappe les nouveaux éléments liés à un élément de tableau spécifique dans le tableau résultat. Parfois, nous devons mapper les éléments dans l’ordre inverse. Il existe plusieurs façons d'utiliser map() sur un tableau dans l'ordre inverse. Nous examinerons toutes les méthodes une par une.

introduction à la méthode map()

Grammaire

Utilisez la méthode map() selon la syntaxe ci-dessous.

array.map((ele, ind, array) => {
   return ele + 20;
})

Paramètres

ele – C'est un élément de tableau.
ind – L'index de l'élément actuel.
array – Il s'agit d'un tableau pour lequel nous utilisons la méthode map().

Inversez le tableau et utilisez la méthode map()

Pour utiliser map() sur un tableau dans l'ordre inverse, nous pouvons d'abord inverser le tableau en utilisant la méthode reverse() de JavaScript. Après cela, nous pouvons utiliser la méthode map() avec un tableau inversé.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour inverser le tableau, puis utiliser la méthode map().

let reversedArray = [...numbers].reverse();
let resultant_array = reversedArray.map((element, index) => { 
})

Dans la syntaxe ci-dessus, nous avons utilisé l'opérateur spread et la méthode reverse() pour inverser le tableau de nombres. Après cela, nous utilisons la méthode map() pour inverser le tableau.

Exemple 1

Dans cet exemple, nous avons créé un tableau de nombres contenant différents nombres. Ensuite, nous inversons le tableau de nombres à l’aide de la méthode reverse() et le stockons dans la variable du tableau inversé. Dans la sortie, l’utilisateur peut voir le tableau inversé.

Après cela, nous multiplions chaque élément du reverseArray à l'aide de la méthode map(), que l'utilisateur peut observer dans la sortie.

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numbers = [10, 20, 5, 3, 2, 6, 8, 532, 7, 45, 2, 54, 76, 789];
      let reversedArray = [...numbers].reverse();
      output.innerHTML += "The original array is " + numbers + "<br/>";
      output.innerHTML += "The reversed array is " + reversedArray + "<br/>";
      let resultant_array = reversedArray.map((element, index) => {
         return element + index;
      })
      output.innerHTML += "After using the map() method in reverse order on numbers array is " + resultant_array + "<br/>"
   </script>
</body>
</html>

Accédez aux éléments dans l'ordre inverse dans la fonction de rappel de la méthode map()

Pour utiliser la méthode map() sur un tableau dans l'ordre inverse, au lieu d'inverser le tableau, nous pouvons accéder aux éléments du tableau dans l'ordre inverse. Nous pouvons transmettre l'index actuel, c'est-à-dire le tableau lui-même, dans la fonction de rappel de la méthode map() et l'utiliser pour accéder aux éléments dans l'ordre inverse.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour accéder aux éléments dans l'ordre inverse dans la méthode map().

let resultant_array = array.map((element, index, array) => {
   array[array.length - index - 1];
})

Dans la syntaxe ci-dessus, array.length – index -1 index donne le dernier élément du tableau.

Exemple 2

Dans l'exemple ci-dessous, nous utilisons la méthode map() avec numberArray. Dans la méthode map(), nous accédons à l'élément depuis la fin du tableau en utilisant la longueur du tableau et l'index de l'élément actuel et le multiplions par 2 avant de revenir.

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output'); 
      let numbersArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let resultant_array = numbersArray.map((element, index, array) => {
         
         // access elements in reverse order and return after multiplying with two
         return array[array.length - index - 1] * 2;
      })
      output.innerHTML += "The original array is " + numbersArray + "<br/>";
      output.innerHTML += "After using the map() method in reverse order on numbers array is " + resultant_array + "<br/>";
   </script>
</body>
</html>

Utilisez d'abord la méthode map(), puis inversez le tableau résultant

Dans cette méthode de mappage des éléments d'un tableau dans l'ordre inverse, nous utiliserons d'abord la méthode map() et la méthode reverse(). Nous pouvons inverser le tableau mappé résultant en utilisant les méthodes slice() et reverse().

Grammaire

Les utilisateurs peuvent d'abord utiliser la méthode map(), puis la méthode reverse() selon la syntaxe suivante.

Let new_array = strings.map((element) => {
   
   // return element
});
new_array.reverse();

Dans la syntaxe ci-dessus, new_array contient la valeur mappée et nous utilisons la méthode reverse() sur new_array.

Exemple 3

Dans l'exemple ci-dessous, nous avons créé un tableau de chaînes. Nous utilisons la méthode map() pour mettre en majuscule le premier caractère de chaque élément de chaîne. Après cela, nous utilisons la méthode reverse() pour inverser la cartographie des éléments. De cette façon, nous mappons les éléments de chaîne dans l’ordre inverse.

<html>
<body>
   <h3> Using the <i> array.reverse() and array.map() </i> methods to use map() in reverse order on array </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let strings = ["hello", "hi", "javascript", "typescript", "tutorialspoint"];
      
      // use map() method first
      let capitalized = strings.map((element) => {
         return element.substring(0, 1).toUpperCase() + element.substr(1);
      });
      
      // reverse the array
      capitalized.reverse();
      output.innerHTML += "The original array is " + strings + "<br/>";
      output.innerHTML += "The resultant array is " + capitalized + "<br/>";
   </script>
</body>
</html>

Nous avons appris trois façons d'utiliser map() sur un tableau dans l'ordre inverse via JavaScript. La meilleure approche est la deuxième approche, qui accède aux éléments du tableau dans l'ordre inverse dans la méthode map(), car elle prend moins de temps et occupe moins de mémoire que les autres approches.

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 运算符回调函数字符串 Length map

Déclaration：

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

Article précédent：Astuce : Analyser jQuery - TexteArticle suivant：Astuce : Analyser jQuery - Texte

Articles Liés

Voir plus