如何使用JavaScript中的map()方法以逆序对数组进行操作

我们已经给出了一个元素数组，并且需要使用JavaScript中的map()方法以逆序对数组进行操作。

map()方法将新元素与特定数组元素相关联，并将其映射到结果数组中。有时候，我们需要以逆序进行元素映射。有许多方法可以以逆序对数组使用map()方法。我们逐个将看到所有的方法。

map()方法简介

语法

请按照以下语法使用map()方法。

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

参数

ele - 它是一个数组元素。
ind - 它是当前元素的索引。
array - 它是我们使用map()方法的数组。

反转数组并在此之后使用map()方法

为了在数组上使用map()方法的反向顺序，我们可以先使用JavaScript的reverse()方法将数组反转。然后，我们可以使用反转后的数组来使用map()方法。

语法

用户可以按照以下语法来反转数组并在此之后使用map()方法。

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

在上面的语法中，我们使用了扩展运算符和reverse()方法来反转numbers数组。之后，我们使用reversed数组的map()方法。

示例1

在这个示例中，我们创建了一个包含不同数字的numbers数组。接下来，使用reverse()方法反转了numbers数组，并将其存储在reversed数组变量中。在输出中，用户可以看到反转后的数组。

然后，我们使用map()方法将reverseArray的每个元素相乘，用户可以在输出中观察到。

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

在map()方法的回调函数中以相反顺序访问元素

要在数组上以相反顺序使用map()方法，我们可以访问以相反顺序而不是反转数组的元素。我们可以将当前的索引（数组本身）传递给map()方法的回调函数，并使用它来以相反顺序访问元素。

语法

用户可以按照以下语法在map()方法内部以相反顺序访问元素。

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

在上面的语法中，array.length – index -1 索引从最后一个数组元素开始。

示例2

在下面的示例中，我们使用了map()方法和numbersArray。在map()方法中，我们通过数组长度和当前元素的索引从数组末尾访问元素，并在返回之前将其乘以2。

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

首先使用map()方法，并翻转结果数组

在这种以相反顺序映射数组元素的方法中，我们先使用map()方法和reverse()方法。我们可以使用slice()和reverse()方法来翻转映射后的结果数组。

语法

用户可以按照以下语法先使用map()方法，再使用reverse()方法。

Let new_array = strings.map((element) => {

   // return element
});
new_array.reverse();

在上述语法中，new_array包含了映射后的值，并且我们使用reverse()方法对new_array进行反转操作。

示例3

在下面的示例中，我们创建了一个字符串数组。我们使用map()方法将每个字符串元素的首字母大写。之后，我们使用reverse()方法对映射后的元素进行反转。这样，我们就实现了字符串元素的反向映射。

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

我们学习了三种使用JavaScript中map()方法以相反顺序对数组进行操作的方法。最好的方法是第二种方法，在map()方法内部以相反顺序访问数组元素，因为它比其他方法更高效，并且占用更少的内存。