Neste artigo final do módulo, nós vamos dar uma olhada em arrays - um elegante meio de armazenar uma lista de itens em uma mesmo variável. Aqui nós vemos o porquê isto é útil, depois exploraremos como criar uma array, recuperar, adicionar e remover itens armazenados em uma array, e mais.

Pré-requisitos: Leitura básica sobre computadores, um básico entendimento de HTML e CSS, e conhecimento sobre o que é JavaScript.
Objetivo: Entender o que é array e como manipular ela em JavaScript.

O que é uma array?

Arrays são geralmente descritas como "lista de objetos"; elas são basicamente objetos que contem múltiplos valores armazenados em uma lista. Um objeto array pode ser armazenado em variáveis e ser tratado de forma muito similar a qualquer outro tipo de valor, a diferença está em podermos acessar cada valor dentro da lista individualmente, e fazer super úteis e eficientes coisas com a lista, como laço através da lista e fazer a mesma coisa para cada valor. Talvez nós pegamos uma série de produtos e seus preços armazenados em uma array, e nós queremos fazer um laço através de todos eles e mostrar em um recibo, enquanto somamos todos os preços e mostramos o preço total ao final.

Se nós não tivessemos arrays, terísmos que armazenar cada item em uma variável separada, então chamar o código para mostrar e adicionar separadamente cada item. Isto seria muito mais longo de escrever, menos eficiente e mais suscetível a erros. Se nós temos 10 itens para adicionar na fatura, isto é ruim o bastante, mas e se fosse 100 itens ou 1000? Nós vamos retornar a este exemplo mais tarde neste artigo.

Como no artigo anterior, vamos aprender o básico de arrays introduzindo com alguns exemplos dentro de um console JavaScript. Nós fornecemos um abaixo (você também pode abrir este console em uma aba separada ou janela, ou usar o console de desenvolvedor do navegador se preferir).

Criando uma array

Arrays são contruídas de colchetes, os quais contém uma lista de itens separada por vírgulas.

  1. Vamos supor que queremos armazenar uma lista de compras em uma array — nós temos algo como o seguinte. Digite as linhas abaixo no seu console:
    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
    shopping;
  2. Neste caso, cada item na array é uma string, mas tenha em mente que você pode armazenar qualquer item em uma array — string, número, objeto, outra variável, até outra array. Você pode também misturar e combinar tipos de itens — eles não têm que ser todos números, strings, etc. Tente isto:
    var sequence = [1, 1, 2, 3, 5, 8, 13];
    var random = ['tree', 795, [0, 1, 2]];
  3. Tente criar um par de arrays você mesmo, antes de seguir em frente.

Acessando e modificando itens de uma array

Você pode acessar itens individuais em uma array usando a notação de colchetes, da mesma forma que você acessa as letras em uma string.

  1. Digite o seguinte no seu console:
    shopping[0];
    // returns "bread"
  2. Você também pode modificar um item em uma array simplesmente dando um novo valor ao item. Tente isto:
    shopping[0] = 'tahini';
    shopping;
    // shopping vai retornar agora [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    Note: Nós dissemos isto antes, mas como lembrete — computadores começam a contar do 0!
  3. Note que uma array dentro de uma array é chamada uma array multidimensional. Você pode acessar um item dentro de uma array que ela própria pode estar de outra array colocando duas configurações de colchetes juntas. Por exemplo, para acessar um dos itens dentro de uma array que é o terceiro item dentro da array random (veja a seção anterior), nós podemos fazer algo tipo isto:
    random[2][2];
  4. Tente brincar mais adiante e fazer algumas modificações nos seus exemplos antes de continuar.

Encontrando o comprimento de uma array

Você pode encontrar o comprimento de uma array (quantos itens existem nela) exatamente do mesmo jeito que você encontra o comprimento (em caracteres) de uma string — usando a propriedade length. Tente o seguinte:

sequence.length;
// deve retornar 7

Isto tem outras funcionalidades, mas é mais comum usar em um laço para seguir todos os itens em uma array. Então, por exemplo:

var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}

