Saltar al contenido

ARRAYS en TypeScript | APRENDE a usarlas con estos SENCILLOS puntos

TypeScripts Arrays

¿Quieres aprender cómo se utilizan los arrays/arreglos en TypeScript y no sabes por donde empezar? O, quizás, lo que estás buscando es información sobre características o funciones disponible para tratar con los datos de su interior. Si la respuesta es sí a cualquiera de estas dos cuestiones, no te culpo, no eres el único que se ha preguntado esto. Es más, yo me incluyo dentro cuando empecé a programar.

Por si no lo sabes aún, mi nombre es Aitor Sánchez González y soy desarrollador de software desde el año 2014. Me especializo en apps móviles, y en servicios de backend para las mismas, y en este artículo te explicaré cómo puedes, de una manera muy sencilla y digerible, comenzar a usar los array en este lenguaje de programación.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Una cosa más, he grabado en video este artículo para algunos de mis lectores que les gusta más ver que leer. Lógicamente soy yo el que aparece en el video y me gustaría, que si el video te ha ayudado/gustado pues que te suscribas al canal desde aquí 😊

 

 

Ahora si, comencemos…

Información previa

Bueno, cómo es posible que ya conozcas lo que es un array, en ese caso te pediré que pases al siguiente punto. De lo contrario debes de leer este antes de continuar.

Un array, resumiendo, es una variable que almacena un conjunto/colección de otras variables. Aún no he hablado de ello en el diccionario del programador, así que en cuanto tenga el video hecho lo pondré por aquí.

 

Cómo se define un array en TypeScript

Para definir un Array en TypeScript, lo único que tenemos que hacer es usar los corchetes [] al final de la definición del tipo de variable que va a contener:

let heroes: string[];

 

Cómo hemos visto en el ejemplo del video, vamos a usar un array de algunos héroes de Marvel antes de continuar.

let heroes: string[] = [
    "Iron Man",
    "Spiderman",
    "Thor",
    "Hulk",
    "Black Widow",
    "Hawk Eye"
];

 

Cómo puedes intuir, dentro de esta arrays podemos almacenar colecciones de cualquier tipo de dato ya sea primitivo o por referencia. En el mismo ejemplo, hemos usado cadenas de texto. Ahora hagamos una de primitivos:

let numbers: number[] = [1,2,3,4,5];

 

Cómo se accede a los objetos de un array

Cuando nosotros vamos poniendo items dentro de un arreglo el mismo sistema va asignando un índice a cada uno de ellos. Dicho índice se incrementa con cada uno más que agregamos, y disminuye con cada uno que quitamos (esto lo vamos a ver a continuación).

Para acceder a un elemento en concreto, debemos de conocer su índice dentro de dicha colección. Para acceder a él lo haremos de la siguiente manera:

let segundoHeroe: string = heroes[2]; //Donde dos es el índice del array al que queremos acceder.

 

Para más ejemplo, vamos a acceder a uno de estos índices y lo vamos a mostrar por la consola de desarrollo:

console.log(heroes[2]); //Imprimiría Spìderman
console.log(segundoHeroe); //Este también imprimiría Spiderman

 

 

¿Se puede modificar su contenido?

Al tratarse de variables contenido dentro de una variable más grande, por supuesto que se puede modificar. Para ello solo tendríamos que hacer lo siguiente:

//Esto modificará su contenido.
heroes[2] = "Peter Parker";
console.log(heroes[2]); //Ahora imprimirá Peter Parker

 

Es muy sencillito. Cabe decir que, si es un array que almacena strings no podemos meter un number dentro. Vamos, que no podemos cambiar el tipo de dato, pero si el valor de este.

 

Cómo agregar y eliminar elementos

Llegando al final, esta seguramente sea la pregunta que más se pase por tu cabeza. Lo sé porque a mí me pasó. ¿Puedo agregar elementos a un array después de haberla definido? Pues claro, faltaría más.

Para tal fin, vamos a hacer uso de dos funciones de las que disponen las variables de tipo array. Es posible que aún no sepas lo que son las funciones, pro que aún no lo he explicado en el diccionario del programado, pero fíate de mí que se hace así. Más adelante veremos lo que son.

//Agregamos un elemento al final del array:
heroes.push("Scarlet Witch");

//Eliminamos el último elemento del array:
heroes.pop();

 

Cómo has podido ver en el ejemplo, usamos las funciones “pop” y “push”:

  • pop -> Nos permite eliminar el último elemento que hay en el array.
  • push -> Nos permite agregar un elemento al final del array.

