Saber como organizar, acessar e editar dados utilizando estruturas padrões da linguagem é uma das chaves para desenvolver aplicações mais performáticas.
Para esse artigo, vamos falar de forma rápida sobre um dos tipos de estruturas disponibilizadas no Javascript: Vetores.
Vetores
Os vetores, mais comumente chamados de arrays, em sua forma mais simples são unidimensionais, ou seja, possuem internamente apenas tipos primitivos e imutáveis de dados, e podem ser heterogêneos, ou seja, ser compostos por tipos diferentes desses dados na mesma estrutura:
const arr = [1, 'hello', undefined, null, 2.8]
Cada item possui um índice (index) que corresponde a posição desse elemento dentro do vetor, iniciando sempre pela posição Zero, e é por meio desse index que temos a primeira forma de acesso aos dados do array:
const arr = ['hello', 'world']
console.log(arr[0]) // hello
console.log(arr[1]) // world
Utilizando esse mesmo conceito podemos também alterar os dados internos de um vetor ou adicionar novos dados por meio de um índice:
const arr = ['hello', 'world']
arr[0] = 'Alexandre'
arr[1] = 'Bekor'
arr[2] = '!'
console.log(arr) // ['Alexandre', 'Bekor', '!']
Manipulação de Vetores
Na maioria das vezes estamos lidando com vetores dinâmicos, ou seja, arrays de recebem entradas e saídas de dados com tamanhos que podem variar durante o seu uso na aplicação, por isso fica difícil utilizar um método de consulta, alteração ou atualização tão estático como os mostrados anteriormente.
Por isso foram criadas funções que facilitam a interação com os vetores de forma muito mais dinâmica.
Adicionar um ou mais itens
Para adição de itens temos:
-
push: adiciona os itens que recebe como parâmetro ao final do vetor -
unshift: adiona os itens que recebe como parâmetro no início do vetor
const arr = [3, 4, 5]
const arr.push(6, 7, 8) // [3, 4, 5, 6, 7, 8]
const arr.unshift(1, 2) // [1, 2, 3, 4, 5, 6, 7, 8]
Remover um item
Para remoção de um item também temos outras duas funções:
-
pop: que remove o último item do vetor -
shift: remove o primeiro item do vetor
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const arr.pop() // [1, 2, 3, 4, 5, 6, 7]
const arr.shift() // [2, 3, 4, 5, 6, 7]
Como deve ter notado, essas funções não recebem nenhum parâmetro, ou seja, removem apenas um item por vez e apenas na primeira ou última posição.
Remover um ou mais itens
Para quando precisamos remover um ou mais itens e que não estejam necessariamente no início ou final do vetor temos a função splice:
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr.splice(3, 3) // [1, 2, 3, 7]
Essa função pode receber até três elementos, como demonstrado no exemplo acima temos:
-
3: índice do primeiro elemento do intervalo de deleção -
2: quantidade de elementos que serão deletados, a partir do, e incluindo, o primeiro elemento do intervalo de deleção -
'item 02', 'item 3': opcionalmente os itens que serão inclusos no lugar do intervalo deletado
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr.splice(3, 2, 'item 02', 'item 03') // [1, 2, 3, 'item 02', 'item 03', 7]
Extrair um intervalo de itens para um novo array
Além da habilidade de adicionar ou remover itens diretamente de um vetor, existem situações em que precisaremos extrair dados sem alterar o array original, para isso temos a função slice:
const arr = [1, 2, 3, 4, 5, 6, 7]
const newArr = arr.slice(2, 4) // []
Cuidado para não confundir com a função splice!
Nesse caso, a função slice recebe apenas dois argumentos e, similar a função anterior, eles representam um intervalo só que, com uma sutil diferença, enquanto o primeiro representa o índice onde o intervalo que será extraído inicia, o segundo representa o índice do último item, porém sem incluí-lo.
Como essa função gera um novo array copiando o itens com a regra proposta, não se esqueça de atribuí-lo a uma nova variável, como fiz quando declarei const newArr =.
Copiando todos os itens
O ES6 adicionou um atalho para a cópia de todos os itens de um array que vale muito a pena ser mencionado! O spread operator, que é um operador que 'espalha' os itens internos de um array onde ele é declarado:
const arr = [1, 2, 3, 4, 5]
const newArr = [...arr] // [1, 2, 3, 4, 5]
A sua facilidade de uso nos permite realizar adições melhor elaboradas como:
const arr = [4, 5, 6]
const newArr = [1, 2, 3, ...arr, 7, 8] // [1, 2, 3, 4, 5, 6, 7, 8]
Apesar de ter me aprofundado em estruturas um pouco mais complexas e teóricas acredito que transmitir um pouco dessa base mais simples, no primeiro momento, mantenha um histórico mais agradável dos meus artigos, documentando um processo evolutivo mais organizado.
Por isso por hoje é só 😄.
Mas o desafio continua e amanhã nos vemos novamente!
Outros Canais
Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:
Top comments (0)