Métodos de matriz de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

Los métodos se enumeran en el orden en que aparecen en esta página de tutorial.

Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()

Longitud de la matriz de JavaScript

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property returns the length of an array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>

</body>
</html>

Matriz de JavaScript toString()

El método JavaScript toString() convierte una matriz en un 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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

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

</body>
</html>

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

Resultado :

Banana * Orange * Apple * Mango

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>

<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>

<p id="demo"></p>

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

</body>
</html>

Hacer estallar y empujar

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

Esto es lo que es hacer estallar y empujar:

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

Matriz de JavaScript pop()

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method removes the last element from an array.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>

<p>The pop() method returns the value that was "popped out":</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Matriz de JavaScript push()

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>

<p>The push() method appends a new element to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The push() Method</h2>

<p>The push() method returns the new array length:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Elementos cambiantes

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

Matriz de JavaScript shift()

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>

<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Matriz de JavaScript unshift()

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method adds new elements to the beginning of an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The unshift() Method</h2>

<p>The unshift() method returns the length of the new array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Elementos cambiantes

Se accede a los elementos de la matriz utilizando 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";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>

<p>Array elements are accessed using their index number:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Longitud de la matriz de JavaScript

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Matriz de JavaScript eliminar()

Advertencia !

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

El uso de delete deja indefinidos agujeros en el formación.

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>

<p>Deleting elements leaves undefined holes in an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

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

document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];

delete fruits[0];

document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>

</body>
</html>

Fusionar (concatenar) matrices

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

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 (fusión de tres matrices)

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method merges (concatenates) arrays:</p>

<p id="demo"></p>

<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];

const myChildren = array1.concat(array2, array3); 

document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>

<p>The concat() method can merge string values to arrays:</p>

<p id="demo"></p>

<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter"); 
document.getElementById("demo").innerHTML = myChildren;
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

<p id="demo"></p>

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Soporte del navegador

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

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

Empalmar y cortar matrices

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

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

Matriz de JavaScript empalme()

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

El primer parámetro (2) define la posición donde deben estar los nuevos elementos añadido (empalmado).

El segundo parámetro (0) define cuántos elementos deben ser eliminado.

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

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed; 
</script>

</body>
</html>

Usando splice() para eliminar elementos

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>

<p>The splice() methods can be used to remove array elements:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

El primer parámetro (0) define la posición donde deben colocarse los nuevos elementos. añadido (empalmado).

El segundo parámetro (1) define cuántos elementos deben ser eliminado.

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

Matriz JavaScript slice()

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

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

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. ("Manzana"):

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 3 ("Apple")</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

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 no incluyendo) el argumento final.

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

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

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>

<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>The toString() Method</h2>

<p>The toString() method returns an array as a comma separated string:</p>

<p id="demo"></p>

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

</body>
</html>

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>

<p id="demo"></p>

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

</body>
</html>

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 más alto o el valor más bajo en una matriz de JavaScript.

Aprenderás 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 matriz completa

Para obtener una referencia completa de Array, vaya a nuestro:

Referencia completa de matrices de JavaScript.

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