JavaScript 如何在.map()中跳过一个元素

JavaScript 如何在.map()中跳过一个元素

在JavaScript中,我们有时需要在使用map()方法时跳过数组元素。例如,我们需要在对元素进行一些数学运算后,将值从一个数组映射到另一个数组,只有当数组的值是有限的。

在这种情况下,用户可以在使用map()方法时使用下面的方法来跳过数组元素。

使用if-else语句

在array.map()方法中,我们可以使用if-else语句来跳过该元素。如果该元素满足if-else语句的条件,我们需要返回该元素进行映射;否则,我们可以返回一个null值。

语法

用户可以按照下面的语法在map()方法中使用if-else语句来跳过元素。

array.map((number) => {
   if (condition) {

      // return some value
   }
   return null;
})

在上述语法中,如果if-else语句的条件评估为真,我们就返回某个值;否则,我们就返回null。

例子1

在下面的例子中,我们用数值创建了一个数组。我们的目标是将每个正数元素乘以2,并将它们映射到乘数数组中。在map()方法中,我们使用’元素>0’的条件检查数组是否为正数,如果评估为真,我们返回乘以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()方法,我们可以删除一些元素,并在另一个数组中过滤需要的元素。

之后,我们可以用filter()方法创建的数组来使用map方法,通过这种方式,我们可以间接地跳过map()方法中的元素。

语法

用户可以按照下面的语法来使用filter()方法来跳过map()方法中的元素。

let filteredValues = array.filter((string) => {

   // filtering condition
})
let str_array = filteredValues.map((element) => {

   // map value
})

在上面的语法中,首先,我们从数组中过滤数值,然后对过滤后的数值使用map()方法。

例2

在下面的例子中,我们创建了一个包含不同字符串值的数组。我们的目标是将所有字符串转换为大写字母,即第一个字符为大写字母。所以,首先,我们使用filter()方法来过滤所有大写第一个字符的字符串,并将它们存储在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

在下面的例子中, 我们的目标是将所有的元素映射到自己身上, 这些元素是可以被2除的.所以,我们将回调函数作为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()方法。第三种方法是最好的,因为它的空间和时间都得到了优化。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程