Hay más métodos para agregar y quitar elementos, pero de momento nos vamos a quedar con estos dos nada más, que son los principales que tienes que conocer cuando trabajas con arrays.

 

Conocer la longitud de un array en TypeScript

Para terminar, vamos a ver cómo podemos conocer la cantidad de elementos que tenemos dentro del array. Esto es muy útil cuando, por ejemplo, vamos a recorrerla con un bucle para, por ejemplo, imprimir en consola el nombre de los héroes que hemos visto en el video.

console.log(heroes.length);

 

Aunque es posible que no entiendas el código, o quizás sí, lo que me importa de lo que has visto es la llamada a la propiedad “length”. Esta propiedad es la que va a contener dicho número que tiene el valor de la cantidad de objetos que hay dentro del array.

Nota: Es importante saber que, dependiendo del lenguaje, dicha propiedad “length” también podría ser una función. O, más diferente aún, podría llamarse “size”.

 

Funciones disponibles de un array

Los arreglos/arrays, cómo cualquier otro objeto, dispone de funciones/métodos que podemos utilizar para manipular los datos que contienen. Vamos a pasar a verlos y a comentar un poquito cada uno de ellos a nivel informativo. Vamos:

  • concat -> Devolverá un array con los nuevos valores que le pasemos cómo parámetros a esta función. Dichos parámetros podrán ser un valor suelto u otra array con valores del mismo tipo de dato:
    • concat(value1, value2, value3, ….. , valueN);
var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3]; 
var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric ); 

//ouput: alphaNumeric : a,b,c,1,2,3

 

  • every -> Nos permite conocer, mediante una función dada que tiene que devolver un booleano, si todos los elementos del array pasan la prueba. Es mejor verlo que explicarlo:
    • every(callback[, thisObject]);
function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed );

//Ouput: Test Value : false
    • Cómo puedes apreciar, la función evalúa si todos los elementos del array son mayores que 10. En caso afirmativo, la prueba pasar, negativo en caso contrario. La verdad, es una función de mucha utilidad.

 

  • filter -> Devolverá un array con el contenido que pase correctamente por la función de filtro. Dicha función de filtro tendrá el mismo funcionamiento que la función «every».
    • filter (callback[, thisObject]);
function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed );

//Ouput: Test Value :12,130,44

 

  • forEach -> Nos permite recorrer todos los índices de un array mediante una función callback. Dicha función tendrá como parámetro el valor del índice del array según se vaya ejecutando de manera secuencial.
    • forEach(callback[, thisObject]);
let num = [7, 8, 9];
num.forEach(function (value) {
  console.log(value);
}); 

//Ouput:
//7
//8
//9
    • Hay que tener especial cuidado con esto. Se ejecutará de manera asíncrona y no detendrá el flujo de ejecución de la aplicación a menos que nosotros se lo indiquemos explícitamente.

 

  • indexOf -> Nos devolverá el índice donde se encuentra el valor dado cómo parámetro. Devolverá -1 en caso de que no exista. El parámetro «fromIndex» nos permite definir desde que índice del array comenzar siendo 0 el valor por defecto:
    • indexOf(searchElement[, fromIndex]);
var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );

//Ouput: index is : 2

 

  • join -> Nos permite convertir el contenido del array en una cadena de texto con un separador que le daremos a la función como parámetro:
    • join(separator);
var arr = new Array("First","Second","Third"); 
          
var str = arr.join(); 
console.log("str : " + str );  
          
var str = arr.join(", "); 
console.log("str : " + str );  
          
var str = arr.join(" + "); 
console.log("str : " + str );

//Ouput:
//str : First,Second,Third 
//str : First, Second, Third 
//str : First + Second + Third

 

  • lastIndexOf -> Similar a indexOf pero comenzando por el final del array en dirección al comienzo de esta. Nos devolverá le número del índice donde se encuentra el valor dado como parámetro. El parámetro «fromIndex» nos permite definir un offset desde donde comenzará a contar.
    • lastIndexOf(searchElement[, fromIndex]);
var index = [4, 12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );

//Ouput: index is : 2

 

  • map -> Devolverá un array con los valores que retorna la función dada cómo parámetro por cada uno de los elementos del array.
    • map(callback[, thisObject]);
var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );

