24-Metodos de arrays en javascript

Conversion de array a cadena (string)

El metodo toString() converte un array en una cadena (string) de valores, separados por comas

ejemplo

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

El metodo Join también une todos los elementos de la matriz en una cadena.

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

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

---

...

Popping and Pushing

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

Esto es hacer Popping and Pushing

quitar elementos de una matriz (array) o poner elementos en un matriz (array)

Pop de matriz de JavaScript ()

El metodo pop() elimina el último elemento de una matriz:

Ejemplo

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

El metodo pop() devuelve el valor que "salió":

Ejemplo

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

---

Array push()

El metodo push() agrega un nuevo elemento a una matriz (al final):

Ejemplo

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

El metodo push() devuelve la nueva longitud de la matriz:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
 
Salida "demo1" 5
 
Salida "demo2" Banana,Orange,Apple,Mango,Kiwi

---

Elemento Shifting

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

---

Cambio de matriz (Array shift()) de JavaScript ()

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

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

---

Elemento Shifting

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

El metodo shift() devuelve el valor que fue "desplazado":

Ejemplo

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

---

unshift ()

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

Ejemplo

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

El metodo unshift() devuelve la nueva longitud de la matriz:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
        
 
Salida "demo1"5
 
Salida "demo2" Lemon,Banana,Orange,Apple,Mango

---

Elementos cambiantes (Changing)

Para aceder a un elemetos del arreglo se usa el numero de indice

Los índices 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"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
        
 
Salida "demo1" Banana,Orange,Apple,Mango
 
Salida "demo2" Kiwi,Orange,Apple,Mango

---

Longitud de un arreglo en Javascript

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

Ejemplo

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

---

Elimnacion de una matriz (Array delete())

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

Si usamos delete creamos varios agujeros en la matriz

Es preferible usar pop() o shift() en lugar de delete()

Ejemplo

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];
      
 
Salida "demo1" The first fruit is: Banana
 
Salida "demo2" The first fruit is: undefined

---

Fusionando (Concatenando) Matrices

El metodo concat() crea una nueva matriz mediante la fusión (concatenación) arreglos existentes:

Ejemplo

        const myGirls = ["Manolo", "Luis"];
        const myBoys = ["Emilio", "Tobias", "Lara"];
        const myChildren = myGirls.concat(myBoys);
        
        document.getElementById("demo").innerHTML = myChildren;
 
Salida  Manolo,Luis,Emilio,Tobias,Lara

El metodo concat() no cambia las matrices existentes. Siempre devuelve una nueva matriz.

El metodo concat() puede tomar cualquier número de argumentos de matriz:

Ejemplo

const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];
        
const myChildren = array1.concat(array2, array3); 
        
document.getElementById("demo").innerHTML = myChildren;
 
Salida Cecilie,Lone,Emil,Tobias,Linus,Robin,Morgan

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

Ejemplo

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

---

Splicing and Slicing Arrays

El metodo splice() agrega nuevos elementos a una matriz.

El metodo slice corta una parte de una matriz.

splice() en Javascript

El metodo splice() se puede usar para agregar nuevos elementos a una matriz:

Ejemplo

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
        
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
Salida "demo1" Banana,Orange,Apple,Mango
Salida "demo2" Banana,Orange,Lemon,Kiwi,Apple,Mango

El primer parámetro (2) define la posición en la que deben colocarse los nuevos elementos. agregado (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 metodo splice() devuelve una matriz con los elementos eliminados:

Ejemplo

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

---

eliminar elementos con splice()

Si usamos unos parametros inteligentes se puede utilizar splice() para eliminar elementos sin salir "agujeros" en la matriz:

Ejemplo

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

El primer parámetro (0) define la posición en la que deben colocarse los nuevos elementos. agregado (empalmado).

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

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

---

Segmento de matriz de JavaScript ()

El metodo slice() corta una parte de una matriz en una nueva formación.

Nel ejemplo se corta parte del array a partir del elemento (1) ("Naranja")

Ejemplo

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

" + citrus;
Salida "demo" Orange,Lemon,Apple,Mango

Nota: El metodo slice() crea una nueva matriz.

El metodo slice() elimina ningún elemento de la matriz de origen.

Nel ejemplo corta una parte de una matriz a partir del elemento de matriz 3 ("Manzana"):

Ejemplo

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

" + citrus;
Salida "demo"Apple,Mango

El metodo slice() puede tomar dos argumentos como slice(1, 3).

Luego, el método selecciona elementos desde el argumento de inicio y hasta (pero no incluyendo) el argumento final.

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

" + citrus;
Salida "demo"Orange,Lemon

---

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.

los dos ejemplos produciran el mismo resultado

Ejemplo

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

segundo ejemplo

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

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

Ir a propriedades y metodos de javascript

Ir al indice