如何使用 JavaScript 以相反的順序在陣列上使用 map() ？
- PHPz轉載
- 2023-08-30 08:33:15555瀏覽
我們已經給了元素數組，並且需要透過 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()方法來反轉數字陣列。之後，我們將 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 索引給出最後一個陣列元素。
範例 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() 方法中以相反的順序存取數組元素，因為它比其他方法更省時並且佔用更少的記憶體。
以上是如何使用 JavaScript 以相反的順序在陣列上使用 map() ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！