Você irá aprender sobre laços propriamente em um artigo futuro, mas, brevemente, este código está dizendo:

  1. Comece o laço no item número 0 na array.
  2. Pare o laço no item de número igual ao comprimento da array. Isto funcionará para uma array de qualquer tamanho, mas neste caso vai parar o laço no item 7 (isto é bom, como o último item — que nós queremos que o laço cubra — é 6.
  3. Para cada item, imprima no console do navegador com console.log().

Alguns métodos úteis em array

Nesta seção vamos ver alguns métodos relacionados a array úteis que nos permitem dividir strings em itens de array e vice-versa, e adicionar novos itens em arrays.

Convertendo entre strings e arrays

Frequentemente você vai se deparar com alguns dados contidos em uma grande e longa string, e você pode querer separar os itens em uma forma mais útil e então manipular eles, como mostrar em uma tabela. Para fazer isto, nós podemos usar o método split(). Nesta forma mais simples, ela pega um parâmetro solitário, o caracter que você deseja separar da string e retorna o restante antes e depois do item separado na array.

Nota: Ok, isto é tecnicamente um método de string, não um método de array, mas nós podemos colocar em arrays já que cai bem.

  1. Vamos brincar com isto para ver como funciona. Primeiro, crie uma string no seu console:
    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
  2. Agora vamos dividir isto em cada vírgula:
    var myArray = myData.split(',');
    myArray;
  3. Finalmente, tentamos encontrar o comprimento da sua nova array, e recuperar alguns itens dela:
    myArray.length;
    myArray[0]; // the first item in the array
    myArray[1]; // the second item in the array
    myArray[myArray.length-1]; // the last item in the array
  4. Você também pode ir no sentido oposto usando o método join(). Tente o seguinte:
    var myNewString = myArray.join(',');
    myNewString;
  5. Outro jeito de converter uma array em uma string é usar o método toString(). toString() é indiscutivelmente mais simples join() pois não necessita um parâmetro, mas mais limitado. Com join() você pode especificar diferentes separadores (tente o passo 4 com um caracter diferente da vírgula).
    var dogNames = ['Rocket','Flash','Bella','Slugger'];
    dogNames.toString(); //Rocket,Flash,Bella,Slugger

Adicionando e removendo itens de arrays

Nós ainda não falamos sobre adicionar e remover itens de uma array — vamos dar uma olhada agora. Nós vamos usar a array myArray que acabamos de criar na última seção. Se você não viu a última seção, primeiro crie a array no seu console:

var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];

Antes de tudo, para adicionar ou remover um item no final de uma array, nós podemos usar push() e pop() respectivamente.

 

  1. note que você precisa para incluir um ou mais itens ao final da sua array. Tente isto:
    myArray.push('Cardiff');
    myArray;
    myArray.push('Bradford', 'Brighton');
    myArray;
    
  2. O novo comprimento da array é retornado quando a chamada do método completa. Se você quer armazenar o novo comprimento da array em uma variável, você poderia fazer algo como isto:
    var newLength = myArray.push('Bristol');
    myArray;
    newLength;
  3. Removendo o último item da array é tão simples como um pop() nele. Tente isto:
    myArray.pop();
  4. O item que foi removido é retornado quando a chamada do método completa. Para salvar o item em uma nova variável, você poderia fazer isto:
    var removedItem = myArray.pop();
    myArray;
    removedItem;

unshift() e shift() funciona exatamente do mesmo modo que push() e pop(), respectivamente, exceto que eles funcionam no começo da array, não no final.

  1. Primeiro unshift() — tente os seguintes comandos:
    myArray.unshift('Edinburgh');
    myArray;
  2. Agora shift();Tente estes!
    var removedItem = myArray.shift();
    myArray;
    removedItem;

Aprendizado ativo: Imprimindo aqueles produtos!

