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

在本文中，我们将讨论在map中跳过元素的方法。JavaScript中的map()函数用于通过调用每个数组元素的函数生成一个新的数组。

注意：

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

有多种方法可以跳过map中的一个元素：

在要执行的函数中使用if循环添加约束条件以跳过该元素。
使用filter方法。
使用箭头函数。

示例1： 在循环里添加约束条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to skip over an element in .map() ?
    </title>
</head>
 
<body>
    <p style="color: green; 
        font-size: 30px;">
        GeeksforGeeks
    </p>
 
    <p>[1,-1,-2,6,7,8]</p>
 
    <button onclick="myFunction()">
        Click to skip negative values
    </button>
 
    <p id="demo"></p>
 
    <script>
        function display(num) {
            if (num > 0) {
                return num;
            }
            else {
                return "null";
            }
        }
        let values = [1, -1, -2, 6, 7, 8]
        let filtered = values.map(display)
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    </script>
</body>
</html>

输出：

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

示例2： 使用filter方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to skip over an element in .map() ?
    </title>
</head>
 
<body>
    <p style="color: green; 
        font-size: 30px;">
        GeeksforGeeks
    </p>
 
    <p>[1,-1,-2,6,7,8]</p>
 
    <button onclick="myFunction()">
        Click to skip negative values
    </button>
 
    <p id="demo"></p>
 
    <script>
        function isPositive(value) {
            return value > 0;
        }
        function display(num) {
            return num;
        }
        let values = [1, -1, -2, 6, 7, 8]
        let filtered =
            values.map(display).filter(isPositive);
 
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    </script>
</body>
</html>

输出:

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

示例 3： 使用箭头函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to skip over an element in .map() ?
    </title>
</head>
 
<body>
    <p style="color: green; 
        font-size: 30px;">
        GeeksforGeeks
    </p>
 
 
    <p>Given<br>images = [{src: 1}, {src: 2},
        {src: 3}, {src: 4}]<br>Skip src=3</p>
 
    <button onclick="myFunction()">Skip</button>
    <p id="demo"><br></p>
 
    <script>
        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;
        }
    </script>
</body>
</html>

输出:

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