In this article, we will discuss the methods to skip over elements in a map. The map() function in JavaScript is used to generate a new array by calling a function for every array element.
Note:
- map() method calls the function for every array element in order.
- map() does not execute for array element that has no values.
- map() does not change the original array.
There are various ways to skip over an element in the map:
- Using the if loop inside the function to be executed to add the constraints to skip over that element.
- Using the filter method.
- Using the arrow function.
Example 1: Adding the constraints inside the loop.
HTML
<!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;">        neveropen    </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> |
Output:
Skip over an element in .map()Â
Example 2: Using the filter method.
HTML
<!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;">        neveropen    </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> |
Output:
Skip over an element in .map()Â
Example 3: Using the arrow function.
HTML
<!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;">        neveropen    </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> |
Output:Â
skip over an element in .map()Â
