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.
Desenvolvimento Web com HTML, CSS e JavaScript
Aprenda a testar Aplicações Javascript
Referências
https://www.w3schools.com/js/js_arrays.asp