Dia 17: Não faça confusão com arrays, conheça coleções indexadas e chaveadas no JavaScript

#Informática Básica
#JavaScript
#Arquitetura de Sistemas

Dia 17: Não faça confusão com arrays, conheça coleções indexadas e chaveadas no JavaScript

Dia 17 - 6 Métodos para manipular listas ou coleções da sua linguagem favorita

Bem vindo jovem padawan, quem diria estamos a 4 artigos do final, mas você não ficara sozinho o tiozão adora escrever, contando um pouco de história compartilhando um pouco das minhas aventuras e desventuras no CPD.

Muita muita coisa nestes anos todos, ficando muito mais fácil trabalhar com listas e coleções, vou aproveitar o artigo para dar uma ajudinha nesse assunto, neste artigo vamos embaralhar e zoar um pouco sobre o assunto. Vamos nessa Vanessa?

Recapitulando.

Se chegou agora está meio atrapalhado. Estão vamos por partes, começarei a falar do arrays. Quando codificamos muitas vezes precisamos de trabalhar com múltiplos valores para a mesma variável, antigamente na época do mainframe, usamos redefiniçao posicional para identificar e processar estas variáveis.

Alguém gritou da arquibancada: _Pera ai tiozão... esta muito confuso e apressado essa historia.. .

Vamos voltar ao princípio de tudo, la tras no tempo alguns no ginasial outros no colegial, aprendemos Matrizes e por ai que vou recomeçar.

Matrizes

Lembrou? O Tiozão ajuda, relembrando Matriz é uma tabela organizada em linhas e colunas no formato m x n, onde m representa o número de linhas (horizontal) e n o número de colunas (vertical).

Exemplo:

1, 9

2, 4

3, 6

4, 1

Ou seja, temos a seguinte representação gráfica da matriz coluna

Uma boa maneira de relembrar, pense numa gaveta onde pode guardar o que quiser. (ajudou?), fazendo o gancho, Array é a aplicação pratica das matrizes.

Agora vamos complicar um pouco mais, as vezes necessitamos de mais organização dentro da gaveta, por isso existe Matrizes dentro de Matrizes, ou melhor Array dos Arrays, conseguindo colocar mais dimensões e mais confusão na sua vida jovem padowan.

Importante antes de prosseguir

Caro padawan o tema abaixo pode gerar um pouco de medo, achar que é extremamente difícil, coisa e tal, porém trabalhar com Matrizes é pão de cada dia, sao extremamente uteis para economizar memoria e processamento de CPU. Criando em tempo de coleção um armário de gavetas onde guardamos tudo e mais alguma coisa. Antes de prosseguir apresento mais dois termos técnicos Coleções Indexadas e Coleções chaveadas.

Eu trabalhei muitos anos em mainframe e usamos o conceito de redefine por registros, onde pegávamos uma longa e extensa fileiras de bytes e separávamos por posição contadas bytes a bytes, era uma coisa de loucos, principalmente quando encontrávamos números fixed e bin fixed, quando descobri as coleções, amei de coração, pois uma vez definido e so incluir ou excluir elementos.

Estude bem o funcionamento, procure mais exemplos, pois afirmo do alto da experiência de quase 4 décadas em informática, em todo projeto sempre haverá um momento que ira trabalhar com arrays, nos desafios de código existem varias aplicações, faça com atenção, tente e experimente.

Coleção Indexadas

Imagine uma gaveta onde procuramos objetos por ordem de armazenamento ou posição da fila, independente do valor armazenado.

Array no Javascript

Feita esta pequena apresentação , agora iremos voltar ao Javascript, de acordo com o sábio Mozzila o objeto Array do JavaScript é um objeto global usado na construção de 'arrays': objetos de alto nível semelhantes a listas.

Que de acordo com a nossa necessidade vamos povoando e populando sua estrutura. Uma dica importante, para os novatos não afeta, mas os tiozão sempre escorregam, os índices da colunas iniciam-se com 0 (no passado era diferente, mas fica para outro dia).

var DioArtigos = ['Dia 1', 'Dia 2', 'Dia 3', 'Dia 4', ];
console.log(DioArtigos.length);
// 4

Acessando um array

var primeiro = DioArtigos [0]; // Dia 1
var ultimo = DioArtigos [DioArtigos.length - 1];  // Dia 4

Iterar um Array

DioArtigos.forEach(function (item, indice, array) {
 console.log(item, indice);
});
// Dia 1 0
// Dia 2 1

Adicionar um item ao final do Array

var adicionar = DioArtigos.push(' Dia 5');
// [' Dia 1', ' Dia 2', ' Dia 3', ' Dia 4', ' Dia 5']

Remover um item do final do Array

var ultimo = DioArtigos.pop(); // remove , ' Dia 5' (do final)
// [' Dia 1', ' Dia 2', ' Dia 3', ' Dia 4']

Remover do início do Array

var primeiro = DioArtigos.shift(); // remove Dia 1
// [' Dia 2', ' Dia 3', ' Dia 4']

Adicionar ao início do Array

