Utilizando arrays en javascript

En esta entrada veremos muchos como podemos utilizar arrays en javascript.

Contenido:

• Declaración y Asignación
• La propiedad length
• Como recorrer un array
  • Método foreach
• Como quitar el último elemento de un array con el método pop
• Agregar elementos con el método push
• Quitar el primer elementos con método shift
• Usando el método splice

Declarando y asignando valor a un array.

Los arrays son un tipo especial de variable que nos permite almacenar en ella una lista de valores. Los arrays van asignando una numeración a los elementos la cual comienza desde 0, a esta se le llama index.

Por ejemplo:

var autos;
autos = ['BMW','Fiat','Peugeot','Lifan','Tesla'];

También podriamos asignar los valores de esta manera.

var autos;
//index 0
autos[0] = 'BMW';
//index 1
autos[1] = 'Fiat';
//index 2
autos[2] = 'Peugeot';
//index 3
autos[3] = 'Lifan';
//index 4
autos[4] = 'Tesla';

Además si yo quiero obtener el valor del primer elemento del array autos lo puedo hacer con autos[0]. Por consiguiente cuando le asignamos autos[0] a una variable le estamos asignando el valor que se encuentra en el index 0  ( si agregáramos alert(auto[0]); en el código anterior nos mostrara BMW)

Si queremos cambiar el valor del primer elemento autos[0]=’Mercedes’ estoy cambiando su valor a Mercedes. Tomando en cuenta los valores que le asignamos en el primer ejemplo

autos = ['BMW','Fiat','Peugeot','Lifan','Tesla'];

podemos sacar en conclusión que:

index	value
0	BMW
1	Fiat
2	Peugeot
3	Lifan
4	Tesla

Usando length.

Para saber la longitud de un array usamos la propiedad length la cual se usa de la siguiente manera nombre_de_array.length esta nos devolverá la cantidad de elementos que tiene nuestro array, además esta propiedad nos permite declarar la cantidad que tendrá si así lo deseamos por ejemplo nombre_de_array.length = 5.

var num_autos;
//El valor asignando a num_autos es 5.
num_autos = autos.length();

Recorriendo un array.

Para recorrer un array usaremos el bucle o ciclo for que tendra como condición que i debe ser menor que la longitud del array autos y además i incrementa +1. Por lo tanto el primer valor será el del índice 0 y como i es menor que la cantidad de elementos el último i será 4 por lo tanto el último valor será el de autos[4].

<script>
     var autos;
     autos = ['BMW','Tesla','Fiat','Peugeot','Lifan'];
     var i = 0;
     var stautos ="";
     for(i;i<autos.length;i++){
         stautos = stautos +"\n"+autos[i];
     }
     alert(stautos);
</script>

otra forma de recorrer es con for in

<script>
     var autos;
     autos = ['BMW','Tesla','Fiat','Peugeot','Lifan'];
     var a="";
     for(variable in autos){
         a += "\n"+autos[variable];
     }
     alert(a);
</script>

methodo forEach

Otra forma mas de recorrer un array seria con forEach este metodo para los array nos permite recorrer el array de forma muy facil.

<script>
     var autos;
     autos = ['BMW','Tesla','Fiat','Peugeot','Lifan'];
     autos.forEach(function(element){
     		alert(element);
     });
</script>

for… of

También puedes utilizar for of a continuación un ejemplo de mozilla developers- for of

let iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

Quitando el último elemento con el método pop

El metodo pop nos permite quitar el último elemento de un array sin tener que sabar su index. Supongamos que tenemos el siguiente array

let mi_array =[1,2,3,4,5,6,7,8,9];

Para quitar el último valor de este array puedo usar pop de la siguiente manera.

mi_array.pop();

Aquí dejo un ejemplo con el inspector de Firefox.

Como puede observar no estoy declarando la variable ni con let, ni con var, esto se debe a que antes ya la había declarado, si la declarase nuevamente me daría un error de intento de redeclaración de variable.

Método push

Podemos agregar un elemento al final de nuestro array con push, tomando en cuenta nuestro array anterior

mi_array.push(10);

Agrega 10 al final de nuestro array quedando [1,2,3,4,5,6,7,8,9,10] esto es bueno por ejemplo si lo que queremos hacer es agregar elementos a una lista.

Método shift.

El método shift elimina el primer elemento dentro de un array, supongamos que tenemos el array [‘enero’, ‘febrero’, ‘julio’, ‘septiembre’]

let meses =['enero','febrero','julio','septiembre'];
console.log("antes de shift: \n"+ meses);
meses.shift();
console.log("luego de shift: \n"+ meses);

Si prueba en el ejemplo podrá constatar de que enero fue eliminado de la lista. Caso de uso alguna lista que deba cumplir por orden, caso de terminado se borra el elemento de la lista.

Metodo Splice

El método splice nos permite tanto agregar como borrar elementos en una determinada posición. Su sintaxis es la siguiente:

array.splice(start[,cantidad_a_borrar [, elemento1[, elemento2[, ...]]]])

start – es desde donde se empieza a aplicar el splice.

cantidad a borrar – es si deceamos borrar algun elemento, si no se desea borrar un elemento pon 0.

elementos – son los elementos que deseas agregar.

Aunque pueda parecer no tener una aplicación muy evidente, es un método bastante útil cuando tienes que seleccionar múltiples checkbox y borrar los elementos por ejemplo.

let remove = get_selected_items();
let mybasket = allitems();
for (var i = remove.length -1; i >= 0; i--){                                 
   mybasket.items.splice(remove[i], 1);
}

Este ejemplo no es probable, ya que debería crear una función get_selected_items() y una función allitems() pero de todos modos, el ejemplo muestra como podemos usar splice para borrar los elementos seleccionados