Métodos para Arrays Javascript

Estos son los métodos que podemos encontrar:

Estas son las propiedades que podemos encontrar:

Convertir Arrays en Strings

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

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>

<h2>Método toString()</h2>

<p>El método toString () devuelve una matriz como una cadena separada por comas</p>

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

<script>
var fruits = ["pera", "manzana", "naranja", "platano"];
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 como toString(), pero además puede especificar el separador.

Ejm

<!DOCTYPE html>
<html>
<h2>Métodos Array Javascript</h2>
<h2>Método join()</h2>
<p>El método join() une elementos de array en un string</p>
<p>En este ejm hemos usado '*' como separador entre los elementos</p>

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

<script>
var fruits = ["Pera", "Manzana", "Naranja", "Plátano"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</html>

Popping and Pushing (Quitar y poner)

Cuando trabaja con matrices, es fácil eliminar elementos y agregar elementos nuevos. Esto es lo que significa hacer estallar y empujar. Sacar elementos de una matriz o insertar elementos en una matriz.

Popping (Quitar)

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

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>
<h2>El método pop()</h2>
<p>El método pop() elimina el último elemento de un Array</p>

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

<script>
var fruits = ["Manzana", "Pera", "Naranja", "Plátano"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>

Pushing (Poner)

El método push() añade un nuevo elemento a un Array al final del Array.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>
<h2>Método push()</h2>
<p>El método push() agrega un nuevo elemento en un Array</p>

<button onClick="myFunction()">Haz clic</button>

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

<script>
// CREO LA VARIABLE
var fruits = ["Pera", "Manzana", "Naranja", "Plátano"];

// IMPRIMO EL ARRAY EN PANTALLA
document.getElementById("demo").innerHTML = fruits;

// CREO LA FUNCIÓN QUE AGREGARÁ UN NUEVO ELEMENTO AL ARRAY
// Y LA IMPRIMO EN PANTALLA CON EL ELEMENTO NUEVO
function myFunction()
{
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Elementos cambiantes

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

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

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>shift()</h2>

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

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

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

</body>
</html>

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

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>unshift()</h2>

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

<button onclick="myFunction()">Try it</button>

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

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

function myFunction() {
fruits.unshift("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

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

Cambiar elementos

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 …

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

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

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

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

</body>
</html>

La propiedad length proporciona una manera fácil de agregar un nuevo elemento a una matriz.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>
<p>La propiedad length proporciona una manera fácil de agregar nuevos elementos a una matriz sin usar el método push ().</p>
<button onClick="myFunction()">Haz clic</button>
<p id="demo"></p>

<script>
var fruits = ["Manzana", "Naranja", "Pera"];
document.getElementById("demo").innerHTML = fruits;

function myFunction()
{
fruits[fruits.length] = "Kiwi";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Eliminando elementos

Dado que las matrices de JavaScript son objetos, los elementos se pueden eliminar utilizando el operador de JavaScript delete.

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>
<p>Eliminar elementos deja huecos indefinidos en una matriz.</p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Manzana", "Naranja", "Pera"];
document.getElementById("demo1").innerHTML = "La primera fruta es: " + fruits[0];
delete fruits[0];

document.getElementById("demo2").innerHTML = "La primera fruta es: " + fruits[0];
</script>
</body>
</html>

El uso de delete puede dejar huecos sin definir en la matriz. Utiliza pop() o shift() en su lugar.

Empalmar una matriz

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

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>
<h2>Método splice()</h2>
<p>EL método splice() añade nuevos elementos a un Array</p>

<button onClick="myFunction()">Haz clic</button>

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

<script>
var fruits = ["Manzana", "Naranja", "Pera"];
document.getElementById("demo1").innerHTML = "Array original: <br />" + fruits;

function myFunction()
{
fruits.splice(2, 0, "Limón", "Kiwi");
document.getElementById("demo2").innerHTML  = "Nuevo Array: <br />" + fruits;}
</script>
</body>
</html>

El funcionamiento de splice() es:

  • 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 deben eliminarse.
  • El resto de parámetros (“Limón”, “Kiwi”) definen los nuevos elementos a añadir.
  • El método splice() devuelve una matriz con los elementos eliminados

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

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

<button onclick="myFunction()">Try it</button>

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

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;

function myFunction() {
var 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 remover elementos

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

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>splice()</h2>

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

<button onclick="myFunction()">Try it</button>

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

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.splice(0, 1);
document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Explicamos el funcionamiento:

  • 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 deben eliminarse.
  • El resto de parámetros se omiten. No se agregarán nuevos elementos.

Fusión (concatenación) de Arrays

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

Ejm

<!DOCTYPE html>
<html>
<body>
<h2>Métodos Array Javascript</h2>
<h2>Método concat()</h2>
<p>El método concat es usado para fusionar (concatenar) Arrays</p>

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

<script>
var myGirls = ["Ines", "Eva"];
var myBoys = ["Paco", "Iván", "Angel"];
var 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.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>concat()</h2>

<p>The concat() method is used to merge (concatenate) arrays:</p>

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

<script>
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];

var myChildren = arr1.concat(arr2, arr3);

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

</body>
</html>

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

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>concat()</h2>

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

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

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

</body>
</html>

Cortar una matriz

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 de matriz 1 (“Naranja”).

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>slice()</h2>

<p>This example slices out a part of an array starting from array element 1 ("Orange"):</p>

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

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

</body>
</html>

El método slice() crea una nueva matriz. 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”).

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>slice()</h2>

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

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

<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var 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 de inicio y hasta (pero sin incluir) el argumento final.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>slice()</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>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var 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 método slice() corta el resto de la matriz.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>slice()</h2>

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

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

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

</body>
</html>

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.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

<h2>toString()</h2>

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

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

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

</body>
</html>

Ejm2

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Methods</h2>

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

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

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

</body>
</html>