Iteración de array en JavaScript

Los métodos de iteración de array operan en cada elemento del array.

Array.forEach()

forEach() El método llama una vez a la función para cada elemento del array (función de devolución).

Ejemplo

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

Pruebe usted mismo

comentarios:La función acepta 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

El ejemplo anterior solo utilizó el parámetro value. Este ejemplo se puede escribir de nuevo como:

Ejemplo

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Pruebe usted mismo

todos los navegadores lo soportan Array.forEach()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.map()

map() El método crea un nuevo array ejecutando una función en cada elemento del array.

map() El método no ejecuta la función en los elementos del array sin valor.

map() El método no cambia el array original.

Este ejemplo multiplica cada valor del array por 2:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

Pruebe usted mismo

Por favor, note que esta función tiene 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

Cuando la función de devolución utiliza solo el parámetro value, se pueden omitir los parámetros de índice y array:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Pruebe usted mismo

todos los navegadores lo soportan Array.map()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.filter()

filter() El método crea un nuevo array que contiene los elementos que pasan la prueba.

Este ejemplo crea un nuevo array con elementos cuyos valores son mayores de 18:

Ejemplo

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Pruebe usted mismo

Tenga en cuenta que esta función acepta 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

En el ejemplo anterior, la función de devolución no utiliza los parámetros index y array, por lo que se pueden omitir:

Ejemplo

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Pruebe usted mismo

todos los navegadores lo soportan Array.filter()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.reduce()

reduce() El método ejecuta una función en cada elemento del array para generar (reducir) un solo valor.

reduce() El método trabaja en el array desde la izquierda a la derecha. Consulte también reduceRight().

reduce() El método no reduce el array original.

Este ejemplo determina la suma total de todos los números en el array:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Pruebe usted mismo

Por favor, note que esta función acepta 4 parámetros:

  • total (valor inicial / valor devuelto anteriormente)
  • Valor del elemento
  • Índice del elemento
  • El array en sí

el ejemplo anterior no usó los parámetros index y array. Puede reescribirse como:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Pruebe usted mismo

reduce() El método puede aceptar un valor inicial:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Pruebe usted mismo

todos los navegadores lo soportan Array.reduce()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.reduceRight()

reduceRight() El método ejecuta una función en cada elemento del array para generar (reducir) un solo valor.

reduceRight() El método trabaja en el array desde la derecha a la izquierda. Consulte también reduce().

reduceRight() El método no reduce el array original.

Este ejemplo determina la suma total de todos los números en el array:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Pruebe usted mismo

Por favor, note que esta función acepta 4 parámetros:

  • total (valor inicial / valor devuelto anteriormente)
  • Valor del elemento
  • Índice del elemento
  • El array en sí

el ejemplo anterior no usó los parámetros index y array. Puede reescribirse como:

Ejemplo

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Pruebe usted mismo

todos los navegadores lo soportan Array.reduceRight()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.every()

every() el método verifica si todos los valores del array pasan la prueba.

este ejemplo verifica si todos los valores del array son mayores de 18:

Ejemplo

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Pruebe usted mismo

Tenga en cuenta que esta función acepta 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

si el callback solo usa el primer parámetro (valor), se pueden omitir los otros parámetros:

Ejemplo

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Pruebe usted mismo

todos los navegadores lo soportan Array.every()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.some()

some() el método verifica si algunos valores del array pasan la prueba.

este ejemplo verifica si algunos valores del array son mayores de 18:

Ejemplo

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Pruebe usted mismo

Tenga en cuenta que esta función acepta 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

todos los navegadores lo soportan Array.some()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

Array.indexOf()

indexOf() el método busca un elemento en el array y devuelve su posición.

comentarios:la posición del primer elemento es 0, la posición del segundo elemento es 1, etc.

Ejemplo

Buscar el elemento "Apple" en el array:

var fruits = ["Apple", "Naranja", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Pruebe usted mismo

todos los navegadores lo soportan Array.indexOf()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

sintaxis

array.indexOf(elemento, inicio)
elemento obligatorio. El proyecto a buscar.
inicio opcional. Desde dónde comenzar la búsqueda. Los valores negativos comenzarán desde la posición dada a partir del final y buscarán hasta el final.

si no se encuentra el elemento,Array.indexOf() devuelve -1.

si el elemento se repite, devuelve la posición de la primera aparición.

Array.lastIndexOf()

Array.lastIndexOf() con Array.indexOf() simil, pero buscando desde el final del array.

Ejemplo

Buscar el elemento "Apple" en el array:

var fruits = ["Apple", "Naranja", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Pruebe usted mismo

todos los navegadores lo soportan Array.lastIndexOf()，excepto en Internet Explorer 8 o versiones anteriores:

sí 9.0 sí sí sí

sintaxis

array.lastIndexOf(elemento, inicio)
elemento obligatorio. El proyecto a buscar.
inicio Opcional. Desde dónde comenzar la búsqueda. Los valores negativos comenzarán desde el final del lugar especificado y buscarán hasta el principio.

Array.find()

find() El método devuelve el valor del primer elemento del array que pasa la función de prueba.

Este ejemplo busca (devuelve) el valor del primer elemento mayor que 18:

Ejemplo

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Pruebe usted mismo

Tenga en cuenta que esta función acepta 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

Los navegadores antiguos no lo admiten Array.find()A continuación, se muestra la primera versión del navegador que admite completamente este método:

45 12 25 8 32

Array.findIndex()

findIndex() El método devuelve el índice del primer elemento del array que pasa la función de prueba.

Este ejemplo busca el índice de la primer elemento mayor que 18:

Ejemplo

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

Pruebe usted mismo

Tenga en cuenta que esta función acepta 3 parámetros:

  • Valor del elemento
  • Índice del elemento
  • El array en sí

Los navegadores antiguos no lo admiten Array.findIndex()A continuación, se muestra la primera versión del navegador que admite completamente este método:

45 12 25 8 32