JavaScript forEach()Método
Objeto Array de JavaScriptEjemplo
Listar cada elemento del array:
<button onclick="numbers.forEach(myFunction)">Haz clic</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script>
Resultado:
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
index[1]: 9
index[2]: 16
index[3]: 25
Pruébalo »
Definición y uso
El método forEach() se utiliza para llamar a cada elemento del array y pasarlo a la función de devolución de llamada.
Nota:forEach() no ejecuta la función de devolución de llamada para arrays vacíos.
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que soporta este método.
| Método | |||||
|---|---|---|---|---|---|
| forEach() | Yes | 9.0 | 1.5 | Yes | Yes |
Sintaxis
array.forEach(callbackFn(currentValue, index, arr), thisValue)
Parámetros
| Parámetros | Descripción | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| callbackFn(currentValue, index, arr) | Obligatorio. Función que se debe llamar para cada elemento del array. Parámetros de la función:
|
||||||||
| thisValue | Opcional. Valor pasado a la función; generalmente se usa el valor "this". Si este parámetro está vacío, "undefined" se pasará al valor "this". |
Otras formas de sintaxis:
// Función flecha
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })
// Función de devolución de llamada
forEach(callbackFn)
forEach(callbackFn, thisArg)
// Función de devolución de llamada en línea
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })
// Función de devolución de llamada
forEach(callbackFn)
forEach(callbackFn, thisArg)
// Función de devolución de llamada en línea
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
Detalles técnicos
| Valor de retorno: | undefined |
|---|---|
| Versión de JavaScript: | ECMAScript 3 |
Más ejemplos
Ejemplo
Calcular la suma de todos los elementos del array:
<button onclick="numbers.forEach(myFunction)">Haz clic</button>
<p>Suma de los elementos del array:<span id="demo"></span></p>
<script>
var sum = 0;
var numbers = [65, 44, 12, 4];
function myFunction(item) {
sum += item;
demo.innerHTML = sum;
}
</script>
Pruébalo »
Ejemplo
Multiplicar todos los valores del array por un número específico:
<p>Multiplicar por:<input type="number" id="multiplyWith" value="10"></p>
<button onclick="numbers.forEach(myFunction)">Haz clic</button>
<p>Valor después del cálculo:<span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function myFunction(item,index,arr) {
arr[index] = item * document.getElementById("multiplyWith").value;
demo.innerHTML = numbers;
}
</script>
Pruébalo »
continue y break en forEach()
forEach() no admite las sentencias continue y break por sí mismo; podemos implementarlassomeyeveryde la siguiente manera.
Uso dereturnsentencias para implementarcontinueel efecto de la palabra clave:
Implementación de continue
Ejemplo
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
if (item === 3) {
return;
}
console.log(item);
});
arr.forEach(function (item) {
if (item === 3) {
return;
}
console.log(item);
});
var arr = [1, 2, 3, 4, 5];
arr.some(function (item) {
if (item === 2) {
return; // No puede ser return false
}
console.log(item);
});
arr.some(function (item) {
if (item === 2) {
return; // No puede ser return false
}
console.log(item);
});
Implementación de break
Ejemplo
var arr = [1, 2, 3, 4, 5];
arr.every(function (item) {
console.log(item);
return item !== 3;
});
arr.every(function (item) {
console.log(item);
return item !== 3;
});
Otras extensiones