24-Metodos de arrays en javascript

Jorge Catalao febrero 18, 2023

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
Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias