La función map() en JavaScript se usa para generar una nueva array llamando a la función para cada elemento de la array.
Nota:
- El método map() llama a la función para cada elemento de la array en orden.
- map() no se ejecuta para elementos de array que no tienen valores.
- map() no cambia la array original.
Hay varias formas de omitir un elemento en el mapa:
- Usar el bucle if dentro de la función que se ejecutará para agregar las restricciones para omitir ese elemento.
- Usando el método de filtro.
- Usando la función de flecha.
Ejemplo 1: Agregar las restricciones dentro del ciclo.
HTML
<!DOCTYPE html>
<html>
<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";
}
}
var values = [1, -1, -2, 6, 7, 8]
var filtered = values.map(display)
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = filtered;
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Usando el método de filtro.
HTML
<!DOCTYPE html>
<html>
<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;
}
var values = [1, -1, -2, 6, 7, 8]
var filtered =
values.map(display).filter(isPositive);
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = filtered;
}
</script>
</body>
</html>
Producción:
Ejemplo 3: Uso de la función flecha.
HTML
<!DOCTYPE html>
<html>
<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>
Producción:
Antes de hacer clic en el botón:
Antes de hacer clic
Después de hacer clic en el botón:
Después de hacer clic en el botón
Publicación traducida automáticamente
Artículo escrito por romy421kumari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA