Skip to content

4. Las tablas

Image

4.1. script [tab-01]

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


'«use strict»;

// un array es un objeto que se maneja a través de su dirección
const tab1 = [1, 2, 3];
// copia de direcciones
const tab2 = tab1;
// tab1 y tab2 apuntan al mismo array
console.log("tab1===tab2 :", tab1 === tab2);
// se puede modificar el array utilizando indistintamente tab1 o tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
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 a la misma matriz;

4.2. script [tab-02]

Este script muestra que el array de JavaScript es diferente de los arrays de los lenguajes compilados.


'use strict';

// matriz
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// inicialización de un elemento
tab[3] = 100;
tab[1] = "huit";
// matriz
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// las claves de la tabla son sus índices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// los valores del array
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • línea 4: un array vacío;
  • línea 8: un array no tiene un tamaño fijo. Es simplemente una secuencia de elementos indexados por un número. Se puede inicializar el elemento n.º 3 aunque los elementos [0, 1, 2] aún no estén definidos;
  • líneas 16-24: un array de JavaScript se comporta de manera similar al array PHP;

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. script [tab-03]

Este script muestra diferentes métodos del objeto [tableau].


'use strict';
// un array puede contener diferentes tipos de datos
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log sabe cómo mostrar el contenido de un array
show(1);
console.log("tab=", tab);
show(2);
// recorrido de la tabla con foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// otra forma de escribir el mismo código
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// recorrido de la tabla con for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// modificación de tab[i]
tab[5] = [];
// visualización
console.log("tab=", tab);
show(5);
// se elimina el último elemento
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// se agrega un elemento al final de la matriz
tab.push('xyz');
console.log("tab=", tab);
show(7);
// se agrega un elemento al inicio de la tabla
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// se elimina el primer elemento de la tabla
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// se elimina el elemento n.º 2 de la tabla
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// se eliminan del array dos elementos a partir del elemento n.º 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// función
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Comentarios

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

En la línea 3, lo que se declara como constante es el puntero que apunta al array, no el array en sí. Este último puede modificarse.

  • líneas 14-16: el array [tab] se recorre utilizando un método [forEach] del array [tab]. Este método recibe como parámetro la definición de una función, a la que podríamos llamar función literal. Esta función parámetro recibe un parámetro: el elemento actual de la matriz [tab]. La función se invoca para cada elemento de la matriz. Este tipo de sintaxis es común en JavaScript;
  • líneas 9-10: se utiliza otra sintaxis para definir la función de parámetro. En lugar de escribir:
    • function(p1, p2, …, pn){….}

se escribe:

  • (continuación)
    • (p1, p2, …, pn) => {…}. A esto se le llama notación de «flecha» o «arrow»;
  • el resto del código se explica mediante los comentarios;

De este script, cabe destacar que:

  • un array es un objeto al que se hace referencia mediante un puntero;
  • que este objeto tiene métodos [forEach, pop, push, shift, unshift];

4.4. script [tab-04]

Este script presenta otros métodos de los objetos de matriz.


'use strict';

// método de manipulación de matrices

// un array
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// visualización
console.log("tab=", tab);
// mapa
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// visualización
console.log("tab=", tab);
console.log("tab2=", tab2);
// reducir sin valor inicial
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reducción con valor inicial
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filtro
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// buscar
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// resultado
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// orden inverso
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

Comentarios

  • líneas 13-15: el método [map] admite una función de transformación como parámetro. Esta función se invoca repetidamente para cada elemento de la matriz. Se encarga de transformar dicho elemento en otra cosa, en este caso un objeto con las propiedades [prop1, prop2]. El método [map] devuelve una nueva matriz. La anterior no se modifica: 

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 método [reduce] admite como parámetro una función con dos parámetros que se invoca repetidamente para cada elemento de la tabla. Esta función admite dos parámetros:
    • [currentValue] es el elemento actual de la matriz;
    • [accumulator] es el último resultado obtenido por la función. Si no se ha establecido ningún valor inicial para este acumulador, entonces será 0;
    • la primera vez que se invoca la función de acumulación, devuelve [0+tab[0]]. Este es el valor que se asigna al acumulador;
    • la segunda vez, devuelve acumulador+tab[1], es decir, tab[0]+tab[1];
    • la tercera vez, devuelve acumulador+tab[2], es decir, tab[0]+tab[1]+tab[2];
    • etc. Al final, el acumulador representará la suma de todos los elementos de la matriz [tab];
  • línea 26: el método [filter] toma como parámetro una función de filtrado. Esta función se invoca repetidamente para cada elemento de la matriz y recibe dicho elemento como parámetro. Debe devolver:
    • [true] si el elemento debe conservarse;
    • [false] en caso contrario;
  • línea 33: el método [find] tiene como parámetro una función de búsqueda. Esta función se invoca repetidamente para cada elemento de la matriz y recibe dicho elemento como parámetro. Debe devolver [true] si el elemento recibido cumple con el criterio de búsqueda. En ese caso, la función se detiene. Por lo tanto, el método [find] devuelve 0 o 1 elemento;
  • línea 36: el método [findIndex] funciona igual que el método [find], pero en lugar de devolver el elemento encontrado, devuelve su índice en la tabla;
  • líneas 39 y 41: el método [indexOf(valeur)] busca [valeur] en la matriz y devuelve su índice, o -1 si no lo encuentra;
  • línea 44: el método [lastIndexOf(valeur)] funciona igual que el método [indexOf(valeur)], pero comienza su búsqueda por el final de la tabla;
  • línea 47: el método [sort] sin parámetros devuelve una tabla ordenada en orden natural (números, cadenas);
  • línea 50: cuando el orden natural no es adecuado, hay que pasar al método [sort] una función con dos parámetros (e1, e2) que devuelve:
    • +1 si e1 debe clasificarse después de e2;
    • -1 si e1 debe clasificarse antes que e2;
    • 0 si ambos elementos deben tener la misma posición;

La función pasada como parámetro al método [sort] es llamada repetidamente por este último para comparar dos elementos de la tabla;

https://stahe.github.io
Este curso-tutorial, escrito por Serge Tahé, se pone a disposición del público de acuerdo con los términos de la Creative Commons Reconocimiento – Sin uso comercial – Compartir igual 3.0 sin modificaciones.