如何跳过 .map() 中的元素？
在 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
初学者的打字稿，第2部分：基本数据类型
Mar 19, 2025 am 09:10 AM
掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样，TypeScript中的null
