資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 .map() 中跳過元素？
在 JavaScript 中，我們有時需要在使用 map() 方法時跳過陣列元素。例如，我們只需要對陣列元素執行一些數學運算後，才能將值從一個數組對映到另一個數組，前提是陣列值必須是有限的。
在這種情況下，使用者可以使用以下方法在使用 map() 方法時跳過陣列元素。
使用 if-else 語句
在 array.map() 方法中，我們可以使用 if-else 語句跳過元素。如果元素滿足 if-else 語句的條件，我們需要返回該元素進行對映；否則，我們可以返回 null 值。
語法
使用者可以按照以下語法使用 if-else 語句跳過 map() 方法中的元素。
array.map((number) => {
if (condition) {
// return some value
}
return null;
})
在上述語法中，如果 if-else 語句的條件計算結果為真，則返回某個值；否則，返回 null。
示例 1
在下面的示例中，我們建立了一個包含數值的陣列。我們的目標是將每個正元素乘以二並將它們對映到乘數陣列。在 map() 方法中，我們使用“element > 0”條件檢查陣列是否為正數，如果計算結果為真，則返回該數字乘以二後的結果。
在輸出中，使用者可以看到，當我們返回 null 值時，該陣列索引為空。
<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 陣列中。
之後，我們將使用 map() 方法和 filteredValues 陣列將它們對映到一個新陣列，然後將它們轉換為大寫。
<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() 方法中跳過元素的方法。第一種方法儲存 null 元素並佔用更多空間，第二種方法增加了時間複雜度，因為我們分別使用了 filter() 方法。第三種方法是最好的，因為它在空間和時間上都進行了最佳化。
15K+ 次瀏覽
