El método map() en JavaScript crea una array llamando a una función específica en cada elemento presente en la array principal. Es un método no mutante. En general, el método map() se usa para iterar sobre una array y llamar a la función en cada elemento de la array.
Sintaxis:
array.map(function(currentValue, index, arr), thisValue)
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- function(currentValue, index, arr): Es un parámetro requerido y se ejecuta en cada elemento de la array. Contiene tres parámetros que se enumeran a continuación:
- currentValue: Es un parámetro requerido y contiene el valor del elemento actual.
- índice: es un parámetro opcional y contiene el índice del elemento actual.
- arr: es un parámetro opcional y contiene la array.
- thisValue: es un parámetro opcional y se utiliza para contener el valor de pasado a la función.
Valor de retorno: devuelve una nueva array y los elementos de las arrays son el resultado de la función de devolución de llamada.
Los siguientes ejemplos ilustran el uso del método array map() en JavaScript:
Ejemplo 1: Este ejemplo utiliza el método array map() y devuelve el cuadrado del elemento de array.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Array map() Method
</title>
</head>
<body>
<div id="root"></div>
<!-- Script to use Array map() Method -->
<script>
var el = document.getElementById('root');
var arr = [2, 5, 6, 3, 8, 9];
var newArr = arr.map(function(val, index){
return {key:index, value:val*val};
})
console.log(newArr)
el.innerHTML = JSON.stringify(newArr);
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa el método array map() para concatenar el carácter ‘A’ con cada carácter del nombre.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Array map() Method
</title>
</head>
<body>
<div id="root"></div>
<script>
var el = document.getElementById('root');
var name = "Pankaj";
// New array of character and names
// concatenated with 'A'
var newName = Array.prototype.map.call(name, function(item) {
return item + 'A';
})
console.log(newName)
</script>
</body>
</html>
Producción:
Ejemplo 3: este ejemplo utiliza el método array map() para devolver el cuadrado de los elementos de la array.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Array map() Method
</title>
</head>
<body>
<div id="root"></div>
<script>
var el = document.getElementById('root');
// Map is being called directly on an array
// Arrow function is used
el.innerHTML = [6, 7, 4, 5].map((val)=>{
return val*val;
})
</script>
</body>
</html>
Producción:
36, 49, 16, 25
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA