Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objetos Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de funciones Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Iteración de matriz de JavaScript


Los métodos de iteración de matrices operan en cada elemento de la matriz.


Matriz de JavaScript para cada uno ()

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

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

El ejemplo anterior usa solo el parámetro de valor. El ejemplo se puede reescribir como:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

Mapa de matriz de JavaScript ()

El map()método crea una nueva matriz realizando una función en cada elemento de la matriz.

El map()método no ejecuta la función para elementos de matriz sin valores.

El map()método no cambia la matriz original.

Este ejemplo multiplica cada valor de matriz por 2:

Ejemplo

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

Cuando una función de devolución de llamada usa solo el parámetro de valor, los parámetros de índice y matriz se pueden omitir:

Ejemplo

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}


Filtro de matriz de JavaScript ()

El filter()método crea una nueva matriz con elementos de matriz que pasa una prueba.

Este ejemplo crea una nueva matriz a partir de elementos con un valor superior a 18:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

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

Ejemplo

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

Matriz de JavaScript reducir ()

El reduce()método ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un solo valor.

El reduce()método funciona de izquierda a derecha en la matriz. Ver reduceRight()también

El reduce()método no reduce la matriz original.

Este ejemplo encuentra la suma de todos los números en una matriz:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Tenga en cuenta que la función toma 4 argumentos:

  • El total (el valor inicial / valor previamente devuelto)
  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

El ejemplo anterior no utiliza los parámetros de índice y matriz. Se puede reescribir a:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

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

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

Matriz JavaScript reduceRight()

El reduceRight()método ejecuta una función en cada elemento de la matriz para producir (reducirlo a) un solo valor.

Las reduceRight()obras de derecha a izquierda en la matriz. Ver reduce()también

El reduceRight()método no reduce la matriz original.

Este ejemplo encuentra la suma de todos los números en una matriz:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

Tenga en cuenta que la función toma 4 argumentos:

  • El total (el valor inicial / valor previamente devuelto)
  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

El ejemplo anterior no utiliza los parámetros de índice y matriz. Se puede reescribir a:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

Matriz de JavaScript cada ()

El every()método verifica si todos los valores de la matriz pasan una prueba.

Este ejemplo verifica si todos los valores de la matriz son mayores que 18:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

Cuando una función de devolución de llamada usa solo el primer parámetro (valor), los otros parámetros se pueden omitir:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

Matriz de JavaScript algunos ()

El some()método verifica si algunos valores de matriz pasan una prueba.

Este ejemplo verifica si algunos valores de matriz son mayores que 18:

Ejemplo

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

Array de JavaScript indexOf()

El indexOf()método busca en una matriz el valor de un elemento y devuelve su posición.

Nota: El primer elemento tiene la posición 0, el segundo elemento tiene la posición 1 y así sucesivamente.

Ejemplo

Busque en una matriz el elemento "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;

Sintaxis

array.indexOf(item, start)
item Required. The item to search for.
start Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end.

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

Si el elemento está presente más de una vez, devuelve la posición de la primera aparición.


Matriz JavaScript lastIndexOf()

Array.lastIndexOf()es lo mismo que Array.indexOf(), pero devuelve la posición de la última aparición del elemento especificado.

Ejemplo

Busque en una matriz el elemento "Apple":

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;

Sintaxis

array.lastIndexOf(item, start)
item Required. The item to search for
start Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning

Búsqueda de matrices de JavaScript ()

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

Este ejemplo encuentra (devuelve el valor de) el primer elemento que es mayor que 18:

Ejemplo

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

Compatibilidad con navegador

find() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

find() no es compatible con Internet Explorer.


Matriz JavaScript findIndex()

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

Este ejemplo encuentra el índice del primer elemento que es mayor que 18:

Ejemplo

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo
  • El índice de artículos
  • La matriz en sí

Compatibilidad con navegador

findIndex() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

findIndex() no es compatible con Internet Explorer.




JavaScript Array.from()

El Array.from()método devuelve un objeto Array de cualquier objeto con una propiedad de longitud o cualquier objeto iterable.

Ejemplo

Crear una matriz a partir de una cadena:

Array.from("ABCDEFG");

Compatibilidad con navegador

from() es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

from() no es compatible con Internet Explorer.


Claves de matriz de JavaScript ()

El Array.keys()método devuelve un objeto Array Iterator con las claves de una matriz.

Ejemplo

Create an Array Iterator object, containing the keys of the array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

for (let x of keys) {
  text += x + "<br>";
}

Browser Support

keys() is an ES6 feature (JavaScript 2015).

It is supported in all modern browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

keys() is not supported in Internet Explorer.


JavaScript Array includes()

ECMAScript 2016 introduced Array.includes() to arrays. This allows us to check if an element is present in an array (including NaN, unlike indexOf).

Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true

Syntax

array.includes(search-item)

Array.includes() allows to check for NaN values. Unlike Array.indexOf().

Array.includes() is not supported in Internet Explorer and Edge 12/13.

The first browser versions with full support are:


Browser Support

includes() is an ECMAScript 2016 feature.

It is supported in all modern browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

includes() is not supported in Internet Explorer.


Complete Array Reference

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

The reference contains descriptions and examples of all Array properties and methods.