You are currently viewing O que é Array no Javascript
array javascript

O que é Array no Javascript

Introdução

O Array é uma estrutura de dados que serve para guardar uma lista de informações em uma determinada variável, este recurso é muito utilizado no dia a dia.

Na prática, pense na seguinte situação, imagine que você tem uma lista de carros, você poderia guardar os dados dessa forma:

let carro1 = "Onix";
let carro2 = "Porsche";
let carro3 = "Ferrari";

Porém, dessa forma, foi declarado três variáveis, e caso tenha mais um carro, precisa criar uma quarta.

Dessa forma pode ter vários problemas, para adicionar um novo carro, remover, buscar e manipular valores.

Nessa estrutura é possível guardar todos os carros dentro de uma só variável:

let carros = ["Onix", "Porsche", "Ferrari"];

Com isso, todos os carros estão agrupados em uma só variável.

Além disso, no Javascript há outros benefícios.

Isso porque a linguagem oferece diversas funções que permitem manipular os valores do array, por exemplo, inserir valor, remover valor, cortar uma parte, buscar valores e entre outros.

Criar um array

Para criar existem algumas formas, vou mostrar duas e a que eu mais uso.

// criar vazio
let minhaLista = new Array();
let minhaLista = []; // prefiro dessa forma

// criar com dados
let minhaLista = new Array("valor1", "valor2", "valor3");
let minhaLista = ["valor1", "valor2", "valor3"]; // prefiro dessa forma

Acessar um valor específico

Com a lista de valores, talvez você precise acessar um valor específico da lista para realizar alguma ação com ele.

Na lista, cada item está em uma posição diferente, e as posições se iniciam em 0.

Por exemplo, no caso dos carros, o Onix está na posição 0, o Porsche na posição 1 e a Ferrari na posição 2.

let carros = ["Onix", "Porsche", "Ferrari"];
0 = "Onix"
1 = "Porsche"
2 = "Ferrari"

Sabendo disso, é possível acessar um valor especificamente indicando qual a posição deseja ver, dessa forma:

carros[1] // Porsche
carros[2] // Ferrari
carros[0] // Onix

Ao acessar um valor você pode manipular da forma que desejar, seja trocando o valor, adicionar informações e entre outros.

Adicionar e remover valor

Como mencionei antes, o Javascript tem funções especificas para arrays, e duas delas são para adicionar e remover valores do final.

São as funções push e pop, funcionam dessa forma:

// adicionar valor
let carros = ["Onix", "Porsche", "Ferrari"];
carros.push("Fusca");
console.log(carros); // ["Onix", "Porsche", "Ferrari", "Fusca"];

// remover valor
let carros2 = ["Onix", "Porsche", "Ferrari"];
carros2.pop();
console.log(carros2); // ["Onix", "Porsche"];

Também tem funções para adicionar e remover do começo, são elas shift e unshift ambas funcionam da mesma forma que push e pop.

Procurar valor

Em uma lista principalmente com muitos itens, uma das ações que também é comum, é ter que procurar se um valor está nessa lista.

Há algumas funções para isso, mas nesse momento irei mostrar o indexOf.

Com ele é possível buscar um item no array, se esse item estiver na lista, será retornado a posição desse item, caso contrário o Javascript retorna -1.

Voltando ao exemplo do carros, vamos buscar a ferrari:

let carros = ["Onix", "Porsche", "Ferrari", "Fusca"];
let posicaoDaFerrari = carros.indexOf("Ferrari");
console.log(posicaoDaFerrari); // 2

E se buscar um carro que não existe:

let carros = ["Onix", "Porsche", "Ferrari", "Fusca"];
let posicaoDaFerrari = carros.indexOf("Corsa");
console.log(posicaoDaFerrari); // -1

Percorrer array

Outra ação comum é ter que percorrer todos os itens de uma lista.

O Javascript tem diversas funções para isso, novas funções foram implementadas nas últimas atualizações exatamente pelo alto uso dos arrays.

Nesse caso irei mostrar a forma mais básica, que é com a estrutura de repetição for.

Com ele é possível repetir um bloco de código, e vamos utilizar essa repetição para passar item por item, ou seja, iterar pelo array:

let carros = ["Onix", "Porsche", "Ferrari", "Fusca"];
for(let i = 0; i <= 4; i++) {
  console.log(carros[i]);
}
// Onix
// Porsche
// Ferrari
// Fusca

Essa mágica acontece porque na variável i, contem primeiro a posição 0, depois a posição 1 e assim vai, então conseguimos acessar cada posição individualmente de um array com a estrutura de repetição.

Conclusão

Esse assunto é bem extenso, é um recurso muito utilizado em todas as linguagens e não seria diferente com o Javascript.

Entender de arrays é importante primeiramente na parte dos conceitos, como ele funciona, quais dados pode armazenar, como guarda, como acessar, percorrer e entre outros.

Sabendo essa parte mais básica, é importante entender sobre as funções de array do Javascript, pois elas ajudam a manipular essa estrutura de forma mais fácil, com menos linhas de código, e com um código mais limpo.

Para ver outros canais onde o posto conteúdo sobre VueJS, veja os Links do Programando Soluções.

Referências

https://kenzie.com.br/blog/o-que-array/#:~:text=O%20que%20%C3%A9%20um%20Array,armazenar%20uma%20cole%C3%A7%C3%A3o%20de%20elementos.

https://www.w3schools.com/js/js_arrays.asp

Este conteúdo te ajudou de alguma forma?