Vamos retornar ao exemplo que descrevemos antes — imprimindo nomes de produtos e preços em uma fatura, então totalizando os preços e imprindindo eles ao final. No exemplo editável abaixo há comentários contendo números — cada um deles marcam um lugar onde você tem que acidionar algo ao código. Eles são como segue:

  1. Abaixo do comentário // number 1 está um número de strings, cada uma contendo um nome de produto e preço separado por uma vírgula. Nós gostaríamos que você colocasse eles dentro de uma array e armazenasse eles na array chamada products.
  2. Na mesma linha o comentário // number 2 está no começo de um laço for. Nesta linha nós temos i<=0, o qual é um teste condicional que faz o laço for parar imediatamente, porque está dizendo "pare quando i for menor ou igual a 0", e  i começa em 0. Nós gostaríamos de substituir isto com um teste condicional que termina o laço quando o i for menor que o tamanho da array products.
  3. Logo abaixo do comentário // number 3 nós queremos que você escreva uma linha de código que divide o item da array (name:price) em dois itens separados, um contendo somente o nome e outro só com o preço. Se você não tem certeza de como fazer isto, consulte o artigo Métodos úteis em string para alguma ajuda, ou ainda melhor, veja a seção Converting between strings and arrays neste artigo.
  4. Como parte da linha de código acima, você também quer converter o preço de string para número. Se você não se lembra como fazer isto, veja o artigo primeiras strings.
  5. Há uma variável chamada total que é criada e atribuída o valor 0 no começo do código. Dentro do loop (abaixo // number 4) nós queremos que você escreva uma linha que adicione o preço atual ao total em cada iteração do laço, então ao final do código o preço total é impresso na fatura. Você pode precisar de um operador aritiméticos para isto.
  6. Nós queremos que você mude a linha logo abaixo de // number 5 para que a variável itemText seja igual a "nome do item atual - $preço do item atual", por exemplo "Shoes - $23.99" em cada caso, então a informação correta para cada item é impressa na fatura. Esta é uma cimples concatenação de string, a qual deveria ser familiar para você.

Aprendizado ativo: Top 5 buscadores

Um bom uso para os métodos de array como push() e pop() está quando você está mantendo um registro de itens atuais ativos em um aplicativo web. Em uma cena animada, por exemplo, você pode ter uma array de objetos representando o gráfico de fundo mostrado atualmente, e você pode querer somente mostrar 50 por vez, para performace ou alguma razão de ordem. Como novos objetos são criados e adicionados na array, os antigos podem ser deletados da array para manter o número desejado.

Neste exemplo nós vamos mostrar um uso bem mais simples — aqui nós estamos dando a você um falso site de busca, com uma caixa de busca. A idéia é que quando termos são digitados na caixa de busca, os 5 principais termos de busca anterior sejam mostrados na lista. Quando o número de termos passar de 5, o último termo começa sendo deletado. A cada vez um novo termo é adicionado ao topo, então os 5 termos anteriores são sempre mostrados.

Nota: Em um aplicativo de busca real, você seria, provavelmente, habilitado a clicar nos termos anteriores para retornar às pesquisas, e isto iria mostrar o reusltado atual! Nós estamos só mantendo simples, por agora.

Para completar o aplicativo, nós precisamos que você:

  1. Adicione uma linha abaixo do comentário // number 1 que adicione o valor digitado atual na busca ao começo da array. Isto pode ser recuperado usando searchInput.value.
  2. Adicione uma linha abaixo do comentário // number 2 que remova o último valor no fim da array.

Conclusão

Depois de ler este artigo, nós temos certeza que você concordará que arrays parecem muito úteis; você verá elas surgirem em todo lugar em JavaScript, frequentemente associadas com laços para fazer a mesma coisa para cada item de uma array. Nós estaremos ensinando a você todo o básico que há para saber sobre laços no próximo módulo, mas por agora você deve se dar uma palmada de incentivo e dar uma bem merecida parada; você trabalhou durante todo os artigos neste módulo!

A única coisa que resta a fazer é trabalhar na avaliação deste módulo, a qual vai testar seu entendimento dos artigos anteriores a este.

Veja também

  • Coleções indexadas — um guia avançado guia de arrays e seus primos, typed arrays.
  • Array — a página de referência Array — para um guia de referência detalhado para as funcionalidades discutidas nesta página e muito mais.

 

Neste módulo

 

Etiquetas do documento e colaboradores

Colaboradores desta página: BrunoThomaz
Última atualização por: BrunoThomaz,