Array no Javascript: Entenda o que é e aprenda a usar

Em programação, diversos códigos podem ser usados para dar diferentes formas a um projeto. Além dos códigos, outros elementos são usados com o objetivo de alcançar determinados resultados. É o caso do Array no Javascript. Você já ouviu falar sobre esse assunto?

Quer saber para que serve o Array no Javascript, como ele pode ajudar o seu código e quer aprender a usar? Continue lendo este artigo! Você vai aprender tudo isso e muito mais. Confira!

O que é um Array? 

O array é uma variável especial, utilizada para armazenar uma grande quantidade de valores em um só lugar ou nome. Os valores podem ser acessados por meio de um número de índice. 

Por isso, é considerado como uma variável composta, que armazena vários elementos do mesmo tipo ou de tipos diferentes. Por exemplo, uma variável que armazena a lista de nomes de funcionários de uma área específica da empresa. 

A estrutura de Array permite o armazenamento de outras variáveis, como de tipo primário, que é um Array de objetos JavaScript ou JavaScript Array Functions. Isso quer dizer que é possível armazenar funções em um elemento do array.

Ou seja, itens de diferentes tipos, como um elemento string, outro elemento inteiro e outro do tipo objeto. Por meio de um índice numérico, acessado de diferentes formas, é possível conferir as estruturas criadas.

Para que serve um Array?

A variável Array é utilizada para armazenar um conjunto de dados. A partir de uma sequência não ordenada, a Array forma uma estrutura de dados. Os elementos são condicionados em um ambiente isolado, que só pode ser acessado por meio de índices colocados na primeira posição de cada item.

A lista de itens, de qualquer tipo ou formato, é armazenada dentro deles. Para adicionar elementos a um Array, é preciso definir uma posição. Para isso, basta inserir um item no final do Array, utilizando o método push (). 

Esse método, além de incluir um novo item na última posição, retorna o Array ao seu novo tamanho. Veja um exemplo abaixo:

