Skip to content

4. Las tablas

Image

4.1. script [tab-01]

El siguiente script ilustra algunas características de las matrices de JavaScript. Estas se parecen a las matrices PHP, aunque 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 al mismo array;

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 matriz 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 forma 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 mostrar el contenido de un array
show(1);
console.log("tab=", tab);
show(2);
// recorrido de la matriz 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 matriz 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 añade un elemento al final de la matriz
tab.push('xyz');
console.log("tab=", tab);
show(7);
// se añade un elemento al principio de la tabla
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// se elimina el primer elemento de la matriz
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 de la tabla 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 queda ilustrada 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 propio array. Este último puede modificarse.

  • Líneas 14-16: el array [tab] se recorre mediante 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 habitual 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 denomina notación «flecha» o «arrow»;
  • el resto del código se explica mediante los comentarios;

De este script, cabe destacar que:

  • una matriz 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 especificado ningún valor inicial para este acumulador, este 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] tiene 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 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 matriz;
  • 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 la búsqueda por el final de la matriz;
  • línea 47: el método [sort] sin parámetros devuelve una matriz ordenada según el 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 para comparar dos elementos de la matriz;

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.