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

JavaScript 中的map()函数用于通过为每个数组元素调用函数来生成一个新数组。

笔记：

• map() 方法按顺序为每个数组元素调用该函数。
• map() 不会对没有值的数组元素执行。
• map() 不会改变原始数组。

有多种方法可以跳过地图中的元素：

• 在要执行的函数内使用 if 循环来添加约束以跳过该元素。
• 使用过滤方法。
• 使用箭头函数。

示例 1：在循环内添加约束。

HTML

  

    
        GeeksforGeeks
    
  
    [1,-1,-2,6,7,8]
  
    
        Click to skip negative values
    
      
    
  
    
        function display(num) {
            if (num > 0) {
                return num;
            }
            else {
                return "null";
            }
        }
        var values = [1, -1, -2, 6, 7, 8]
        var filtered = values.map(display)
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    

  

输出：

示例 2：使用过滤器方法。

HTML

  

    
        GeeksforGeeks
    
  
    [1,-1,-2,6,7,8]
  
    
        Click to skip negative values
    
      
    
  
    
        function isPositive(value) {
            return value > 0;
        }
        function display(num) {
            return num;
        }
        var values = [1, -1, -2, 6, 7, 8]
        var filtered = 
            values.map(display).filter(isPositive);
              
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    

  

输出：

示例 3：使用箭头函数。

HTML

  

    
        GeeksforGeeks
    
  
  
    Givenimages = [{src: 1}, {src: 2}, 
        {src: 3}, {src: 4}]Skip src=3
  
    Skip
    
  
    
        let images = [{ src: 1 }, { src: 2 }, 
                        { src: 3 }, { src: 4 }];
        let sources = images.filter(
            img => img.src != 3).map(img => img.src);
              
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = sources;
        }
    

  

输出：

点击按钮前：

点击前

点击按钮后：

点击按钮后