Skip to content

4. Tabelas

Image

4.1. script [tab-01]

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


'use strict';
 
// an array is an object manipulated via its address
const tab1 = [1, 2, 3];
// address copying
const tab2 = tab1;
// tab1 and tab2 point to the same table
console.log("tab1===tab2 :", tab1 === tab2);
// the table can be modified using either tab1 or 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 demonstra que as matrizes JavaScript diferem das matrizes em linguagens compiladas.


'use strict';
 
// table
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// element initialization
tab[3] = 100;
tab[1] = "huit";
// table
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// the keys to the picture are its indices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// table values
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • linha 4: um array vazio;
  • linha 8: um array não tem um tamanho fixo. É simplesmente uma sequência de elementos indexados por um número. Pode inicializar o elemento #3 mesmo que os elementos [0, 1, 2] ainda não estejam definidos;
  • linhas 16–24: Uma matriz JavaScript comporta-se de forma semelhante a uma matriz 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 vários métodos do objeto [array].


'use strict';
// a table can contain different types of data
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log can display the contents of an array
show(1);
console.log("tab=", tab);
show(2);
// table path with foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// another script to do the same thing
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// table route with for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// change tab[i]
tab[5] = [];
// display
console.log("tab=", tab);
show(5);
// remove the last element
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// add an element to the end of the array
tab.push('xyz');
console.log("tab=", tab);
show(7);
// add an element at the beginning of the array
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// remove the 1st element from the array
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// remove element no. 2 from the table
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// remove two elements from the table, starting with element no. 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);
 
// function
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Comentários

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

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

  • Linhas 14–16: A matriz [tab] é iterada utilizando o método [forEach] da matriz [tab]. Este método recebe como parâmetro a definição de uma função, que poderia ser chamada de função literal. Esta função 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: usamos uma sintaxe diferente para definir a função. Em vez de escrever:
    • função(p1, p2, …, pn){….}

escrevemos:

  • (continuação)
    • (p1,p2, ..,pn)=>{.…}. Isto é chamado de notação «seta»;
  • O resto do código é explicado pelos comentários;

A partir deste script, note que:

  • uma matriz é um objeto referenciado por um ponteiro;
  • 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';
 
// table manipulation method
 
// a picture
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// display
console.log("tab=", tab);
// map
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// display
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce without initial value
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reduce with initial value
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filter
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// find
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);
// spell
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// reverse spell
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] recebe uma função de transformação como parâmetro. Esta função é chamada repetidamente para cada elemento da matriz. É responsável por transformar o elemento em outra coisa — neste caso, um objeto com as propriedades [prop1, prop2]. O método [map] devolve uma nova matriz. A 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 } ]
  • linha 20: O método [reduce] recebe como parâmetro uma função de dois argumentos que é chamada repetidamente para cada elemento da matriz. Esta função recebe dois argumentos:
    • [currentValue] é o elemento atual da matriz;
    • [accumulator] é o último resultado obtido pela função. Se não for fornecido nenhum valor inicial para este acumulador, então será 0;
    • na primeira vez que a função de acumulação é chamada, ela retorna [0+tab[0]]. Este valor é atribuído ao acumulador;
    • na segunda vez, retorna acumulador+tab[1], ou seja, tab[0]+tab[1];
    • Na terceira vez, ela retorna acumulador + tab[2], que é tab[0] + tab[1] + tab[2];
    • etc. Por fim, o acumulador representará a soma de todos os elementos da matriz [tab];
  • linha 26: o método [filter] recebe uma função de filtragem como parâmetro. Esta função é chamada repetidamente para cada elemento da matriz e recebe esse elemento como parâmetro. Deve devolver:
    • [true] se o elemento deve ser mantido;
    • [false] caso contrário;
  • linha 33: o método [find] recebe uma função de pesquisa como parâmetro. Esta função é chamada repetidamente para cada elemento da matriz e recebe esse elemento como parâmetro. Deve devolver [true] se o elemento recebido satisfizer os critérios de pesquisa. A pesquisa é então interrompida. 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 matriz;
  • linhas 39, 41: o método [indexOf(value)] procura [value] na matriz e devolve o seu índice, ou -1 se não for encontrado;
  • linha 44: o método [lastIndexOf(value)] funciona como o método [indexOf(value)], mas inicia a sua pesquisa a partir do fim da matriz;
  • linha 47: o método [sort] sem parâmetros devolve uma matriz ordenada por ordem natural (números, cadeias de caracteres);
  • linha 50: quando a ordem natural não for adequada, deve-se passar uma função com dois parâmetros (e1, e2) para o método [sort], que retorna:
    • +1 se e1 deve ser ordenado depois de e2;
    • -1 se e1 deve ser ordenado antes de e2;
    • 0 se ambos os elementos devem ter a mesma classificação;

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

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.