数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 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 数组。之后，我们将 map() 方法与反转后的数组一起使用。
示例 1
在这个示例中，我们创建了一个包含不同数字的数字数组。接下来，我们使用 reverse() 方法反转 numbers 数组，并将其存储在 reversed 数组变量中。在输出中，用户可以看到反转后的数组。
之后，我们使用 map() 方法将 reverseArray 的每个元素乘以 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 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
在下面的示例中，我们使用 numbersArray 使用了 map() 方法。在 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() 方法内部反向访问数组元素，因为它比其他方法更有效率，并且占用更少的内存。
4K+ 次浏览
