Skip to content

4. As tabelas

Image

4.1. script [tab-01]

O script seguinte ilustra algumas características das tabelas JavaScript. Estas assemelham-se às tabelas PHP, mas com uma grande diferença: são manipuladas através de ponteiros e são consideradas objetos.


'«use strict»;

// um array é um objeto manipulado através do seu endereço
const tab1 = [1, 2, 3];
// cópia de endereços
const tab2 = tab1;
// tab1 e tab2 apontam para o mesmo tabuleiro
console.log("tab1===tab2 :", tab1 === tab2);
// é possível alterar o tabuleiro utilizando indistintamente tab1 ou tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Execução


[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 ]

Comentários

  • a linha 2 dos resultados mostra que [tab1] e [tab2] são duas entidades iguais, na verdade dois ponteiros iguais;
  • as linhas 4 e 5 dos resultados mostram que estes dois ponteiros apontam para a mesma matriz;

4.2. script [tab-02]

Este script mostra que o array em JavaScript é diferente dos arrays nas linguagens compiladas.


'use strict';

// matriz
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// inicialização de um 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("-------------------------------");
// as chaves da tabela são os seus índices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// os valores da matriz
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • linha 4: um array vazio;
  • linha 8: um array não tem tamanho fixo. É simplesmente uma sequência de elementos indexados por um número. É possível inicializar o elemento n.º 3 mesmo que os elementos [0, 1, 2] ainda não estejam definidos;
  • linhas 16-24: um array JavaScript tem um comportamento semelhante ao do array PHP;

Execução


[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 demonstra diferentes métodos do objeto [tableau].


'use strict';
// um array pode conter diferentes tipos de dados
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// O console.log sabe apresentar o conteúdo de um array
show(1);
console.log("tab=", tab);
show(2);
// percorrer a tabela com foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// outra forma de escrever o mesmo código
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// percorrer a matriz com for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// alteração da tabulação [i]
tab[5] = [];
// exibição
console.log("tab=", tab);
show(5);
// remover o último elemento
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// adiciona-se um elemento ao final da matriz
tab.push('xyz');
console.log("tab=", tab);
show(7);
// adiciona-se um elemento ao início da tabela
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// remover o primeiro elemento da tabela
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// remove-se o elemento n.º 2 da tabela
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// removem-se da tabela dois elementos a partir do elemento n.º 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// função
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Comentários

  • A diferença entre as matrizes PHP e as matrizes JavaScript é ilustrada pelas linhas 3 e 24:
    • a linha 3 declara a variável [tab] como uma constante;
    • a linha 24 altera o elemento tab[5];

Na linha 3, é o ponteiro que aponta para a matriz que é declarado como constante, não a própria matriz. Esta pode ser alterada.

  • linhas 14-16: o tabuleiro [tab] é percorrido utilizando um método [forEach] do tabuleiro [tab]. Este método recebe como parâmetro a definição de uma função, à qual se poderia chamar função literal. Esta função parâmetro recebe um parâmetro: o elemento atual da matriz [tab]. A função é chamada para cada elemento da matriz. Este tipo de sintaxe é comum em JavaScript;
  • linhas 9-10: utiliza-se outra sintaxe para definir a função de parâmetro. Em vez de escrever:
    • function(p1, p2, …, pn){….}

escreve-se:

  • (continuação)
    • (p1,p2, ..,pn)=>{.…}. A isto chama-se notação «seta» ou «arrow»;
  • o resto do código é explicado pelos comentários;

Neste script, note-se que:

  • um array é um objeto referenciado por um ponteiro;
  • que este objeto possui métodos [forEach, pop, push, shift, unshift];

4.4. script [tab-04]

Este script apresenta outros métodos dos objetos de matriz.


'use strict';

// método de manipulação de matrizes

// um array
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// visualização
console.log("tab=", tab);
// mapa
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// visualização
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduzir sem valor inicial
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// redução com valor inicial
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filtrar
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// localizar
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);
// ordenação inversa
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);

Comentários

  • linhas 13-15: o método [map] aceita uma função de transformação como parâmetro. Esta é chamada repetidamente para cada elemento da matriz. Tem a função de transformar esse elemento noutra coisa, neste caso, um objeto com as propriedades [prop1, prop2]. O método [map] devolve um novo tabelo. O antigo não é alterado: 

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 } ]
  • linha 20: o método [reduce] aceita como parâmetro uma função com dois parâmetros, chamada repetidamente para cada elemento da tabela. Esta função aceita dois parâmetros:
    • [currentValue] é o elemento atual da matriz;
    • [accumulator] é o último resultado obtido pela função. Se não for definido nenhum valor inicial para este acumulador, então este será 0;
    • na primeira vez que a função de acumulação é chamada, ela devolve [0+tab[0]]. É este valor que é atribuído ao acumulador;
    • na segunda vez, devolve acumulador+tab[1], ou seja, tab[0]+tab[1];
    • na terceira vez, atribui ao acumulador +tab[2], ou seja, tab[0] + tab[1] + tab[2];
    • etc. No final, o acumulador representará a soma de todos os elementos da matriz [tab];
  • linha 26: o método [filter] tem como parâmetro uma função de filtragem. Esta é chamada repetidamente para cada elemento da matriz e recebe esse elemento como parâmetro. Deve devolver:
    • [true] se o elemento tiver de ser mantido;
    • [false] caso contrário;
  • linha 33: o método [find] tem como parâmetro uma função de pesquisa. Esta é chamada repetidamente para cada elemento da matriz e recebe esse elemento como parâmetro. Deve devolver [true] se o elemento recebido satisfizer o critério de pesquisa. Nesse caso, a função termina. O método [find] devolve, portanto, 0 ou 1 elemento;
  • linha 36: o método [findIndex] funciona como o método [find], mas em vez de devolver o elemento encontrado, devolve o seu índice na tabela;
  • linhas 39 e 41: o método [indexOf(valeur)] procura [valeur] na tabela e devolve o seu índice, ou -1 caso não seja encontrado;
  • linha 44: o método [lastIndexOf(valeur)] funciona como o método [indexOf(valeur)], mas inicia a sua pesquisa pelo fim da tabela;
  • linha 47: o método [sort], sem parâmetros, devolve um tabuleiro ordenado na ordem natural (números, cadeias de caracteres);
  • linha 50: quando a ordem natural não for adequada, deve-se passar ao método [sort] uma função com dois parâmetros (e1, e2) que devolve:
    • +1 se e1 tiver de ser classificado depois de e2;
    • -1 se e1 tiver de ser classificado antes de e2;
    • 0 se ambos os elementos tiverem de ter a mesma classificação;

A função passada como parâmetro ao método [sort] é chamada repetidamente por este último para comparar dois elementos da tabela;

https://stahe.github.io
Este curso-tutorial escrito por Serge Tahé é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Partilha nas mesmas condições 3.0 não adaptada.