//Ouput: roots is : 1,2,3
    • Cómo se puede apreciar en la salida, los valores del array roots son las raíces cuadradas de los valores del array numbers.

 

  • pop -> Eliminará el último elemento disponible en el array.
    • pop();
var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  
          
var element = numbers.pop(); 
console.log("element is : " + element );

//Ouput:
//element is : 9 
//element is : 4

 

  • push -> Esta función insertará los elementos dados cómo parámetro al final del array y devolverá la nueva longitud del array.
    • push(element1, element2, …, elementN);
var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  
length = numbers.push(20); 
console.log("new numbers is : " + numbers );

//Ouput: 
//new numbers is : 1,4,9,10 
//new numbers is : 1,4,9,10,20
    • El valor de la variable length será de 4 y 5 respectivamente.

 

  • reduce -> Este método aplica una función simultáneamente contra dos valores de la matriz (de izquierda a derecha) para reducirla a un solo valor. El parámetro «initalValue» será el valor inicial al que se empezará a sumar.
    • reduce(callback[, initialValue]);
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );

//Ouput: total is : 6

 

  • reduceRight -> Similar a «reduce» pero comenzará a reducir de derecha a izquierda.
    • reduceRight(callback[, initialValue]);
var total = [0, 1, 2, 4].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );

//Ouput: total is : 7

 

  • reverse -> Esta función devolverá una copia del array pero con los elementos al revés. El primero pasando a ser el último, y viceversa.
    • reverse();
var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );

//Ouput: Reversed array is : 3,2,1,0

 

  • shift -> Elimina el primer elemento del array.
    • shift();
var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );

//Ouput: Shifted value is : 10

 

  • slice -> Nos permite extraer una porción del array en cuestión. El parámetro «begin» es el índice desde el que partirá y «end» donde terminará. Si «end» no existe la función devolverá desde «begin» hasta el final del array.
    • slice( begin [,end] );
var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );

//Ouput:
//arr.slice( 1, 2) : mango 
//arr.slice( 1, 3) : mango,banana

 

  • some -> Nos permite conocer si alguno de los elementos del array pasa la prueba que le especificaremos en la función dada como parámetro.
    • some(callback[, thisObject]);
function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval ); 
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );

//Ouput:
//Returned value is : false 
//Returned value is : true
    • A diferencia de «every», que tienen que ser todos los valores para que pase el test, la función «some» basta con que solo sea un valor para que pase dicho test.

 

  • sort -> Nos permite ordenar un array mediante la comparación sobre una función dada.
    • sort( compareFunction );
var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );

//Ouput: Returned string is : banana,mango,orange,sugar
    • Al no pasarle una función de ordenación, y ser cadenas de texto los valores, los ordenará alfabéticamente.

 

  • splice -> Nos permite modificar el contenido de los elementos de un array. Los nuevo elementos modificarán el valor de los antiguos elementos. «Index» será el índice desde donde comenzaremos a modificar, «howMany» cuantos elementos se modificarán a partir del index.
    • splice(index, howMany, [element1][, …, elementN]);
var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );  
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  
console.log("removed is: " + removed);

//Ouput:
//After adding 1: orange,mango,water,banana,sugar,tea 
//removed is:  
//After removing 1: orange,mango,water,sugar,tea 
//removed is: banana

 

  • toString -> Retornará una cadena de texto que contiene un formato legible por un humano de los elementos que contiene dicho array.
    • toString();
var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );

//Ouput: Returned string is : orange,mango,banana,sugar

 

  • unshift -> Nos permite agregar uno, o más, elementos al comienzo del array y nos retornará la nueva longitud.
    • unshift( element1, element2, …, elementN );
var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );
console.log("Length of the array is : " + length );

//Ouput:
//Returned array is : water,orange,mango,banana,sugar 
//Length of the array is : 5

 

Info adicional

Pues cómo en todos los artículos que hago en el blog, espero haberte ayudado a solucionar tu problema. O, por lo menos, haberte entretenido un poco para evadirte.

Si ha sido así, me gustaría que te suscribieras al canal, es importante para mí para saber si el contenido ha conseguido su objetivo. Y es importante para ti porque así no te perderás ninguno de los contenidos que voy subiendo que te pueden ser de utilidad.

Aunque si no te gusta YT, también puedes suscribirte a El Circulo. En resumen, es una comunidad que estoy montando alrededor del desarrollo de apps en la que te enseñaré a hacerte un sueldo mediante la programación móvil.

Sin nada más que agregar, me despido ya. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.