search

Home  >  Article  >  Web Front-end  >  How to use map() on an array in reverse order using JavaScript?

How to use map() on an array in reverse order using JavaScript?

PHPz
PHPzforward
2023-08-30 08:33:15552browse

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

We have been given an array of elements and need to use map() on the array in reverse order via JavaScript.

The map() method maps new elements related to a specific array element in the result array. Sometimes, we need to map elements in reverse order. There are multiple ways to use map() on an array in reverse order. We will look at all the methods one by one.

map() method introduction

grammar

Use the map() method according to the following syntax. 

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

parameter

  • ele – It is an array element.

  • ind – The index of the current element.

  • array – This is an array that we use the map() method.

Reverse the array and use the map() method

To use map() on an array in reverse order, we can first reverse the array using JavaScript's reverse() method. After that, we can use map() method with reversed array.

grammar

Users can reverse the array according to the following syntax, and then use the map() method. 

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

In the above syntax, we have used the spread operator and reverse() method to reverse the numeric array. After that, we use the map() method with the reversed array.

Example 1

In this example, we create an array of numbers containing different numbers. Next, we reverse the array of numbers using the reverse() method and store it in the reversed array variable. In the output, the user can see the reversed array.

After that, we use the map() method to multiply each element of the reverseArray, which the user can observe in the output. 

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

Access elements in reverse order in the callback function of the map() method

To use the map() method on an array in reverse order, we can access the array elements in reverse order instead of inverting the array. We can pass the current index i.e. the array itself in the callback function of the map() method and use it to access the elements in reverse order.

grammar

Users can access elements in reverse order in the map() method according to the following syntax. 

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

In the above syntax, array.length – index -1 index gives the last array element.

Example 2

In the following example, we use the map() method with numbersArray. In the map() method, we access the element from the end of the array using the array length and index of the current element and multiply it by 2 before returning. 

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

First use the map() method, then reverse the resulting array

In this method of mapping array elements in reverse order, we will first use the map() method and reverse() method. We can reverse the resulting mapped array using the slice() and reverse() methods.

grammar

Users can use the map() method first and then the reverse() method according to the following syntax. 

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

In the above syntax, new_array contains the mapped value, and we use the reverse() method on new_array.

Example 3

In the example below, we create an array of strings. We use the map() method to capitalize the first character of each string element. After that, we use the reverse() method to reverse map the elements. This way, we map the string elements in reverse order. 

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

We learned three ways to use map() on an array in reverse order via JavaScript. The best approach is the second approach, accessing the array elements in reverse order in the map() method, as it is less time consuming and takes up less memory than the other approaches.

The above is the detailed content of How to use map() on an array in reverse order using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript Array 运算符 回调函数 字符串 Length map
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Quick Tip: Parsing jQuery - TextNext article：Quick Tip: Parsing jQuery - Text

Related articles

See more