如何跳過 .map() 中的元素？
- WBOY轉載
- 2023-08-24 13:57:031301瀏覽
在 JavaScript 中，我們有時需要在使用 map() 方法時跳過陣列元素。例如，只有當數組值是有限的時，我們才需要在對元素執行一些數學運算後將值從一個數組映射到另一個數組。
在這種情況下，使用者可以使用以下方法在使用map()方法時跳過陣列元素。
使用 if-else 語句
在 array.map() 方法中，我們可以使用 if-else 語句來跳過該元素。如果該元素滿足if-else語句條件，則需要傳回該元素進行映射；否則，我們可以傳回空值。
文法
使用者可以依照下列語法使用if-else語句跳過map()方法中的元素。
array.map((number) => {
if (condition) {
// return some value
}
return null;
})
在上面的語法中，如果 if-else 語句的條件評估為 true，我們將傳回一些值；否則，我們傳回 null。
範例 1
在下面的範例中，我們建立了包含數值的陣列。我們的目標是將每個正元素與兩個相乘並將它們映射到乘法器數組。在 map() 方法中，我們使用「element > 0」條件來檢查陣列是否為正，如果計算結果為 true，則傳回乘以 2 後的數字。
在輸出中，使用者可以看到當我們傳回空值時，該陣列索引顯示為空。
<html>
<body>
<h2>Using the <i> if-else </i> statement to skip over element in the array.map() method</h2>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById('output');
let array = [10, 20, 34, 4, 5, 6, 0, -1, 3, 2, 4, -2];
let multiplier = array.map((number) => {
if (number > 0) {
return number * 2;
} else {
return null;
}
})
output.innerHTML += "The final array after skipping the negative number in the map() method is - " + multiplier;
</script>
</html>
將filter()方法與map()方法結合使用
我們可以在map()方法之前使用filter()方法。使用filter()方法，我們可以刪除一些元素並過濾另一個陣列中所需的元素。
之後，我們可以將map方法與filter()方法建立的陣列一起使用，這樣我們就可以間接跳過map()方法中的元素。
文法
使用者可以依照下面的語法使用filter()方法來跳過map()方法中的元素。
let filteredValues = array.filter((string) => {
// filtering condition
})
let str_array = filteredValues.map((element) => {
// map value
})
在上面的語法中，首先，我們從陣列中過濾值，並對過濾後的值使用 map() 方法。
範例 2
我們在下面的範例中建立了一個包含不同字串值的陣列。我們的目標是將所有字串轉換為大寫，其中第一個字元為大寫。因此，首先，我們使用filter()方法過濾所有第一個字元為大寫的字串，並將它們儲存在filteredValues陣列中。
之後，我們將使用帶有filteredValues數組的map()方法將它們轉換為大寫後將它們映射到一個新數組。
<html>
<body>
<h2>Using the <i> array.filter() </i> method to skip over element in the array.map() method.</h2>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById('output');
let array = ["Hello", "hi", "JavaScript", "typescript", "C", "CPP", "html"];
let filteredValues = array.filter((string) => {
if (string.charCodeAt(0) > 96 && string.charCodeAt(0) < 123) {
return true;
}
return false;
})
let str_array = filteredValues.map((element) => {
return element.toUpperCase();
})
output.innerHTML += "The filtered values from the array are " + filteredValues + "<br/>";
output.innerHTML += "The final array after skipping some strings in the map() method is - " + str_array + "<br>";
</script>
</html>
使用 array.reduce() 方法
map() 方法將元素映射到新陣列。我們也可以使用reduce()方法來達成相同的目的。我們可以使用reduce()方法取得一個空數組並將元素一一地對應到該數組。
文法
使用者可以按照下面的語法使用reduce()方法來像map()方法一樣工作並跳過一些元素。
let final_Array = numbers.reduce(function (array, element) {
if (condition) {
// perform some operation
// push the final element to the array
// return array
}
// return array
}, []);
在上面的語法中，我們根據一定的條件將元素壓入數組；否則，我們返回數組而不將元素推送到數組以跳過該元素。
範例 3
在下面的範例中，我們的目標是將所有可被二整除的元素對應到自身。因此，我們將回呼函數作為reduce()方法的第一個參數傳遞，並將空數組作為第二個參數傳遞。
在回呼函數中，如果滿足條件，我們將元素推送到陣列並傳回數組。否則，我們將返回數組而不做任何更改。
最後，reduce() 方法傳回包含所有映射元素的數組，我們將其儲存在 Final_array 變數中，使用者可以在輸出中看到該變數。
<html>
<body>
<h2>Using the <i> array.reduce() </i> method to skip over element in the array.map() method.</h2>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById('output');
let numbers = [10, 33, 34, 55, 57, 58, 90, 87, 85, 53];
let final_Array = numbers.reduce(function (array, element) {
if (element % 2 == 0) {
array.push(element);
}
return array;
}, []);
output.innerHTML += "The final array after skipping some strings in the map() method is - " + final_Array + "<br>";
</script>
</html>
我們學習了三種在 map() 方法中跳過元素的方法。第一種方法儲存空元素並佔用更多空間，第二種方法增加了時間複雜度，因為我們單獨使用filter()方法。第三種方法是最好的，因為它優化了空間和時間。
以上是如何跳過 .map() 中的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！