极客教程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) => {
})
在上面的语法中，我们使用了spread operator和reverse()方法来反转数字数组。之后，我们用map()方法对反转后的数组进行处理。
例子1
在这个例子中，我们创建了一个包含不同数字的数组。接下来，我们使用reverse()方法反转了数字数组，并将其存储在反转的数组变量中。在输出中，用户可以看到反转的数组。
之后，我们使用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 index给出一个数组元素，从最后一个开始。
例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包含了映射的值，我们用new_array使用了reverse()方法。
例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()方法里面以相反的顺序访问数组元素，因为它比其他方法更省时，而且占用的内存更少。