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()
