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;
})
Copy after login
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) => {
})
Copy after login
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>
Copy after login
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];
})
Copy after login
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>
Copy after login
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();
Copy after login
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>
Copy after login
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
