TypeScript Array (matriz)

Los objetos de tipo array se utilizan para almacenar una serie de valores con un nombre de variable único.

Los arrays son muy utilizados.

Supongamos que tienes un conjunto de datos (por ejemplo, nombres de sitios web) almacenados en variables individuales como se muestra a continuación:

var site1="Google"; var site2="Ejemplo"; var site3="Taobao";

Si hay 10, 100 elementos, esta forma se vuelve muy poco práctica. En este caso podemos usar un array para resolverlo:

var sites:string[]; sites = ["Google","Ejemplo","Taobao"]

Así se ve mucho más simple.

La sintaxis para declarar un array en TypeScript es la siguiente:

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

O inicializarlo directamente en la declaración:

var array_name[:datatype] = [val1,val2…valn]

Si el array se declara sin especificar su tipo, se considerará de tipo `any`, y su tipo se inferirá según el tipo del primer elemento al inicializarlo.

Ejemplo

Crea un array de tipo number:

var numlist:number[] = [2,4,6,8]

La estructura completa del array es la siguiente:

El primer valor de índice es 0, y podemos acceder a los elementos del array mediante el índice:

TypeScript

var sites:string[]; sites = ["Google","Ejemplo","Taobao"] console.log(sites[0]); console.log(sites[1]);

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var sites; sites = ["Google", "Ejemplo", "Taobao"]; console.log(sites[0]); console.log(sites[1]);

El resultado de salida es:

Google
Ejemplo

En el siguiente ejemplo, inicializamos directamente en la declaración:

TypeScript

var nums:number[] = [1,2,3,4] console.log(nums[0]); console.log(nums[1]); console.log(nums[2]); console.log(nums[3]);

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var nums = [1, 2, 3, 4]; console.log(nums[0]); console.log(nums[1]); console.log(nums[2]); console.log(nums[3]);

El resultado de salida es:

1 
2 
3 
4

Objeto Array

También podemos usar el objeto Array para crear arrays.

El constructor del objeto Array acepta los siguientes dos tipos de valores:

  • Un valor numérico que indica el tamaño del array.
  • Una lista de array inicializada, con elementos separados por comas.

Ejemplo

Especificar el tamaño de inicialización del array:

TypeScript

var arr_names:number[] = new Array(4) for(var i = 0; i<arr_names.length; i++) { arr_names[i] = i * 2 console.log(arr_names[i]) }

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var arr_names = new Array(4); for (var i = 0; i < arr_names.length; i++) { arr_names[i] = i * 2; console.log(arr_names[i]); }

El resultado de salida es:

0
2
4
6

En el siguiente ejemplo, inicializamos directamente los elementos del array:

TypeScript

var sites:string[] = new Array("Google","Ejemplo","Taobao","Facebook") for(var i = 0;i<sites.length;i++) { console.log(sites[i]) }

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var sites = new Array("Google", "Ejemplo", "Taobao", "Facebook"); for (var i = 0; i < sites.length; i++) { console.log(sites[i]); }

El resultado de salida es:

Google
Ejemplo
Taobao
Facebook

Desestructuración de arrays

También podemos asignar los elementos de un array a variables, como se muestra a continuación:

TypeScript

var arr:number[] = [12,13] var[x,y] = arr //Asignar dos elementos del array a las variables x e y console.log(x) console.log(y)

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var arr = [12, 13]; var x = arr[0], y = arr[1]; //Asignar dos elementos del array a las variables x e y console.log(x); console.log(y);

El resultado de salida es:

12
13

Iteración de arrays

Podemos usar la sentencia `for` para recorrer y mostrar cada elemento del array:

TypeScript

var j:any; var nums:number[] = [1001,1002,1003,1004] for(j in nums) { console.log(nums[j]) }

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var j; var nums = [1001, 1002, 1003, 1004]; for (j in nums) { console.log(nums[j]); }

El resultado de salida es:

1001
1002
1003
1004

Arrays multidimensionales

Los elementos de un array pueden ser otro array, lo que constituye un array multidimensional (Multi-dimensional Array).

El tipo más simple de array multidimensional es el array bidimensional, definido de la siguiente manera:

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

Ejemplo

Define un array bidimensional, donde cada array de cada dimensión tiene tres elementos.

TypeScript

