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


Métodos de matriz de JavaScript


Conversión de matrices en cadenas

El método de JavaScript toString()convierte una matriz en una cadena de valores de matriz (separados por comas).

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Resultado:

Banana,Orange,Apple,Mango

El join()método también une todos los elementos de la matriz en una cadena.

Se comporta como toString(), pero además puedes especificar el separador:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Resultado:

Banana * Orange * Apple * Mango

Hacer estallar y empujar

Cuando trabaja con matrices, es fácil eliminar elementos y agregar nuevos elementos.

Esto es hacer estallar y empujar:

Extraer elementos de una matriz o insertar elementos en una matriz.



Pop de matriz de JavaScript ()

El pop()método elimina el último elemento de una matriz:

Ejemplo

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

El pop()método devuelve el valor que "salió":

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

Empuje de matriz de JavaScript ()

El push()método agrega un nuevo elemento a una matriz (al final):

Ejemplo

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

El push()método devuelve la nueva longitud de la matriz:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Elementos cambiantes

Cambiar es equivalente a hacer estallar, pero trabajando en el primer elemento en lugar del último.


Cambio de matriz de JavaScript ()

El shift()método elimina el primer elemento de la matriz y "cambia" todos los demás elementos a un índice más bajo.

Ejemplo

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

El shift()método devuelve el valor que fue "desplazado":

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

Matriz de JavaScript unshift ()

El unshift()método agrega un nuevo elemento a una matriz (al principio) y "desplaza" los elementos más antiguos:

Ejemplo

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

El unshift()método devuelve la nueva longitud de la matriz.

Ejemplo

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

Elementos cambiantes

Se accede a los elementos del arreglo usando su número de índice :

Los índices de matriz comienzan con 0:

[0] es el primer elemento de la matriz
[1] es el segundo
[2] es el tercero...

Ejemplo

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

Longitud de matriz de JavaScript

La lengthpropiedad proporciona una manera fácil de agregar un nuevo elemento a una matriz:

Ejemplo

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

Eliminación de matriz de JavaScript ()

Advertencia !

Los elementos de la matriz se pueden eliminar mediante el operador de JavaScript delete.

Usando deletehojas undefinedde agujeros en la matriz.

Utilice pop() o shift() en su lugar.

Ejemplo

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

Fusionando (Concatenando) Matrices

El concat()método crea una nueva matriz fusionando (concatenando) matrices existentes:

Ejemplo (fusión de dos matrices)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

El concat()método no cambia las matrices existentes. Siempre devuelve una nueva matriz.

El concat()método puede tomar cualquier número de argumentos de matriz:

Ejemplo (fusión de tres matrices)

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

El concat()método también puede tomar cadenas como argumentos:

Ejemplo (Fusionar una matriz con valores)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 

Matrices de empalme y corte

El splice()método agrega nuevos elementos a una matriz.

El slice()método corta una parte de una matriz.


Empalme de matriz de JavaScript ()

El splice()método se puede usar para agregar nuevos elementos a una matriz:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

El primer parámetro (2) define la posición en la que se deben agregar (empalmar) nuevos elementos.

El segundo parámetro (0) define cuántos elementos se deben eliminar .

El resto de parámetros ("Limón", "Kiwi") definen los nuevos elementos a añadir .

El splice()método devuelve una matriz con los elementos eliminados:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Usando splice() para eliminar elementos

Con una configuración de parámetros inteligente, puede usar splice()para eliminar elementos sin dejar "agujeros" en la matriz:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

El primer parámetro (0) define la posición en la que se deben agregar (empalmar) nuevos elementos.

El segundo parámetro (1) define cuántos elementos se deben eliminar .

El resto de los parámetros se omiten. No se añadirán nuevos elementos.


Segmento de matriz de JavaScript ()

El slice()método corta una parte de una matriz en una nueva matriz.

Este ejemplo corta una parte de una matriz a partir del elemento de matriz 1 ("Naranja"):

Ejemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

Nota

El slice()método crea una nueva matriz.

El slice()método no elimina ningún elemento de la matriz de origen.

Este ejemplo corta una parte de una matriz a partir del elemento de matriz 3 ("Apple"):

Ejemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

El slice()método puede tomar dos argumentos como slice(1, 3).

Luego, el método selecciona elementos desde el argumento inicial y hasta (pero sin incluir) el argumento final.

Ejemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);

Si se omite el argumento final, como en los primeros ejemplos, el slice() método corta el resto de la matriz.

Ejemplo

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);

ToString automático ()

JavaScript convierte automáticamente una matriz en una cadena separada por comas cuando se espera un valor primitivo.

Este es siempre el caso cuando intenta generar una matriz.

Estos dos ejemplos producirán el mismo resultado:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Nota

Todos los objetos JavaScript tienen un método toString().


Encontrar valores máximos y mínimos en una matriz

No hay funciones integradas para encontrar el valor más alto o más bajo en una matriz de JavaScript.

Aprenderá cómo resolver este problema en el próximo capítulo de este tutorial.


Clasificación de matrices

La clasificación de matrices se trata en el próximo capítulo de este tutorial.

Referencia de matriz completa

For a complete Array reference, go to our:

Complete JavaScript Array Reference.

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

Test Yourself With Exercises

Exercise:

Use the correct Array method to remove the last item of the fruits array.

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