var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var resultado = arrayNomes.push("Joana");
console.log(resultado);
/* saída:
[ 'João', 'Maria', 'Paulo', 'Pedro', 'Joana' ]
5
*/
arrayNomes.push("Silvia");
console.log(arrayNomes);
/* saída:
[ 'João', 'Maria', 'Paulo', 'Pedro', 'Joana', 'Silvia' ]
*

O método push () também pode ser usado sem a atribuição do valor que vai retornar para alguma variável. O item também é adicionado na última posição do Array. Outro caminho é incluir um ou mais elementos na primeira posição do Array, utilizando o unshift. Veja o exemplo:

var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var totalItens = arrayNomes.unshift("Silvia", "Carlos");
console.log(arrayNomes);
// saída: [ 'Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro' ]

Além dessas formas, também é possível incluir um elemento em uma posição específica. Nesse caso, o método splice () é utilizado. Ele se baseia em um índice com um elemento inserido, o número de elementos que serão excluídos ou um ou mais itens que serão incluídos. Veja o exemplo:

var arrayInserirNomes = ["José", "Ana", "Bia", "Enzo"];
arrayInserirNomes.splice(1,0,"Marlene");
console.log(arrayInserirNomes);
// saída: [ 'José', 'Aline', 'Ana', 'Bia', 'Enzo' ]

Ao utilizar o método splice (), o parâmetro referente à quantidade a ser excluída como zero é definido. Por isso, o resultado é a inserção do nome Aline na posição 1 do Array, com os demais elementos seguidos.

Como saber se uma variável é um Array?

Uma das formas de descobrir se uma variável é um Array é criando a sua própria função isArray():

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

A função usada no exemplo acima sempre vai retornar true quando o argumento for um Array. Ou seja, a resposta será verdadeiro se o protótipo do objeto contiver a palavra “Array”.

O instanceof do operador vai retornar true se o objeto for criado por um determinado construtor, como no exemplo abaixo:

var fruits = ["Banana", "Laranja", "Maça", "Manga"];
fruits instanceof Array     // retorna true

Como fazer um Array em JavaScript?

O primeiro passo é definir o Array básico:

let myArray = [];

Em seguida, preencha com dois objetos, nesse exemplo, os sentimentos Amor e Paixão:

let myArray = [
{ feeling: "Amor" },
{ feeling: "Paixão" }
];

Depois, use a função push para adicionar um elemento ao final de um Array. Nesse exemplo, usamos o elemento Ternura:

myArray.push({ feeling: "Ternura" });

Assim, fechamos o Array com 3 itens.

Caso queira remover o último item do Array, use a função pop:

myArray.pop();

Caso queira adicionar um item no início do array, use Unshift:

myArray.unshift({ feeling: "Ternura" });

Para remover do início do array, use shift:

myArray.shift();

Também é possível fazer iterações em cima dos Arrays usando o laço for. Por exemplo, é possível criar um Array com 10 posições e fazer o console mostrar o valor de cada índice sempre que o laço for executado. Como no exemplo abaixo:

let myArray = new Array(10);
for(let i = 0; i < 10; i++){
console.log(myArray[i]);
}

Como nada foi adicionado no exemplo, o retorno será 10x undefined.

Porém, quando não é possível saber o tamanho do Array, podemos usar a seguinte fórmula para descobrir:

let myArray = new Array(10);
for(let i = 0; i < myArray.length; i++){
console.log(myArray[i]);
}

Também é possível transformar o Array em string. Nesse caso, usamos a função join() que converte cada item do Array em string e as concatena, chegando a esse resultado:

let phraseArray = ['Agradecemos', 'por isso', 'professor'];
console.log(phraseArray.join()); // Agradecemos,por isso,professor

Também é possível usar um parâmetro string para colocar entre os itens do Array e substituir a vírgula default. Conforme abaixo:

let phraseArray = ['Agradecemos', 'por isso', professor'];
console.log(phraseArray .join(' ')); // Agradecemos por isso professor.

Além disso, você pode inverter a ordem do Array:

phraseArray = phraseArray.reverse();
console.log(phraseArray.join(' ')); // professor isso por professor

O interessante desses dois casos é ver como podemos trabalhar para ter resultados diferentes, que podem ser aplicados em contextos diversos.

Para ordenar o Array por ordem alfabética, usamos o método sort():

let fruits = new Array('Banana', 'Maçã', 'Abacate');
console.log(fruits.sort().join(' ')); //Abacate Banana Maçã

Por outro lado, se o objetivo é desconstruir um objeto ou um Array, podemos usar o Spread operator:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = […fruits,'Laranja', 'Tangerina'];
console.log(fruits); // ["Banana", "Maçã", "Abacate", "Laranja", "Tangerina"]

Para pegar um pedaço do Array, usamos o método slice, porém o uso do parâmetro ends é opcional:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = fruits.slice(0,1);
console.log(fruits); // ["Banana"]

O método splice também pode ser usado para inserir itens dentro ou no meio do Array:

splice(inicioIndiceDaRemocao, quantidadeRemover, novosItens)

Veja como substituir a maçã por um melão no método abaixo:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits.splice(1,1, 'Melão');
console.log(fruits); //["Banana", "Melão", "Abacate"]

Nesse exemplo, o método splice pegou a partir do índice 1 o elemento maçã e verificou quantos seriam excluídos. No caso 1, ele removeu e depois viu que era para colocar o item Melão naquele índice.

Para criar um novo Array baseado no retorno da função passada, usamos o método Map:

let numbers = [1,2,3,4];
numbers = numbers.map(number => number * number);
console.log(numbers); //[1, 4, 9, 16]

No exemplo acima, uma função anônima foi criada e transformada em parâmetro. Ela recebe um number de parâmetro, que é o valor de cada item do array.

Depois, multiplica ele por ele mesmo e retorna para o map.

É uma função muito útil quando é necessário fazer processos com cada item do Array para substituí-lo ou modificá-lo.

Quando o objetivo é filtrar os itens do Array, essa função também pode ser usada. Nesse caso, a função deve ter um retorno booleano:

let numbers = [10,12,30,18];
numbers = numbers.filter(number => number >= 18);
console.log(numbers); // [30, 18]

Nesse exemplo, no filtro, os itens do Array tendem a ser no mínimo 18.

Para testar Arrays podemos usar dois métodos: some e every:

O some retorna verdadeiro quando o que for perguntado a ele existir em algum item do Array. O every, por sua vez, vai retornar verdadeiro se todos os itens do Array forem validados. Veja o exemplo:

let numbers = [1,2,3,4];
let biggerThanZero = numbers.every(number => number > 0);
console.log(biggerThanZero); // true
let hasNumberOne = numbers.some(number => number == 1);
console.log(hasNumberOne); // true

Agora, se o objetivo é identificar o índice de um item dentro do Array, usamos os métodos indexOf e lastIndexOf. O indexOf pega o primeiro índice e o lastIndexOf vai pegar o último índice, assim como indicam seus nomes. Dessa forma, temos os seguintes exemplos:

let numbers = [1,2,3,4,1,2];
console.log(numbers.indexOf(1)); // 0
console.log(numbers.lastIndexOf(1));// 4
console.log(numbers.indexOf(2)); // 1
console.log(numbers.lastIndexOf(2));// 5

Outros métodos também podem ser utilizados para aplicar Array, a estrutura é bem completa. Gostou desse artigo? Compartilhe com seus amigos e continue acompanhando os artigos no blog da Remessa Online.

Resumindo