Skip to content

4. Tablas

Image

4.1. script [tab-01]

El siguiente script ilustra algunas características de las matrices de JavaScript. Se parecen a las matrices de PHP, pero con una diferencia importante: se manipulan mediante punteros y se consideran objetos.


1. 'use strict';
2. 
3. // An array is an object manipulated via its address
4. const tab1 = [1, 2, 3];
5. // copying addresses
6. const tab2 = tab1;
7. // tab1 and tab2 point to the same array
8. console.log("tab1===tab2 :", tab1 === tab2);
9. // You can modify the array using either tab1 or tab2
10. tab2[1] = 10;
11. console.log("tab1=", tab1);
12. console.log("tab2=", tab2);

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
2. tab1===tab2: true
3. tab1= [ 1, 10, 3 ]
4. tab2= [ 1, 10, 3 ]

Comentarios

  • La línea 2 de los resultados muestra que [tab1] y [tab2] son dos entidades iguales, de hecho dos punteros iguales;
  • Las líneas 4 y 5 de los resultados muestran que estos dos punteros apuntan al mismo array;

4.2. script [tab-02]

Este script demuestra que las matrices de JavaScript difieren de las matrices de los lenguajes compilados.


1. 'use strict';
2. 
3. // array
4. const tab = [];
5. console.log("tab=", tab, ", length=[", tab.length, "]");
6. console.log("-------------------------------");
7. // initializing an element
8. tab[3] = 100;
9. tab[1] = "eight";
10. // array
11. console.log("tab=", tab, ", length=[", tab.length, "]");
12. console.log("-------------------------------");
13. // toString
14. console.log("tab.toString=[", tab.toString(), "]");
15. console.log("-------------------------------");
16. // the keys of the array are its indices
17. for (let key of tab.keys()) {
18.   console.log("key=[", key, "], value=[", tab[key], "]");
19. }
20. console.log("-------------------------------");
21. // the array's values
22. for (let value of tab.values()) {
23.   console.log("value=[", value, "]");
24. }
  • línea 4: una matriz vacía;
  • línea 8: un array no tiene un tamaño fijo. Es simplemente una secuencia de elementos indexados por un número. Puedes inicializar el elemento #3 incluso si los elementos [0, 1, 2] aún no están definidos;
  • líneas 16-24: Un array JavaScript se comporta de forma similar a un array PHP;

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
2. tab= [] , length=[ 0 ]
3. -------------------------------
4. tab= [ <1 empty item>, 'eight', <1 empty item>, 100 ] , length=[ 4 ]
5. -------------------------------
6. tab.toString=[ ,eight,,100 ]
7. -------------------------------
8. key=[ 0 ], value=[ undefined ]
9. key=[ 1 ], value=[ eight ]
10. key=[ 2 ], value=[ undefined ]
11. key=[ 3 ], value=[ 100 ]
12. -------------------------------
13. value=[ undefined ]
14. value=[ eight ]
15. value=[ undefined ]
16. value=[ 100 ]

4.3. script [tab-03]

Este script demuestra varios métodos del [array] objeto.


1. 'use strict';
2. // An array can contain different types of data
3. const tab = [1, 2, "one", "two", true, [10, 20], { prop1: 10, prop2: "abc" }];
4. // console.log can display the contents of an array
5. show(1);
6. console.log("tab=", tab);
7. show(2);
8. // Iterate through the array using foreach
9. tab.forEach(element => {
10.   console.log("element=", element, typeof (element));
11. });
12. show("2b");
13. // another way to do the same thing
14. tab.forEach(function (element) {
15.   console.log("element=", element, typeof (element));
16. });
17. show(3);
18. // Iterate through the array using for
19. for (let i = 0; i < tab.length; i++) {
20.   console.log("i=", i, "tab[i]=", tab[i]);
21. }
22. show(4);
23. // modify tab[i]
24. tab[5] = [];
25. // display
26. console.log("tab=", tab);
27. show(5);
28. // remove the last element
29. let element = tab.pop(tab);
30. console.log("element=", element, "tab=", tab);
31. show(6);
32. // add an element to the end of the array
33. tab.push('xyz');
34. console.log("tab=", tab);
35. show(7);
36. // Add an element to the beginning of the array
37. tab.unshift(1000);
38. console.log("tab=", tab);
39. show(8);
40. // Remove the first element from the array
41. element = tab.shift();
42. console.log("element=", element, "tab=", tab);
43. show(9);
44. // Remove the second element from the array
45. element = tab.splice(2, 1);
46. console.log("element=", element, "tab=", tab);
47. show(10);
48. // Remove two elements from the array starting with element #1
49. element = tab.splice(1, 2);
50. console.log("element=", element, "tab=", tab);
51. 
52. // function
53. function show(param) {
54.   console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
55. }

Comentarios

  • La diferencia entre las matrices PHP y las matrices JavaScript se ilustra en las líneas 3 y 24:
    • La línea 3 declara la variable [tab] como constante;
    • La línea 24 modifica el elemento tab[5];

En la línea 3, es el puntero que apunta al array el que se declara constante, no el array en sí. El array en sí puede ser modificado.

  • Líneas 14-16: Se itera sobre la [tab] matriz utilizando el [forEach] método de la [tab] matriz. Este método toma como parámetro la definición de una función, que podría llamarse función literal. Esta función toma un parámetro: el elemento actual de la [tab] matriz. La función es llamada para cada elemento del array. Este tipo de sintaxis es común en JavaScript;
  • líneas 9-10: utilizamos una sintaxis diferente para definir la función. En lugar de escribir:
    • function(p1, p2, ..., pn){....}

