数据结构
网络
关系数据库管理系统(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+ 次浏览
