如何跳过 .map() 中的元素？-js教程-PHP中文网

使用 if-else 语句

语法

示例 3

将filter()方法与map()方法结合使用

使用 array.reduce() 方法

首页

web前端

js教程

如何跳过 .map() 中的元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 01:57 PM

如何跳过 .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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1268

C# 教程

1248

显示更多

Related knowledge

JavaScript引擎：比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

JavaScript：探索网络语言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

如何使用Next.js（前端集成）构建多租户SaaS应用程序 Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

使用Next.js（后端集成）构建多租户SaaS应用程序 Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

从C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。