JavaScript Array Methods

---

• Array length

• Array toString()

• Array pop()

• Array push()

• Array shift()

• Array unshift()

• Array join()

• Array delete()

• Array concat()

• Array flat()

• Array splice()

• Array slice()

Los métodos se enumeran en el orden en que aparecen en este tutorial.

---

JavaScript Array length

La propiedad length devuelve la longitud (tamaño) de una matriz:

Ejemplo:

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

Ver ejemplo

---

JavaScript Array toString()

El método 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();

Ver ejemplo

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

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

Ejemplo:

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

Ver ejemplo

---

Popping y Pushing

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

Esto es lo que es popping y pushing:

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

---

JavaScript Array pop()

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

Ejemplo:

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

Ver ejemplo

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

Ejemplo:

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

Ver ejemplo

---

JavaScript Array push()

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

Ejemplo:

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

Ver ejemplo

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

Ejemplo:

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

Ver ejemplo

---

Elementos cambiantes

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

---

JavaScript Array shift()

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

Ejemplo:

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

Ver ejemplo

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

Ejemplo:

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

Ver ejemplo

---

JavaScript Array unshift()

El método unshift() 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");

Ver ejemplo

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

Ejemplo:

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

Ver ejemplo

---

Elementos cambiantes

Se accede a los elementos de la matriz utilizando su número de índice:

Los índices de matriz comienzan en 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";

Ver ejemplo

---

JavaScript Array length

La propiedad length proporciona una manera sencilla de agregar un nuevo elemento a una matriz:

Ejemplo:

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

Ver ejemplo

---

JavaScript Array delete()

Advertencia

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

El uso de delete deja vacíos indefinidos en la matriz.

En su lugar utilice pop() o shift().

Ejemplo:

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

Ver ejemplo

---

Fusionar (concatenar) matrices

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

Ejemplo (fusionando dos matrices):

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

const myChildren = myGirls.concat(myBoys);

Ver ejemplo

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

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

Ejemplo (fusionando tres matrices)

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

Ver ejemplo

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

Ejemplo (fusionar una matriz con valores):

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

Ver ejemplo

---

Aplanar una matriz

Aplanar una matriz es el proceso de reducir la dimensionalidad de una matriz.

El método flat() crea una nueva matriz con elementos de submatriz concatenados a una profundidad específica.

Ejemplo:

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Ver ejemplo

---

Soporte del navegador

JavaScript Array flat() es compatible con todos los navegadores modernos desde enero de 2020:

---

Empalmar y cortar matrices

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

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

---

JavaScript Array splice()

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

Ejemplo:

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

Ver ejemplo

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

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

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

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

Ejemplo:

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

Ver ejemplo

---

Usando splice() para eliminar elementos

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

Ejemplo:

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

Ver ejemplo

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

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

El resto de parámetros se omiten. No se agregarán nuevos elementos.

---

JavaScript Array slice()

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

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

Ejemplo:

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

Ver ejemplo

---

Nota

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

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

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

Ejemplo:

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

Ver ejemplo

El método slice() 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);

Ver ejemplo

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

Ejemplo

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

Ver ejemplo

---

Automático toString()

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();

Ver ejemplo

---

Ejemplo

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

Ver ejemplo

---

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 siguiente capítulo de este tutorial.

---

Ordenar matrices

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

---

Referencia de completa matrices

Para obtener una referencia completa de Array, vaya a:

Referencia completa de matrices de JavaScript.

La referencia contiene descripciones y ejemplos de todas las propiedades y métodos de Array.

---

Traducido con 💚 desde W3Schools.com