資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
