Array.prototype.forEach()

El m茅todo forEach() ejecuta la funci贸n indicada una vez por cada elemento del array.

Sintaxis

arr.forEach(function callback(currentValue, index, array) {
    // tu iterador
}[, thisArg]);

Par谩metros

callback
Funci贸n a ejecutar por cada elemento, que recibe tres argumentos:
currentValue
El elemento actual siendo procesado en el array.
index Optional
El 铆ndice del elemento actual siendo procesado en el array.
array Optional
El vector en el que forEach() esta siendo aplicado.
thisArg Optional
Valor que se usar谩 como this cuando se ejecute el callback.

Valor de retorno

Descripci贸n

forEach() ejecuta la funci贸n callback una vez por cada elemento presente en el array en orden ascendente. No es invocada para 铆ndices que han sido eliminados o que no hayan sido inicializados (Ej. sobre arrays sparse)

callback es invocada con tres argumentos:

  1. el valor del elemento
  2. el 铆ndice del elemento
  3. el array que est谩 siendo recorrido

Si un par谩metro thisArg es proporcionado a forEach, ser谩 usado como el valor this para cada invocaci贸n de callback como si se llamara a callback.call(thisArg, element, index, array). Si thisArg es undefined o null, el valor this dentro de la funci贸n depende si la funci贸n est谩 o no en modo estricto (valor pasado si est谩 en modo estricto, objeto global si est谩 en modo no-estricto).

El rango de elementos procesados por forEach() se establece antes de la primera invocaci贸n del callback. Los elementos que sean a帽adidos al vector despu茅s de que inicie la llamada a forEach no ser谩n visitados por callback. Si los valores de los elementos existentes en el vector son modificados, el valor pasado al callback ser谩 el valor al momento de que forEach los visite; no se evaluar谩n los elementos borrados antes de ser visitados por forEach.

forEach() ejecuta la funci贸n callback una vez por cada elemento del array; a diferencia de map()reduce() este siempre devuelve el valor undefined y no es encadenable. El t铆pico uso es ejecutar los efectos secundarios al final de la cadena.

foreach() no muta/modifica el array desde el que es llamado (aunque callback, si se invoca, podr铆a hacerlo).

Nota : No hay forma de detener o cortar un bucle forEach que no sea lanzar una excepci贸n. Si necesita dicho comportamiento, el m茅todo .forEach() es la herramienta equivocada, use una simple iteraci贸n en su lugar. Si est谩 probando los elementos del array para un predicado y necesita devolver un valor boleano, puede usar every()some() en su lugar.

Ejemplos

Imprimiendo el contenido de un array

El siguiente c贸digo imprime una l铆nea por cada elemento en un array:

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
// N贸tese que se evita el 2掳 铆ndice ya que no hay ning煤n elemento en esa posici贸n del array
[2, 5, , 9].forEach(logArrayElements);
// salida:
// a[0] = 2
// a[1] = 5
// a[2] = 9

Usando thisArg

El siguiente ejemplo actualiza las propiedades del objeto por cada entrada en el array:

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
  // ^---- Note
};

var obj = new Counter();
obj.add([2, 5, 9]);
obj.count
// 3
obj.sum
// 16

Nota: Dado que el par谩metro thisArg (this) se referencia en el forEach(), ser谩 pasado al callback cuando se invoque, para utilizarse como su valor this.

Ejemplo: Funci贸n que copia objetos

El siguiente c贸digo crea una copia de un objeto dado. Hay diferentes formas de crear una copia de un objeto, 茅sta es s贸lo una de ellas y sirve para explicar c贸mo funciona Array.prototype.forEach utilizando funciones Object.* de ECMAScript 5.

function copy(o){
  var copy = Object.create( Object.getPrototypeOf(o) );
  var propNames = Object.getOwnPropertyNames(o);

  propNames.forEach(function(name){
    var desc = Object.getOwnPropertyDescriptor(o, name);
    Object.defineProperty(copy, name, desc);
  });

  return copy;
}

var o1 = {a:1, b:2};
var o2 = copy(o1); // o2 ahora se parece a o1

Si el array se modifica durante la iteraci贸n, otros elementos pueden ser omitidos.

El siguiente ejemplo muestra por consola "uno", "dos", "cuatro". Cuando se alcanza el registro que contiene el valor "dos", el primer registro del array se desplaza, lo que hace que los registros restantes se muevan una posici贸n. Debido a que el elemento "cuatro" est谩 ahora en una posici贸n anterior en el array, "tres" se omitir谩. forEach() no hace una copia del array antes de iterar.

var words = ['uno', 'dos', 'tres', 'cuatro'];
words.forEach(function(word) {
  console.log(word);
  if (word === 'dos') {
    words.shift();
  }
});
// uno
// dos
// cuatro

Polyfill

forEach se agreg贸 de manera reciente al est谩ndar ECMA-262; as铆 que puede no estar presente en otras implementaciones del est谩ndar. Se puede asegurar el uso del forEach con tan solo agregar el siguiente c贸digo al inicio de los scripts, permitiendo as铆 el uso de forEach en implementaciones que no lo soportan de manera nativa. El algoritmo es el mismo que se especifica en la quinta versi贸n de ECMA-262, asumiendo que Object y TypeError tienen sus valores originales y que callback.call eval煤a el valor original de Function.prototype.call().

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.com/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function forEach(callback, thisArg) {
    'use strict';
    var T, k;

    if (this == null) {
      throw new TypeError("this is null or not defined");
    }

    var kValue,
        // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
        O = Object(this),

        // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        len = O.length >>> 0; // Hack to convert O.length to a UInt32

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if ({}.toString.call(callback) !== "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length >= 2) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k < len
    while (k < len) {

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as the this value and
        // argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined
  };
}

Especificaciones

Compatibilidad con navegadores

BCD tables only load in the browser

Vea tambi茅n