O que é um javascript array?
Javascript array é uma estrutura de dados da linguagem utilizada para representar listas.
É uma das estruturas de dados mais utilizadas nos sistemas atuais e serve para diversas aplicações do dia a dia como por exemplo:
- Listar os produtos em uma loja virtual
- Mostrar sua lista de pedidos realizados anteriormente
Estruturas de dados (como o array) nos ajudam a organizar melhor os dados em nossos sistemas e oferecem funções prontas para facilitar a manipulação desses dados. Exemplos de situações onde precisamos manipular os dados de uma lista são:
- Remover um produto do seu carrinho de compras na loja virtual
- Dar baixa no estoque em cada um dos produtos que compõem o pedido
Para facilitar esse tipo de manipulação de dados o array nos oferece vários métodos como por exemplo o método splice() que pode ser utilizado para remover um elemento específico do array ou o método forEach() que serve para passar por todos os elementos do array e fazer algum processamento com cada um deles (como dar baixa no estoque por exemplo).
Falaremos mais sobre os métodos disponíveis no array ao longo desse post.
Como criar um array em javascript?
A forma mais fácil e rápida é criar um array é usando um valor literal. Para isso utilizamos colchetes []. Veja como fica o código:
//Criando um array e com alguns ítens
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Criando um array vazio
var pedido = []Repare que ao criar o array temos a opção de já adicionar ítens a ele ou criá-lo totalmente vazio. Independente de como o array foi criado, podemos adicionar ou remover ítens a qualquer momento.
Uma outra maneira de criar um array é instanciando um objeto do tipo Array como no exemplo a seguir:
//Criando um array e com alguns ítens
var produtos = new Array("Camiseta Branca", "Camiseta Preta", "Camiseta Amarela")
//Criando um array vazio
var pedido = new Array()Como usar o array?
Acessando um elemento do array
O array funciona baseado em posições e cada elemento que adicionamos nele é armazenado um uma nova posição. Por exemplo:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
Repare que cada elemento do array é armazenado em uma posição diferente e que cada posição recebe um número (que chamamos de índice).
Para acessar um elemento do array nós informamos o nome do array seguido pelo o número da posição correspondente (índice correspondente) entre colchetes. O código fica assim:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Camiseta Branca (item que está no índice ZERO do array)
produtos[0]
//Camiseta Preta (item que está no índice UM do array)
produtos[1]
//Mostra uma mensagem de alerta com o texto: Camiseta Amarela
alert(produtos[2])É muito importante notar que para acessar o primeiro elemento do array, precisamos usar o índice ZERO (produtos[0]). ZERO é o primeiro índice sempre. O índice UM retorna o segundo elemento do array (e assim por diante).
Se tentarmos acessar um índice que ainda tenha sido preenchido (não recebeu nenhum elemento) ou que não exista no array, receberemos como resposta o valor undefined (não definido).
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//retorna undefined pois não existe nada no índice 3 desse array
produtos[3]
//Mostra uma mensagem de alerta com o texto: undefined
alert(produtos[-1])Descobrindo o tamanho do array (javascript array length)
Podemos adicionar quantos elementos quisermos dentro do array e algumas vezes precisamos saber quantos elementos já foram adicionados. Veja um exemplo onde isso pode ser útil:
- Mostrar a quantidade de ítens em uma compra (loja virtual)
Para saber quantos elementos existem no array podemos utilizar a propriedade length como podemos ver no código a seguir:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Mostra uma mensagem de alerta com o texto "3"
alert(produtos.length)Adicionando elementos ao array
Método push
Podemos adicionar quantos elementos quisermos dentro do array e a maneira mais simples para isso é utilizar o método push(). Veja o exemplo de código a seguir:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Inserindo um elemento ao array
produtos.push("Camiseta Verde")
//Inserindo vários elementos ao array ao mesmo tempo
produtos.push("Camiseta Vermelha", "Camiseta Cinza", "Camiseta Rosa")
//Mostra uma mensagem de alerta com o texto "7"
alert(produtos.length)
//Mostra uma mensagem de alerta com o texto "Camiseta Rosa"
alert(produtos[6])Como podemos ver neste trecho de código, podemos adicionar um ou mais elementos de uma só vez no array.
Quando estamos utilizando o método push(), os elementos sempre são adicionados ao final do array. Repare no exemplo de código anterior, que o ultimo elemento adicionado fica armazenado na última posição do array (índice 6).
Método unshift
Outra maneira de adicionar elemento ao array é utilizando o método unshift(). Esse método funciona de forma parecida com o push, com a diferença de que os elementos são adicionados no início do array. Veja o exemplo de código:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Inserindo um elemento ao array
produtos.unshift("Camiseta Verde")
//Inserindo vários elementos ao array ao mesmo tempo
produtos.unshift("Camiseta Vermelha", "Camiseta Cinza", "Camiseta Rosa")
//Mostra uma mensagem de alerta com o texto "7"
alert(produtos.length)
//Mostra uma mensagem de alerta com o texto "Camiseta Vermelha"
alert(produtos[0])
//Mostra uma mensagem de alerta com o texto "Camiseta Amarela"
alert(produtos[6])Método splice
Existe ainda uma forma de adicionar um elemento ao array em uma posição especifica. Para isso precisamos utilizar o método splice().
O método splice() pode ser utilizado para adicionar, alterar ou remover elementos do array. Explicaremos aqui como adicionar elementos ao array utilizando o método splice()e mais adiante nesta página, explicaremos como alterar ou remover elementos utilizando esse método.
Segue um exemplo de código:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Inserindo vários elementos ao array ao mesmo tempo
produtos.splice(1,0,"Camiseta Vermelha", "Camiseta Cinza", "Camiseta Rosa")
//Mostra uma mensagem de alerta com o texto "6"
alert(produtos.length)
//Mostra uma mensagem de alerta com o texto "Camiseta Cinza"
alert(produtos[2])
//Mostra uma mensagem de alerta com o texto "Camiseta Branca"
alert(produtos[0])Repare nos parâmetros passados para a função splice().
- O primeiro parâmetro indica o índice onde devem ser inseridos os elementos. No exemplo anterior utilizamos o índice UM (segundo elemento do array).
- O segundo parâmetro indica quantos elementos devem removidos do array. Nesse caso não queremos remover nenhum elemento, por isso sempre passamos o valor ZERO.
- Os próximos parâmetros são os elementos que desejamos adicionar no array, na ordem em que eles devem ser inseridos.
Removendo elementos do array
Método pop
A forma mais simples de remover elementos do array é através do método pop(). Esse método remove sempre o ultimo elemento do array e além disso retorna o elemento removido.
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Mostra uma mensagem de alerta com o texto "Camiseta Amarela", que foi o elemento removido do array
alert(produtos.pop())
//Mostra uma mensagem de alerta com o texto "2", indicando que agora só temos 2 elementos no array
alert(produtos.length)Método shift
Também é possível remover elementos do array usando o método shift(). Esse método remove sempre o primeiro elemento do array e além disso retorna o elemento removido.
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
//Mostra uma mensagem de alerta com o texto "Camiseta Branca", que foi o elemento removido do array
alert(produtos.shift())
//Mostra uma mensagem de alerta com o texto "2", indicando que agora só temos 2 elementos no array
alert(produtos.length)Método splice
Uma outra maneira de remover elementos do array é utilizar o método splice(). Esse método remove um ou mais elementos a partir de uma posição específica do array e além disso retorna os elementos removidos.
//Criando um array com 5 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela", "Camiseta Cinza", "Camiseta Rosa"]
//Mostra uma mensagem de alerta com o texto "Camiseta Preta,Camiseta Amarela", que foram os elementos removidos do array
alert(produtos.splice(1,2))
//Mostra uma mensagem de alerta com o texto "3", indicando que agora só temos 3 elementos no array
alert(produtos.length)Vamos analisar os parâmetros passados para o método splice().
- O primeiro parâmetro indica o índice inicial onde se deseja remover os elementos. No exemplo anterior utilizamos o índice UM (segundo elemento do array).
- O segundo parâmetro indica quantos elementos devem removidos do array. Em nosso exemplo, removemos 2 elementos.
Nesse exemplo de código removemos do array de produtos os elementos “Camiseta Preta” e “Camiseta Amarela”. Note que esses elementos estavam no meio do array (nas posições 1 e 2) e não no início (índice ZERO) ou no final (índice 4).
Alterando elementos do array
Para alterar elementos de um array precisamos saber exatamente em qual posição do array esse elemento está armazenado (saber o índice) e depois atribuir o novo valor diretamente a essa posição do array. O código fica assim:
//Criando um array com 2 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta"]
//Altera o elemento que está armazenado na posição 1 do array de produtos ("Camiseta Preta")
produtos[1] = "Sapato Branco"
//Mostra uma mensagem com os elementos do array ("Camiseta Branca","Sapato Branco")
alert(produtos)Método splice
Também é possível alterar elementos de um array utilizando o método splice(). O que esse método vai fazer é remover um ou mais elementos a partir de uma posição e ao mesmo tempo adicionar novos elementos. Vamos ver na prática como fica o código:
//Criando um array com 5 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela", "Camiseta Cinza", "Camiseta Rosa"]
//Mostra uma mensagem de alerta com o texto "Camiseta Preta,Camiseta Amarela", que foram os elementos removidos do array
alert(produtos.splice(1,2,"Sapato Branco","Sapato Marrom"))
//Mostra uma mensagem de alerta com os elementos no array
alert(produtos)Vamos analisar os parâmetros passados para o método splice().
- O primeiro parâmetro indica o índice inicial onde se deseja remover os elementos. No exemplo anterior utilizamos o índice UM (segundo elemento do array)
- O segundo parâmetro indica quantos elementos devem removidos do array. Em nosso exemplo, removemos 2 elementos.
- Os próximos parâmetros são os elementos que desejamos adicionar no array, na ordem em que eles devem ser inseridos. Em nosso caso adicionamos 2 elementos (“Sapato Branco” e”Sapato Marrom”)
Iterando no array (javascript array foreach)
É muito comum precisarmos passar por cada um dos elementos de um array para fazer algum tipo de processamento. Para isso podemos utilizar o método forEach() disponível no array.
O método forEach() recebe uma função de callback como parâmetro, percorre todo o array (passando por cada um dos seus elementos) e executa a função de callback uma vez para cada um dos elementos.
Segue um exemplo de código utilizando esse método:
//Criando um array com 3 elementos
var produtos = ["Camiseta Branca", "Camiseta Preta", "Camiseta Amarela"]
// Função a ser utilizada como callback
function baixaEstoque(produto){
alert("Baixando produto no estoque: " + produto)
// Aqui vai o restante da lógica para baixar produto do estoque
}
// Usando forEach para passar por cada um dos produtos e dar baixa no estoque
produtos.forEach(baixaEstoque)Neste exemplo de código, passamos por cada um dos produtos da lista de compra e damos baixa no estoque. Vamos avaliar mais a fundo este exemplo:
- Criamos uma função chamada
baixaEstoque()e nela está toda a lógica para dar baixa em um produto específico - Utilizamos o método
forEach()do array para passar por cada um dos produtos na lista de compra. - Passamos como parâmetro para o
forEach()a funçãobaixaEstoque(). Essa função de callback será chamada uma vez para cada elemento no array de produtos, dando baixa no estoque em todos eles