suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie verwende ich map() auf einem Array in umgekehrter Reihenfolge mit JavaScript?

Wie verwende ich map() auf einem Array in umgekehrter Reihenfolge mit JavaScript?

PHPz
PHPznach vorne
2023-08-30 08:33:15552Durchsuche

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

Wir haben ein Array von Elementen erhalten und müssen map() über JavaScript in umgekehrter Reihenfolge auf das Array anwenden.

Die Methode

map() ordnet neue Elemente zu, die sich auf ein bestimmtes Array-Element im Ergebnisarray beziehen. Manchmal müssen wir Elemente in umgekehrter Reihenfolge zuordnen. Es gibt mehrere Möglichkeiten, map() in umgekehrter Reihenfolge auf ein Array anzuwenden. Wir werden uns alle Methoden einzeln ansehen.

Einführung in die Map()-Methode

Grammatik

Verwenden Sie die Methode map() gemäß der folgenden Syntax. 

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

Parameter

  • ele – Es ist ein Array-Element.

  • ind – Der Index des aktuellen Elements.

  • array – Dies ist ein Array, für das wir die Methode map() verwenden.

Kehren Sie das Array um und verwenden Sie die Methode „map()“

Um map() in umgekehrter Reihenfolge auf ein Array anzuwenden, können wir das Array zunächst mit der Methode reverse() von JavaScript umkehren. Danach können wir die Methode map() mit umgekehrtem Array verwenden.

Grammatik

Benutzer können der folgenden Syntax folgen, um das Array umzukehren und dann die Methode map() verwenden. 

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

In der obigen Syntax haben wir den Spread-Operator und die Methode reverse() verwendet, um das Zahlenarray umzukehren. Danach verwenden wir die Methode map() mit dem umgekehrten Array.

Beispiel 1

In diesem Beispiel haben wir ein Zahlenarray erstellt, das unterschiedliche Zahlen enthält. Als nächstes kehren wir das Zahlenarray mit der Methode reverse() um und speichern es in der Variablen des umgekehrten Arrays. In der Ausgabe kann der Benutzer das umgekehrte Array sehen.

Danach multiplizieren wir jedes Element des reverseArray mit der Methode map(), was der Benutzer in der Ausgabe beobachten kann. 

<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>

Zugriff auf Elemente in umgekehrter Reihenfolge in der Callback-Funktion der Map()-Methode

Um die Methode „map()“ für ein Array in umgekehrter Reihenfolge zu verwenden, können wir, anstatt das Array umzukehren, in umgekehrter Reihenfolge auf die Array-Elemente zugreifen. Wir können den aktuellen Index, also das Array selbst, in der Callback-Funktion der Map()-Methode übergeben und damit in umgekehrter Reihenfolge auf die Elemente zugreifen.

Grammatik

Benutzer können der folgenden Syntax folgen, um in der Methode „map()“ in umgekehrter Reihenfolge auf Elemente zuzugreifen. 

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

In der obigen Syntax gibt array.length – index -1 index das letzte Array-Element an.

Beispiel 2

Im folgenden Beispiel verwenden wir die Methode „map()“ mit „numbersArray“. In der Methode „map()“ greifen wir vom Ende des Arrays aus auf das Element zu, indem wir die Array-Länge und den Index des aktuellen Elements verwenden und diese mit 2 multiplizieren, bevor wir zurückkehren. 

<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>

Verwenden Sie zuerst die Methode map() und kehren Sie dann das resultierende Array um

Bei dieser Methode zum Zuordnen von Array-Elementen in umgekehrter Reihenfolge verwenden wir zunächst die Methoden map() und reverse(). Wir können das resultierende zugeordnete Array mit den Methoden Slice() und Reverse() umkehren.

Grammatik

Benutzer können zuerst die Methode map() und dann die Methode reverse() gemäß der folgenden Syntax verwenden. 

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

In der obigen Syntax enthält new_array den zugeordneten Wert und wir verwenden die Methode reverse() für new_array.

Beispiel 3

Im folgenden Beispiel haben wir ein Array von Zeichenfolgen erstellt. Wir verwenden die Methode map(), um das erste Zeichen jedes Zeichenfolgenelements groß zu schreiben. Danach verwenden wir die Methode reverse(), um die Elemente umzukehren. Auf diese Weise ordnen wir die String-Elemente in umgekehrter Reihenfolge zu. 

<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>

Wir haben drei Möglichkeiten kennengelernt, map() über JavaScript in umgekehrter Reihenfolge auf ein Array anzuwenden. Der beste Weg ist der zweite Weg, nämlich der Zugriff auf die Array-Elemente in umgekehrter Reihenfolge in der Methode „map()“, da diese zeiteffizienter ist und weniger Speicher beansprucht als die anderen Methoden.

Das obige ist der detaillierte Inhalt vonWie verwende ich map() auf einem Array in umgekehrter Reihenfolge mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript Array 运算符 回调函数 字符串 Length map
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Kurztipp: jQuery analysieren – TextNächster Artikel：Kurztipp: jQuery analysieren – Text

In Verbindung stehende Artikel

Mehr sehen