In JavaScript, we sometimes need to skip array elements when using the map() method. For example, only if the array values are finite, we need to map the values from one array to another after performing some mathematical operations on the elements.
In this case, the user can use the following method to skip the array elements when using the map() method.
Use if-else statement
In the array.map() method, we can use if-else statements to skip the element. If the element satisfies the if-else statement condition, the element needs to be returned for mapping; otherwise, we can return a null value.
grammar
Users can use the if-else statement to skip elements in the map() method according to the following syntax.
array.map((number) => {
if (condition) {
// return some value
}
return null;
})
Copy after login
In the above syntax, if the condition of the if-else statement evaluates to true, we will return some value; otherwise, we return null.
Example 1
In the example below, we create an array containing numeric values. Our goal is to multiply each positive element by two and map them to the multiplier array. In the map() method, we use the "element > 0" condition to check if the array is positive, and if it evaluates to true, return the number multiplied by 2.
In the output, the user can see that when we return a null value, the array index appears empty.
<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>
Copy after login
Use filter() method in combination with map() method
We can use the filter() method before the map() method. Using filter() method we can remove some elements and filter the required elements in another array.
After that, we can use the map method with the array created by the filter() method, so that we can indirectly skip the elements in the map() method.
grammar
Users can use the filter() method according to the following syntax to skip elements in the map() method.
let filteredValues = array.filter((string) => {
// filtering condition
})
let str_array = filteredValues.map((element) => {
// map value
})
Copy after login
In the above syntax, first, we filter the values from the array and use the map() method on the filtered values.
Example 2
We have created an array containing different string values in the example below. Our goal is to convert all strings to uppercase where the first character is uppercase. So, first, we use the filter() method to filter all strings whose first character is uppercase and store them in the filteredValues array.
After that, we will use the map() method with the filteredValues array to map them to a new array after converting them to uppercase.
<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>
Copy after login
Use array.reduce() method
map() method maps elements to a new array. We can also use the reduce() method to achieve the same purpose. We can use the reduce() method to get an empty array and map elements to the array one by one.
grammar
Users can use the reduce() method according to the following syntax to work like the map() method and skip some elements.
let final_Array = numbers.reduce(function (array, element) {
if (condition) {
// perform some operation
// push the final element to the array
// return array
}
// return array
}, []);
Copy after login
In the above syntax, we push the element into the array based on certain conditions; otherwise, we return the array without pushing the element to the array to skip the element.
Example 3
In the following example, our goal is to map all elements divisible by two to itself. Therefore, we pass the callback function as the first parameter of the reduce() method and the empty array as the second parameter.
In the callback function, if the condition is met, we push the element to the array and return the array. Otherwise, we return the array without any changes.
Finally, the reduce() method returns an array containing all mapped elements, which we store in the Final_array variable, which the user can see in the output.
<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>
Copy after login
We learned three ways to skip elements in the map() method. The first method stores empty elements and takes up more space, the second method increases the time complexity because we use the filter() method alone. The third method is the best because it optimizes space and time.
The above is the detailed content of How to skip elements in .map()?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
