Arrays em JavaScript para Iniciantes

O que são arrays em JavaScript?

Imagine que você precisa guardar uma lista dos nomes dos seus amigos. Você poderia criar variáveis separadas:

var amg1 = "Ofélia";
var amg2 = "Hamleet";
var amg3 = "Scarlet";

Mas isso vira uma bagunça rápido! Os arrays resolvem esse problema ao deixar você guardar vários valores em uma lista organizada só.

Criando seu primeiro array

var amgs = ["Hamlet", "Ophelia", "Scarlet"];

Criamos um array usando colchetes [] e separamos cada item com uma vírgula. Isso cria uma lista de três strings guardadas em uma única variável chamada friends.

Entendendo os índices dos arrays

Importante: arrays começam a contar do 0, não do 1!

var amgs = ["Hamlet", "Ophelia", "Scarlet"];
//             0          1          2

console.log(amgs[0]); // Saída: "Hamlet"
console.log(amgs[1]); // Saída: "Ophelia"
console.log(amgs[2]); // Saída: "Scarlet"

Acessamos os itens de um array usando seu número de posição (chamado de índice) dentro de colchetes. O primeiro item está sempre na posição 0, não na 1.

Quantos itens eu tenho?

var amgs = ["Hamlet", "Ophelia", "Scarlet"];
//no console
amgs.length //Saída 3

Usamos a propriedade .length para descobrir quantos itens há no array. Ela retorna a contagem total de itens.

Encontrando itens no seu array

O método indexOf()

Quer descobrir onde algo está? Use indexOf():

var amgs = ["Hamlet", "Ophelia", "Scarlet"];

friends.indexOf("Ophelia"); // Saída: 1
friends.indexOf("John");     // Saída: -1 (não encontrado)

Usamos o indexOf() para procurar um item no array. Se o item existe, ele retorna a posição em que foi encontrado. Se o item não existe, ele retorna -1.

Exemplo prático: verificando se alguém está na sua lista

var amgs = ["Hamlet", "Ophelia", "Scarlet"];
var searchName = "Ophelia";

if(amgs.indexOf(searchName) > -1) {
alert(searchName + " is in your friends list!");
} else {
alert("Sorry, " + searchName + " is not in your list");
}

Verificamos se o indexOf() retorna um valor maior que -1. Qualquer posição (0, 1, 2 etc.) é maior que -1, o que nos diz que o item existe. Se ele retornar exatamente -1, o item não foi encontrado.

Adicionando itens ao seu array

Adicionando ao final

var amgs = ["Ophelia", "Summer"];
amgs.push("Daisymay");
//["Ophelia", "Summer", "Daisymay"]

Usamos o push() para adicionar um novo item ao final do array. O array se expande automaticamente para incluir o novo item.

Removendo itens do seu array

Removendo o último item

var amgs = ["Ophelia", "Summer", "Daisymay"];
amgs.pop();
// Now: ["Summer", "Daisymay"]

Usamos o pop() para remover o último item do array. Esse método também retorna o item removido, caso você precise usá-lo.

Removendo o primeiro item

var amgs = ["Ophelia", "Summer", "Daisymay"];
amgs.shift();
//["Summer", "Daisymay"]

Usamos o shift() para remover o primeiro item do array. Todos os itens restantes se deslocam automaticamente para preencher a posição que ficou vazia.

Alterando itens no seu array

var amgs = ["Ophelia", "Summer", "Daisymay"];
amgs[2] = "Peter";
//["OPhelia", "Summer", "Peter"]

Atribuímos um novo valor à string na posição 2. É só acessar a posição que você quer alterar e atribuir um novo valor a ela!

Exibindo seu array com elegância

O método join()

var amgs = ["Betty", "Augustine", "James"];

console.log(amgs.join(", "));
//Output: "Betty, Augustine, James"

console.log(amgs.join(" / "));
//Output: "Betty / Augustine / James"

console.log(amgs.join(" and "));
//Output: "Betty and Augustine and James"

Usamos o join() para combinar todos os itens do array em uma única string. Qualquer separador que colocarmos dentro dos parênteses vai aparecer entre cada item.

Desafio prático

Tente criar um array de lista de compras com estas operações:

// 1. um array com 3 itens
var compras = ["leite", "ovos", "pão"];

// 2. coloque queijo na lista
compras.push("queijo");

// 3. cheque se "ovos" está na lista
if(compras.indexOf("ovos") > -1) {
    console.log("Não se esqueça dos ovos");
}

// 4. remova o primeiro item da lista
compras.shift();

// 5. apresente a lista de forma organizada
console.log("Compras: " + shoppingList.join(", "));

Praticamos o uso de vários métodos de array juntos. Tente rodar esse código e depois modificá-lo para adicionar os seus próprios itens!

Cola de referência rápida

Pontos principais

1. Arrays em JavaScript para iniciantes começam com o entendimento de que arrays deixam você guardar vários valores em uma única variável.
2. As posições dos arrays começam no 0, não no 1.
3. Use indexOf() para procurar itens (retorna -1 se não encontrar).
4. Use push() para adicionar itens e pop() e shift() para removê-los.
5. Use join() para exibir seu array como uma string formatada.

Agora você está pronto para trabalhar com arrays em JavaScript! Pratique esses métodos e eles vão virar coisa natural.