escribimos:

  • (continuación)
    • (p1,p2, ..,pn)=>{....}. Esto se denomina notación "flecha";
  • El resto del código se explica en los comentarios;

Desde este script, observa que:

  • un array es un objeto referenciado por un puntero;
  • este objeto tiene métodos [forEach, pop, push, shift, unshift];

4.4. script [tab-04]

Este script introduce otros métodos de objetos array.


1. 'use strict';
2. 
3. // array manipulation method
4. 
5. // an array
6. const tab = [];
7. for (let i = 0; i < 10; i++) {
8.   tab[i] = i * 10;
9. }
10. // display
11. console.log("tab=", tab);
12. // map
13. const tab2 = tab.map(element => {
14.   return { prop1: element, prop2: element * element }
15. });
16. // display
17. console.log("tab=", tab);
18. console.log("tab2=", tab2);
19. // reduce without initial value
20. const sum = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
21. console.log("sum tab=", sum);
22. // reduce with initial value
23. const sum2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
24. console.log("sum2 tab=", sum2);
25. // filter
26. const tab4 = tab.filter((element) => {
27.   if (element > 50) {
28.     return element;
29.   }
30. });
31. console.log("tab4=", tab4);
32. // find
33. const element1 = tab.find((element) => (element > 20));
34. console.log("element1=", element1);
35. // findIndex
36. const index1 = tab.findIndex((element) => (element === 20));
37. console.log("index1 20=", index1);
38. // indexOf
39. const index2 = tab.indexOf(30);
40. console.log("index2 30=", index2);
41. const index3 = tab.indexOf(31);
42. console.log("index3 31=", index3);
43. // lastIndexOf
44. const index4 = [4, 5, 4, 2].lastIndexOf(4);
45. console.log("index4 4=", index4);
46. // sort
47. const tab5 = [4, 5, 4, 2].sort();
48. console.log("tab5=", tab5);
49. // reverse sort
50. const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
51.   if (e1 > e2) {
52.     return -1;
53.   }
54.   else if (e1 === e2) {
55.     return 0;
56.   } else {
57.     return +1;
58.   }
59. });
60. console.log("tab6=", tab6);

Comentarios

  • líneas 13-15: El [map] método toma una función de transformación como parámetro. Esta función se llama repetidamente para cada elemento de la matriz. Es responsable de transformar el elemento en otra cosa-en este caso, un objeto con las propiedades [prop1, prop2]. El [map] método devuelve una nueva matriz. La matriz original permanece inalterada: 

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]
  • línea 20: El [reduce] método toma como parámetro una función de dos argumentos que se llama repetidamente para cada elemento del array. Esta función toma dos argumentos:
    • [currentValue] es el elemento actual de la matriz;
    • [acumulador] es el último resultado obtenido por la función. Si no se proporciona un valor inicial para este acumulador, entonces será 0;
    • la primera vez que se llama a la función de acumulación, ésta devuelve [0+tab[0]]. Este valor se asigna al acumulador;
    • la segunda vez, devuelve acumulador+tab[1], es decir, tab[0]+tab[1];
    • La tercera vez, devuelve acumulador + tab[2], que es tab[0] + tab[1] + tab[2];
    • etc. En última instancia, el acumulador representará la suma de todos los elementos de la matriz [tab];
  • línea 26: el [filtro] método toma una función de filtrado como parámetro. Esta función se llama repetidamente para cada elemento del array y recibe ese elemento como parámetro. Debe devolver:
    • [true] si el elemento debe conservarse;
    • [false] de lo contrario;
  • línea 33: el [find] método toma una función de búsqueda como parámetro. Esta función se llama repetidamente para cada elemento del array y recibe ese elemento como parámetro. Debe devolver [true] si el elemento recibido satisface los criterios de búsqueda. La búsqueda se detiene entonces. Por lo tanto, el método [find] devuelve 0 o 1 elemento;
  • línea 36: el [findIndex] método funciona como el [find] método, pero en lugar de devolver el elemento encontrado, devuelve su índice en el array;
  • líneas 39, 41: el [indexOf(valor)] método busca [valor] en el array y devuelve su índice, o -1 si no se encuentra;
  • línea 44: el [lastIndexOf(value)] método funciona como el [indexOf(value)] método pero inicia su búsqueda desde el final del array;
  • línea 47: el [sort] método sin parámetros devuelve un array ordenado en orden natural (números, cadenas);
  • línea 50: cuando el orden natural no es adecuado, hay que pasar una función con dos parámetros (e1, e2) al [sort] método, que devuelve:
    • +1 si e1 debe ordenarse después de e2;
    • -1 si e1 debe ordenarse antes que e2;
    • 0 si ambos elementos deben tener el mismo rango;

La función pasada como parámetro al [sort] método es llamada repetidamente por éste para comparar dos elementos del array;

https://tahe.developpez.com
Este curso-tutorial escrito por Serge Tahé se pone a disposición del público según los términos de la Licencia Creative Commons Reconocimiento – Sin uso comercial – Compartir en las mismas condiciones 3.0 no adaptada.