Usando Array no JavaScript, o que você precisa saber para iniciar

Aprenderemos nessa minha primeira publicação um pouco sobre Arrays (vetores) no JavaScript. Daremos uma sacada geral de como utilizar essa estrutura e como usar algumas propriedades e métodos.

4 min readNov 4, 2019

Pilha de livros em uma estante. Uma boa forma de representar uma lista de dados. — Pilha de livros. Fonte: https://pxhere.com/pt/photo/1555271

Como você bem deve saber um Array (vetor, lista, pilha…) é um tipo de estrutura de dados que armazena diversos tipos de informação de uma só vez. Isso significa que podemos armazenar em apenas uma variável tipos primitivos de dados diferentes (10, “texto”, false, 3.14, null, …).

A declaração de um array vazio é algo bem simples de fazer no JavaScript:

var vetor = new Array(); // usando o objeto Array do JSvar vetor2 = []; // ou usando os colchetes sem nada dentro

Ainda podemos passar alguns valores iniciais no momento da declaração do array:

var frutas = new Array("caju", "seriguela", "limão", "pitomba");
var frutas2 = ["cajá", "saputi", "cajarana", "ata"];

Agora vamos analisar como é a estrutura desse vetor frutas2

Representação de exemplo do vetor frutas2.

Os números acima das frutas cearenses está o número do respectivos índices dos valores, ou seja, para referenciar a posição de um valor usamos os índices.

alert(frutas[1]);
// Saída: saputi

O que devemos ficar atentos é que os índices sempre começam do número 0 e sempre termina com o índice do tamanho do vetor menos um (caso nenhum elemento tenha sido deletado, claro). Caso queira saber o tamanho do vetor use a propriedade length.

alert(frutas2.length);
// Saída: 4

A manipulação do vetor também pode ser feito por meio de seus índices. Vamos alterar um pouco os valores do vetor frutas2.

frutas2[0] = "acerola";
alert(frutas2);
// Saída: acerola,saputi,cajarana,ata

Existem algumas maneiras de visualizar cada elemento presente em um vetor. Para isso pode usar as estruturas de repetições (for, for..in, for..of) do JavaScript para que percorram o vetor.

// Para i de 0 até tamanho do vetor...
for(var i = 0; i < frutas2.length; i++){
   document.write(frutas2[i] + "<br>");
}// Para cada índice no vetor
for(var indice in frutas2){
   document.write(frutas2[indice]);
}// Para cada valor de vetor, essa eu gosto mais :)
for(var valor of frutas2){
   document.write(valor);
}

Assim que é percorrido o vetor no For \o/

Agora vamos conhecer alguns dos métodos principais do Array em JavaScript: push, pop, shift, unshift, splice, slice, sort, reverse, concat e join.

Push — adiciona um ou mais elementos no fim do array

var tecnologias = ["Node.js", "Vue", "Angula"];tecnologias.push("React");// pode adicionar mais de 1 elemento
tecnologias.push("React Native", "Adonis");alert(tecnologias); // Node.js,Vue,Angula,React,React Native,Adonis// Ele também retorna o tamanho do vetor após adicionar
var tamanho = tecnologias.push("Docker");
alert(tamanho); // 7

Pop — remove o último elemento do array

var salada = ["tomate", "alface", "cebola", "berinjela"];
salada.pop();
alert(salada); // tomate,alface,cebola// esse método também retorna o valor que foi retirado
var saiu = salada.pop();
alert(saiu); // cebola

Unshift — adiciona um ou mais elementos no começo do array

var numeros = [10, 9, 3, 23];
numeros.unshift(1);alert(numeros); // 1,10,9,3,23// Também adiciona mais de um elemento e retorna o tamanho do array
var tamanho = numeros.unshift(0, 5, 6);
alert(numeros); // 0,5,6,1,10,9,3,23
alert(tamanho); // 8

Shift — remove o primeiro elemento do array

var dados = ["Jezmael", 40, true, 1.68];
dados.shift();
alert(dados); // 40,true,1.68// Também retorna o elemento que foi retirado
var saiu = dados.shift();
alert(saiu); // 40

Splice — remove ou altera um ou mais elementos do array

var herois = ["Spider-man", "Batman", "Wolverine", "Deadpool"];// apenas um parâmetro, deixa apenas uma quantidade de elementos
herois.splice(2); // quero apenas 2 heróis...
alert(herois); // Spider-man,Batman// dois parâmetros, remove uma faixa de elementos
var herois2 = ["Doctor Strange", "Iron Man", "Huck", "Thor"];
herois2.splice(1,2); // começa no índice 1 e remove 2 elementos
alert(herois2); // Doctor Strange,Thor// Também podemos trocar os elementos passando mais parâmetros
var numeros = [1, 2, 4, 6, 10];// começando no índice 2, retira 2 elementos e troca por 3 e 5
numeros.splice(2, 2, 3, 5); 
alert(numeros); // 1,2,3,5,10

Slice — retorna uma faixa de elementos de um array

// Esse é um método que mantém a imutabilidade do vetor
// ou seja, não altera nada no original, apenas retorna um novovar cores = ["red", "green", "blue", "black", "white"];
var faixa = cores.slice(1,3); // do índice 1 até o 3 (não entra)
alert(faixa); //green,blue// Caso deixarmos apenas um parâmetro, ele pega do índice até o fim
var faixa2 = cores.slice(2);
alert(faixa2); // blue,black,white

Sort — ordena os dados em um vetor

var cores = ["red", "green", "blue", "black", "white"];
cores.sort();
alert(cores); // black,blue,green,red,white// Por padrão o sort() ordena números como se fossem caracteres
// mas podemos passar uma função para resolver isso
var numeros = [5, 1, 0, 10, 25, -2];numeros.sort(ordena); // chama a função ordena
alert(numeros); // -2,0,1,5,10,25function ordena(a, b) { // ordena do menor para o maior
    return a - b;
}

Reverse — inverte as posições dos valores em um array

var dados = [1, 'b', true, 4.5];
dados.reverse();
alert(dados); // 4.5,true,b,1

Concat — junta um ou mais vetores

var letras = ["a", "b", "c"];
var numeros = [1, 2, 3];// junta os dois vetores
var alfaNumericos = letras.concat(numeros);
alert(alfaNumericos); // a,b,c,1,2,3

Join — junta os valores de um vetor com um caractere de separador

// Esse método também mantém a imutabilidadevar data = ["20", "04", "1964"];
var dataAniversario = data.join("/"); // passamos o separador aqui
alert(dataAniversario); // 20/04/1987

Bom… acho que por enquanto já aprendemos um monte de coisa, irei colocar mais métodos na próxima postagem. Então até lá \o|