var adicionar = DioArtigos.unshift(' Dia 1N'') // adiciona ao início
// [' Dia 1N', ' Dia 2', ' Dia 3', ' Dia 4']

Procurar o índice de um item na Array

DioArtigos.push('Dia 5');
// [' Dia 1N', ' Dia 2', ' Dia 3', ' Dia 4', ' Dia 5']
var pos = DioArtigos.indexOf('Dia 1');
// 1

Remover um item pela posição do índice

var removedItem = DioArtigos.splice(pos, 1); // é assim que se remove um item
// [' Dia 2', ' Dia 3', ' Dia 4', ' Dia 5']

Remover itens de uma posição de índice

var DesafioDio = DioArtigos.slice();
console.log(DesafioDio);
// [' Dia 2', ' Dia 3', ' Dia 4', ' Dia 5']

var pos = 1, n = 2;
var itensRemovidos = DesafioDio.splice(pos, n);
// Isso é como se faz para remover itens, n define o número de itens a se remover,
// a partir da posição (pos) em direção ao fim da array.

console.log(DesafioDio);
// [' Dia 4', ' Dia 5'] (o array original é alterado)

console.log(itensRemovidos);
// [' Dia 2', ' Dia 3']

Copiar um Array

var copiar = DioArtigos.slice(); // é assim que se copia
// [' Dia 2', ' Dia 3']
 console.log(Object.keys(DioArtigos)); // ['0', '1', '2', '5']

Coleções chaveadas

Imagine uma gaveta onde pode encontrar um objeto armazenado tanto pela ordem de inclusão, como por uma chave de pesquisa.

Maps, Sets, WeakMaps, WeakSets

Permite múltiplas maneiras de acessar e trabalhar com objetos, abaixo explico com mais detalhes e exemplos a todos.

MAPS

O Maps é um cara bem legal, imagine que você tem um array e precisa atualizar todos os dados de uma única vez. Neste exemplo hipotético vamos elevar os números ao quadrado, pensou como seria a logica? Antes teríamos que fazer um a um, varrendo todo o array. Com o Map nossos problemas acabaram, veja como.

var numeros = [1, 2, 3, 4, 5]; //vetor original
var quadrados = numeros.map(function(item){
return Math.pow(item, 2); //retorna o item original elevado ao quadrado
});
document.write(quadrados); //imprime 1,4,9,16,25

As possibilidades são muitas, economizando linhas de código e evitando erros, pois o MAP atua dentro do array inteiro, escapando de montoeira de código.

SETS

O set tem um funcionamento similar com o array, com uma grande vantagem, ele nao aceita itens duplicados, servindo como uma coleção índice. Permite iterações e navegações economizando código e dedos

var meuSet = new Set();
meuSet.add(1); // meuSet [1]
meuSet.add(5); // meuSet [1, 5]
meuSet.add(5); // 5 já foi adicionando, portanto, meuSet [1, 5]

Permite trabalhar com todas as operações de conjunto: união, interseção, diferenças, diferença simétrica, produto cartesiano e conjunto das partes.

WeakMaps

Funciona igual ao MAPS, apresentando alguma peculiaridades, servindo com um dicionario com chaves e valores.

Só aceita objetos como chave
Não é enumerável, ou seja, não permite listar as chaves
Referências às chaves são sempre referências fracas

Exemplo:

var dic = new WeakMap()

//chaves
var chaveA = { chave: 'A' };
var chaveB = { chave: 'B' };
var chaveC = { chave: 'C' };

// adicionando objetos
dic.set(chaveA, 1);
dic.set(chaveB, "dois");
dic.set(chaveC, new Date(2018,06,13));

// verificando objetos
console.log("existe objeto 'A':" + dic.has(chaveA));

// recuperando
console.log("valor do objeto 'A':" + dic.get(chaveA));
console.log("valor do objeto 'B':" + dic.get(chaveB));
console.log("valor do objeto 'C':" + dic.get(chaveC));

// excluindo
dic.delete(chaveA);
console.log("existe objeto 'A':" + dic.has(chaveA));

Preciso explorar mais e conhecer a real funcionalidade e facilidade nesta ferramenta.

WeakSets

Segue as mesmas propriedades do SETS, porem tem fraca referencia, podendo armazenar diversos itens

var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo);  // false, foo não foi adicionado ao set
ws.delete(window); // remove window do set
ws.has(window);  // false, window foi removido

Conclusão,

Este artigo teve como objetivo apresentar ao jovem padawan, uma visão sobre coleções e seu possível uso no dia a dia da programação. O ECMA 6 trouxe muito mais poder e facilitou o uso das coleções indexadas, elevando o Javascript para outro nível, muito mais próximo das linguagens parrudas, tornando-o um Javascript tonificado. Caso tenha alguma duvida deixe nos comentários, juntos somos mais fortes.

Trabalho em curso, melhorando sempre.

Espero ter ajudado, lembre-se que é um trabalho continuo.

Mais momento jabá, para distrair uma visita ao Faroeste no Beto Carreiro World, visite meu vídeo e veja para onde fui desta vez: https://www.youtube.com/watch?v=hal-vmDcTxg