var multi:number[][] = [[1,2,3],[23,24,25]] console.log(multi[0][0]) console.log(multi[0][1]) console.log(multi[0][2]) console.log(multi[1][0]) console.log(multi[1][1]) console.log(multi[1][2])

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var multi = [[1, 2, 3], [23, 24, 25]]; console.log(multi[0][0]); console.log(multi[0][1]); console.log(multi[0][2]); console.log(multi[1][0]); console.log(multi[1][1]); console.log(multi[1][2]);

El resultado de salida es:

1
2
3
23
24
25

Uso de arrays en funciones

Pasar como parámetro a una función

TypeScript

var sites:string[] = new Array("Google","Ejemplo","Taobao","Facebook") function disp(arr_sites:string[]) { for(var i = 0;i<arr_sites.length;i++) { console.log(arr_sites[i]) } } disp(sites);

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var sites = new Array("Google", "Ejemplo", "Taobao", "Facebook"); function disp(arr_sites) { for (var i = 0; i < arr_sites.length; i++) { console.log(arr_sites[i]); } } disp(sites);

El resultado de salida es:

Google
Ejemplo
Taobao
Facebook

Como valor de retorno de una función

TypeScript

function disp():string[] { return new Array("Google", "Ejemplo", "Taobao", "Facebook"); } var sites:string[] = disp() for(var i in sites) { console.log(sites[i]) }

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

function disp() { return new Array("Google", "Ejemplo", "Taobao", "Facebook"); } var sites = disp(); for (var i in sites) { console.log(sites[i]); }

El resultado de salida es:

Google
Ejemplo
Taobao
Facebook

Métodos de arrays

La siguiente tabla enumera algunos métodos de array comunes:

N.º Método y descripción Ejemplo
1. concat()

Concatena dos o más arrays y devuelve el resultado.

 
var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3
2. every()

Comprueba si cada elemento del array cumple una condición.

 
function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false
3. filter()

Comprueba los elementos del array y devuelve un array con todos los elementos que cumplen la condición.

 
function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44
4. forEach()

Ejecuta una función de callback para cada elemento del array.

 
let num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);
});

Se compila a código JavaScript:

var num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);  // 7   8   9
});
5. indexOf()

Busca un elemento en el array y devuelve su posición.

Si no lo encuentra, el valor devuelto es -1, lo que significa que no existe ese elemento.

 
var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2
6. join()

Convierte todos los elementos del array en una cadena.

 
var arr = new Array("Google","Ejemplo","Taobao"); 
          
var str = arr.join(); 
console.log("str : " + str );  // Google,Ejemplo,Taobao
          
var str = arr.join(", "); 
console.log("str : " + str );  // Google, Ejemplo, Taobao
          
var str = arr.join(" + "); 
console.log("str : " + str );  // Google + Ejemplo + Taobao
7. lastIndexOf()

Devuelve la última posición de un valor de cadena especificado, buscando de atrás hacia adelante desde una posición especificada en una cadena.

 
var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2
8. map()

Procesa cada elemento del array mediante una función especificada y devuelve el array procesado.

 
var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );  // 1,2,3
9. pop()

Elimina el último elemento del array y devuelve el elemento eliminado.

 
var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 9
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 4
10. push()

Agrega uno o más elementos al final del array y devuelve la nueva longitud.

 
var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
length = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20
11. reduce()

Reduce los elementos del array a un valor (de izquierda a derecha).

 
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
12. reduceRight()

Reduce los elementos del array a un valor (de derecha a izquierda).

 
var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
13. reverse()

Invierte el orden de los elementos del array.

 
var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0
14. shift()

Elimina y devuelve el primer elemento del array.

 
var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10
15. slice()

Selecciona una parte del array y devuelve un nuevo array.

 
var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  // mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );  // mango,banana
16. some()

Comprueba si algún elemento del array cumple la condición especificada.

 
function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval );  // false
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );  // true
17. sort()

Ordena los elementos del array.

 
var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar
18. splice()

Añade o elimina elementos del array.

 
var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
console.log("removed is: " + removed);  // banana
19. toString()

Convierte el array en una cadena y devuelve el resultado.

 
var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar
20. unshift()

Agrega uno o más elementos al principio del array y devuelve la nueva longitud.

 
var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );  // water,orange,mango,banana,sugar 
console.log("Length of the array is : " + length ); // 5
Otras extensiones