O JavaScript Array faz parte dos objetos globais da linguagem e é utilizado para armazenar uma coleção de elementos em uma única variável. Na prática, o array é uma estrutura de dados que contém um índice numérico e um elemento, que pode ser de qualquer tipo primitivo de dados, um objeto ou, até mesmo, um outro array.
Trata-se de um recurso muito utilizado na linguagem e, portanto, é importante que as pessoas que utilizam JavaScript entendam como ele funciona e de que forma pode ser usado em uma aplicação web. Pensando nisso, fizemos este conteúdo em que vamos mostrar:
- O que é um array?
- Qual a sintaxe de arrays em Javascript?
- Como criar um array em Javascript?
- Quais as propriedades e métodos do JavaScript array?
- Como utilizar instâncias de array?
- Como usar um array? 3 exemplos!
- Arrays e objetos: quando usar e qual a diferença?
Vamos lá? Boa leitura!
O que é um array?
Um Array trata-se de uma coleção ou conjunto de elementos de dados que são armazenados em uma memória, que pode ser chamada de constante ou variável.
Um array, que também pode ser chamado de matriz, pode ser composto por diversos tipos de dados como por exemplo nomes, idades, imagens, endereços entre outros, isso depende da pessoa desenvolvedora que está utilizando o array.
O maior objetivo de um array é armazenar informações de mesmo tipo juntos, sendo necessário então a criação de uma constante para a sua utilização.
Para entendermos melhor, imagine uma sala de aula, no qual a pessoa educadora possui 20 alunos e deseja saber quantas meninas e quantos meninos se encontram dentro da sala. Para isso, não existe a necessidade de ela passar em cada aluno para realizar essa identificação, sendo possível ela criar um único array e de acordo com a verificação setar uma cor para menino e outra cor para menina.
Qual a sintaxe de arrays em Javascript?
A sintaxe de um array tem diferentes formatos. A declaração direta ou representação literal é aquela em que o array é representado pelos símbolos de colchetes, que podem ou não conter elementos. Veja a sintaxe:
var novaArray = []
Nesse caso, o array novaArray é criado sem nenhum elemento atribuído. Essa mesma representação pode ser feita com a atribuição dos elementos, conforme a sintaxe abaixo:
var novaArray = [elemento0, elemento1, elemento2, ..., elementoN]
Outra sintaxe para a declaração de um array é por meio da utilização do construtor new. Veja abaixo:
var novaArray = new Array()
var novaArray = new Array(elemento0, elemento1, elemento2, ... , elementoN)
No primeiro caso, será criado um array vazio, ou seja, com a propriedade length, que significa tamanho, igual a zero. Já na segunda opção será criado um array com a quantidade de elementos informadas. Há, ainda, uma outra sintaxe:
var novaArray = new Array(numeroDeElementos)
Em que o numeroDeElementos corresponde ao tamanho do array. Ao criar um array apenas com a informação do número de elementos será definido o tamanho do array, ou seja, não há nenhum conteúdo atribuído a eles, mas há a alocação de memória conforme o tamanho determinado.
É importante dizer que, apesar de existirem formas diferentes de declarar um array, a recomendação de utilização é para a declaração do tipo literal, uma vez que essa forma é mais prática, tem maior legibilidade e velocidade de execução.
Como criar um array em Javascript?
Como dissemos, a criação de um array pode ser feita de diferentes maneiras. A seguir, mostramos a inicialização e o resultado de saída para a declaração de forma literal e por meio do construtor new. Confira o resultado para a criação de arrays unidimensional e bidimensional.
Array unidimensional
var arrayLiteral = [];
arrayLiteral[0] = "Olá";
console.log(arrayLiteral);
// saída: ['Olá']
var arrayNew = new Array();
arrayNew[0] = "Olá";
console.log(arrayNew);
// saída: ['Olá']
Nessas duas declarações o resultado é o mesmo, ou seja, o array é criado sem nenhum elemento. A seguir, atribuímos o conteúdo “Olá” na posição inicial do array. Já nos dois próximos exemplos, atribuímos os valores 1 e 2 para os elementos do array. O resultado é o mesmo para as duas opções.
var novaArrayLiteral = [1,2];
console.log(novaArrayLiteral);
// saída: [ 1, 2 ]
var novaArrayNew = new Array(1,2);
console.log(novaArrayNew);
// saída: [ 1, 2 ]
Nos próximos dois exemplos temos uma diferença entre os resultados. Perceba que na forma literal o valor 2 é atribuído ao primeiro elemento do array. Por isso, a propriedade length, que corresponde ao tamanho do array, retorna o valor 1. Já ao inicializarmos a variável com o construtor new Array (2), ele será criado com dois elementos vazios.
A seguir, atribuímos o conteúdo “Olá” à primeira posição. Perceba que o resultado mostra um elemento com o conteúdo adicionado e outro vazio. Além disso, o tamanho do array é de dois elementos.
var outraArrayLiteral = [2];
console.log(outraArrayLiteral[0]);
console.log(outraArrayLiteral.length);
// saída: [ 2 ]
// 1
var outraArrayNew = new Array(2);;
outraArrayNew[0] = "Olá";
console.log(outraArrayNew);
console.log(outraArrayNew.length);
// saída: [ 'Olá', <1 empty item> ]
// 2
Array Bidimensional
O array bidimensional nada mais é que um array que armazena outro array. Trata-se de um recurso muito útil em diversas situações. Confira o próximo exemplo, em que criamos um array bidimensional para armazenar o nome, sobrenome, idade e curso dos alunos. Confira o código.
var arrayBidimensionalLiteral = [];
arrayBidimensionalLiteral[0] = ["João", "Souza", 20, "Direito"];
arrayBidimensionalLiteral[1] = ["Maria", "Gonçalves", 21, "Medicina"];
console.log(arrayBidimensionalLiteral);
/*saída:
[
[ 'João', 'Souza', 20, 'Direito' ],
[ 'Maria', 'Gonçalves', 21, 'Medicina' ]
]
*/
var arrayBidimensionalNew = new Array();
arrayBidimensionalNew[0] = new Array("João", "Souza", 20, "Direito");
arrayBidimensionalNew[1] = new Array("Maria", "Gonçalves", 21, "Medicina");
console.log(arrayBidimensionalNew);
/* saída:
[
[ 'João', 'Souza', 20, 'Direito' ],
[ 'Maria', 'Gonçalves', 21, 'Medicina' ]
]
*/
Nesse exemplo, fizemos a declaração do array tanto da forma literal quanto com o construtor new(). Perceba que primeiro criamos um array unidimensional e, a seguir, acessamos cada elemento para adicionar um novo array com o conteúdo desejado.
Quais as propriedades e métodos do JavaScript Array?
O objeto array oferece uma série de propriedades e métodos que ajudam as pessoas que desenvolvem programas a utilizar esse recurso em suas aplicações web. Confira, a seguir, os principais deles.
Propriedades
Array.length
Como dissemos, a propriedade length () retorna o tamanho de elementos em um array. Já passamos por essa propriedade no exemplo sobre iteração de arrays, o que demonstra como esse recurso é útil para a manipulação da estrutura de repetição for ou para outros loops semelhantes.
get Array
Trata-se de uma propriedade com valor de função, que funciona como uma função construtora para a criação de objetos derivados.
Array.prototype
A propriedade prototype permite a criação de propriedades com característica de função. Observe o exemplo a seguir.
Array.prototype.retornaPares = function() {
var numerosPares = [];
this.forEach(elemento => {
if (elemento % 2 === 0 )
numerosPares.push(elemento);
})
return numerosPares;
};
var arrayNumeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arrayPares = arrayNumeros.retornaPares();
console.log(arrayPares);
Nesse exemplo, criamos uma prototype chamada retornaPares () para retornar os números pares em um novo array. Perceba que criamos um array vazio e utilizamos o método forEach () para fazer a leitura da variável e adicionar os elementos que atendem ao critério de seleção por meio do método push (). A seguir, retornamos o novo array apenas com o resultado desejado.
Métodos
Array.from()
O método from() é utilizado quando queremos criar um array a partir de um objeto que não é um array. Um exemplo são as strings em que cada caractere é convertido para um elemento de array. Veja o código a seguir.
var frase = "JavaScript"
var arrayFrase = Array.from(frase);
console.log(arrayFrase);
/* saída:
[
'J', 'a', 'v', 'a',
'S', 'c', 'r', 'i',
'p', 't'
]*/
Array.isArray ()
O método isArray () é empregado quando queremos descobrir se uma variável ou constante é um objeto array. Caso o resultado seja positivo, ele retorna o valor verdadeiro. Se for negativo, o retorno é falso. Veja o exemplo abaixo.
var nomes = ["João","Maria", "Paulo", "Pedro"];
console.log(Array.isArray(nomes));
// saída: true
var nomesString = "João, Maria, Paulo, Pedro";
console.log(Array.isArray(nomesString));
// saída: false
Array.of ()
O método Array.of () retorna um novo array com o elemento ou os elementos definidos entre os parênteses. Observe o exemplo.
var novoArray = Array.of(2);
console.log(novoArray);
// saída: [ 2 ]
var outroArray = Array.of(1,2,3);
console.log(outroArray);
// saída: [ 1, 2, 3 ]
var arrayVazio = Array.of();
console.log(arrayVazio);
// saída: []
Como transformar itens de um array em strings com o método join()?
O método Join() tem como objetivo realizar a conversão de um determinado array para uma String, esse tipo de processo é bastante comum quando falamos em programação. Assim como o método toString(), ele também é bem simples de utilizar.
Um grande diferencial desse método é que não existe a necessidade da pessoa desenvolvedora utilizar nenhum outro método antes para depois poder utilizar o join(), sendo possível então passar diretamente o array que você deseja converter para string.
Por sua vez, ele não é um método que apresenta muitas informações. Sua sintaxe pode ser declarada dessa forma:
array.join([separador])O separador nada mais é que a forma que você deseja separar seu array de strings.
Algumas formas de realizar essa transformação são:
const valores = [10, 20, 30, 40, 50, 60]
console.log(valores.join())
// Output: 10,20,30,40,50,60
console.log(valores.join(' '))
// Output: 10 20 30 40 50 60
console.log(valores.join(' - '))
// Output: 10 - 20 - 30 - 40 - 50 - 60
console.log(valores.join(' . '))
// Output: 10 . 20 . 30 . 40 . 50 . 60Usando o método forEach() para percorrer os elementos do array!
Nos dias de hoje temos diversos métodos que possuem a capacidade de percorrer um determinado array, porém cada um apresenta suas particularidades, além disso, realizar a escolha certa do método que vai utilizar dentro do software é de grande importância.
O método forEach() é um dos diversos métodos utilizados para percorrer um determinado array passando então uma função de callback.
Realizando uma breve comparação provavelmente se você é uma pessoa programadora já ouviu falar do “for” que é utilizado para realizar comparação de itens, no caso o forEach não é muito diferente porém ele realiza a verificação a cada elemento que ele passa.
A sintaxe do método é conhecida dessa forma:
array.forEach(callback, [referência])- O callback, trata-se do retorno da função
- A referência é utilizado pela função de callback, referenciando sua utilização com a palavra reservada this.
Agora que já entendemos a sintaxe, vamos para o exemplo prático para melhor fixar o entendimento sobre esse método percorrendo então um array de números, apresentando seu índice e seu valor, o código ficará dessa forma:
const valores = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
valores.forEach((valor, index) => {
console.log('Index: ' + index + ' Value: ' + valor);
});
// Output: Index: 0 Value: 1
// Output: Index: 1 Value: 2
// Output: Index: 2 Value: 3
// Output: Index: 3 Value: 4
// Output: Index: 4 Value: 5
// Output: Index: 5 Value: 6
// Output: Index: 6 Value: 7
// Output: Index: 7 Value: 8
// Output: Index: 8 Value: 9
// Output: Index: 9 Value: 10Como ordenar um array com o método sort()?
Na programação, sempre quando falamos no método sort() a primeira coisa que vem na cabeça provavelmente é ordenar, já que traduzindo essa palavra de inglês para portugues é isso que podemos entender. Pois bem, é exatamente essa a função método sort() porém ela também tem a capacidade de ordenar e embaralhar itens.
Sua sintaxe é montada dessa forma:
array.sort()Tendo a liberdade de passar dois parâmetros, sendo eles:
- Chave ou em inglês Key;
- Opção de inverter ou em inglês Reverse;
Para fixar melhor esse conhecimento, vamos imaginar um cenário onde uma pessoa educadora precisa colocar em ordem alfabética o nome de seus alunos, dessa forma ela dera utilizar o método sort() para a organização desses nomes, o código ficará dessa forma:
const nomes = ["Luan", "Daniel", "José", "Pedro", "João", "Caio", "Mariana", "Joaquim", "Lígia", "Rafaela", "Aline", "Barbara", "Carol"]
const nomesOrdenados = nomes.sort()
console.log("Array original", nomes)
console.log("Array em ordem alfabetica", nomesOrdenados)
//Output: Array original ['Luan', 'Daniel', 'José', 'Pedro', 'João', 'Caio', 'Mariana', 'Joaquim', 'Lígia', 'Rafaela', 'Aline', 'Barbara', 'Carol']
//Output: Array em ordem alfabetica ['Aline', 'Barbara', 'Caio', 'Carol', 'Daniel', 'Joaquim', 'José', 'João', 'Luan', 'Lígia', 'Mariana', 'Pedro', 'Rafaela']Agora vamos utilizar a função sort() junto com o reverse para que o método possa embaralhar alguns números. Para isso imagine um cenário no qual em uma feira, vai ocorrer um sorteio com os 3 primeiro números da sorte, para realizar esse sorteio vai ser utilizado o método e o código ficará dessa forma:
const numSorteio = [10, 6, 23, 68, 92, 11, 4, 29, 7, 3, 99, 1, 2, 3, 20, 22, 23, 49, 90]
console.log("Array original:", numSorteio)
// Output: Array original: [10, 6, 23, 68, 92, 11, 4, 29, 7, 3, 99, 1, 2, 3, 20, 22, 23, 49, 90]
const sorteado = numSorteio.sort()
console.log("Numeros desordenados:", sorteado)
// Output: Numeros desordenados: [1, 10, 11, 2, 20, 22, 23, 23, 29, 3, 3, 4, 49, 6, 68, 7, 90, 92, 99]Usando o método slice() para pegar uma parte específica de um array!
O método slice() é bastante utilizado para realizar cópias de uma determinada parte do array a partir de um subarray sem com que o array original seja modificado de alguma forma.
Sua sintaxe ficará dessa forma para utilização, fornecendo então dois parâmetros que não são obrigatórios:
array.slice(início, até)- O início é basicamente o ponto que seu array vai partir.
- O até significam em que local o array vai ser percorrido.
Como usar o método splice() para alterar uma parte específica do array!
O método splice() é mais uma das funções de array que a linguagem Javascript oferece para trazer mais facilidade às pessoas desenvolvedoras. Por sua vez, ele tem como objetivo alterar o conteúdo de uma determinada lista(array) adicionando ou removendo itens que não são mais utilizados.
A sintaxe desse método é bastante simples, no qual podemos encontrar um índice também conhecido como um ponto inicial ou de partida e o número de itens que são removidos, sua sintaxe completa ficará dessa forma:
array.splice(indice, numero de item);Agora vamos colocar em prática esse método que estamos aprendendo, para isso imagine um cenário no qual a pessoa programadora acabou encontrando alguns nomes no início de um array só de números e ela deseja remover essas informações tudo de uma vez, o código para essa correção ficará da seguinte forma:
const valores = ["Joana", "José", "Maria", 5, 6, 10, 12, 20]
console.log(valores.splice(3))
// Output: [5, 6, 10, 12, 20]Adicione elementos ao final de um array com o método Push()
O método Push() é um dos mais famosos entre os métodos de array, ele tem como objetivo adicionar um elemento no final de um determinado array.
Imaginando um cenário no qual uma pessoa está realizando uma compra no supermercado e deseja adicionar um novo item ao final de sua lista, o método Push pode auxiliar nessa situação adicionando esse item na última posição.
Na prática o código ficará dessa forma:
const itens = ["Banana", "Macarrão", "Arroz", "Feijão", "Carne", "Tomate", "Laranja"]
console.log("array original", itens)
itens.push("Suco de uva")
console.log("Array adicionando novo produto" , itens)Como excluir o último item de um array com o método Pop()
Na programação temos diferentes tipos de funções que podem ser utilizadas a nosso favor, diante disso o método Pop() é uma delas, tendo como objetivo realizar a remoção do último item de um determinado array retornando o elemento que foi removido e consequentemente alterando a matriz original.
Imaginando um cenário no qual temos um array de nomes e desejamos remover o último que se encontra dentro daquela matriz. Podemos utilizar o método Pop() da seguinte forma:
const names = ['Maria', 'João', 'Gabriela', 'Gabriel', 'Mariana', 'Matheus']
const lastItem = names.pop()
console.log('Array original sem o uso do metodo Pop()', names)
console.log('Ultimo nome do array:', lastItem)Shift(): como remover um item do início do array?
Se você deseja realizar a remoção de um determinado item dentro de um array, você pode utilizar a função Shift() que tem como objetivo sempre remover o primeiro item de dentro de um Array retornando o elemento, com isso ele retornará um novo array diminuindo a 1.
De início pode ficar um pouco confuso, mas imagine o seguinte cenário: onde você tem uma quantidade de cinco números sendo eles [ 5, 8, 9, 7, 3], o valor que essa função vai retornar é [5].
Sua sintaxe ficará dessa forma:
Array.shift()Mas para entender melhor a estrutura, você pode analisar o código abaixo:
const numbers = [5, 8, 9, 7, 3]
const firstNumber = numbers.shift()
console.log('Array original:', numbers)
console.log('Array usando o método:', firstNumber)Unshift(): como adicionar um item no inicio do array?
No inverso do método Shift(), temos também o método Unshift() que possui a capacidade de adicionar um ou diversos itens no início de um array retornando então um novo array com o comprimento estendido.
Sua sintaxe ficará dessa forma:
array.unshift(element1, element2, element3, …, elementXX)Agora para entendermos melhor, imagine um cenário onde temos uma pessoa educadora que possui uma lista de alunos porém ocorre a necessidade de inserir mais dois alunos nessa matriz, nessa situação você pode utilizar o método Unshift() dessa forma:
const alunos = ['Joaquim', 'Joana', 'José', 'Jasmim', 'Jardirei'];
alunos.unshift("João", "Jonas");
console.log("Array de alunos:", alunos)Como buscar o índice de um item dentro do array com indexOf() e lastIndexOf()?
Existem alguns métodos que podem ser utilizados para realizar a busca de um determinado item dentro de um array, sendo o IndexOf() e o LastIndexOf(), ambos são métodos de busca porém com uma funcionalidade um pouco diferente.
Começando pelo IndexOf(), ele tem como objetivo retornar o primeiro índice da ocorrência. Isso de início pode parecer um pouco confuso, mas de uma olhada em sua sintaxe:
matriz.indexOf(element, início)- Matriz, trata-se de local onde vai ocorrer a busca da informação.
- Element trata-se do elemento que vai ser procurando dentro do array;
- Início é o valor para iniciar a pesquisa, dessa forma se o valor for maior ou igual ao tamanho da matriz ele não será procurado, retornando então -1;
Agora para entendermos melhor na prática imagine um array com 10 posições, ele irá buscar se o número inserido se encontra ou não dentro do array, analise o código:
const array = [10, 14, 21, 35, 1, 3, 5, 77, 84, 42, 444, 724, 49, 8, 11, 2, 6]
console.log(array.indexOf(10))
// Output: 0
console.log(array.indexOf(84))
// Output: 8
console.log(array.indexOf(6))
// Output: 16
console.log(array.indexOf(1111))
// Output: -1
console.log(array.indexOf(101))
// Output: -1Vamos falar agora sobre o lastIndexOf(), com um objetivo um pouco diferente, ele retorna o último índice da ocorrência do array e caso ele não encontre nenhum valor, ele retornará -1.
Dê uma olhada na sintaxe do lastIndexOf():
array.lastIndexOf(element, position)- Array é o local onde o LastIndexOf() está realizando a busca;
- Element é o elemento que está sendo buscado;
- O position é um parâmetro opcional que pode ser utilizado para definir qual a posição será iniciada a busca;
Dê uma olhada agora nesse exemplo na prática para que possa ficar mais claro o entendimento:
const frase = "Eu estou aprendendo sobre lastIndexOf()"
console.log(frase.lastIndexOf('aprendendo'))
// Output: 9Como utilizar instâncias de array?
As instâncias de um array herdam de seu protótipo Array. Existem diversos métodos prototype disponíveis no objeto array que retornam novas instâncias com base em um array original. Acompanhe alguns deles a seguir.
Array.filter ()
O método array filter() faz uma busca em um array original e retorna os elementos encontrados em uma nova variável. Confira o exemplo abaixo.
var nomes = ['Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro'];
var nomesComP = nomes.filter(nome => nome.charAt(0) == "P" );
console.log(nomesComP);
// saída: [ 'Paulo', 'Pedro' ]
Nesse caso, utilizamos a função charAt(), que lê cada caractere de uma string, e comparamos com a letra que desejamos selecionar. Perceba que os resultados foram adicionados em um novo array, chamado nomesComP.
Array.map ()
Outro método que também retorna um novo array é o map (), que executa uma função callback para cada item e devolve o processamento em um novo array. No exemplo abaixo vamos transformar os itens da lista para letras maiúsculas. Confira a depuração do código, a seguir.
var listaNomes = [ 'Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro' ];
var nomesMaiuscula = listaNomes.map(nome => nome.toUpperCase());
console.log(nomesMaiuscula);
// saída: [ 'SILVIA', 'CARLOS', 'JOÃO', 'MARIA', 'PAULO', 'PEDRO' ]
Array.concat ()
O método concat () retorna um novo array por meio da união de outros arrays existentes. Confira o exemplo abaixo.
var listaMeninas = ["Silvia", "Maria", "Joana"];
var listaMeninos = ["João", "Paulo", "Pedro"];
var listaPessoas = listaMeninas.concat(listaMeninos);
console.log(listaPessoas);
// saída: [ 'Silvia', 'Maria', 'Joana', 'João', 'Paulo', 'Pedro' ]
var listaPessoas2 = listaMeninos.concat(listaMeninas);
console.log(listaPessoas2);
// saída: [ 'João', 'Paulo', 'Pedro', 'Silvia', 'Maria', 'Joana' ]
Nesse exemplo, criamos duas listas e utilizamos o método para concatená-las. Perceba que a ordem dos elementos será definida de acordo com o array que chama o método concat (). Fizemos duas simulações para ilustrar a diferença entre os resultados.
Array.reduce()
Um método bastante utilizado pelas pessoas desenvolvedoras de software, é o reduce(), como o próprio nome já diz tem como objetivo reduzir um determinado array passando por cada elemento dessa lista e retornando seu resultado.
Sua sintaxe ficará dessa forma:
matriz.reduce(callback, [valorInicial])- Matriz é o local onde o reduce vai percorrer;
- callback é o retorno da função de callback;
- valorIncial é o valor que temos no início da execução da função;
Agora para entendermos melhor, um exemplo na prática ficará dessa forma:
const array = [10, 22, 14, 30, 2];
const result = array.reduce(function(result, array){
return result + array;
}, 0);
console.log(result)Como usar um array? 3 exemplos!
Basicamente, o array é utilizado para armazenar um conjunto de dados. Já vimos como devemos fazer para criar uma variável desse tipo e, agora, precisamos saber como manipular os seus elementos da melhor forma. Confira, a seguir, diferentes formas de fazer essa atividade.
Adicionando elementos a um array
O primeiro passo para adicionar um elemento em um array é definir em que posição queremos fazer isso. Uma alternativa é inserir um item no final do array. Para isso, utilizamos o método push (), que, além de adicionar o novo item na última posição, retorna o novo tamanho do array. Confira o algoritmo a seguir.
var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var resultado = arrayNomes.push("Joana");
console.log(arrayNomes);
console.log(resultado);
/* saída:
[ 'João', 'Maria', 'Paulo', 'Pedro', 'Joana' ]
5
*/
arrayNomes.push("Silvia");
console.log(arrayNomes);
/* saída:
[ 'João', 'Maria', 'Paulo', 'Pedro', 'Joana', 'Silvia' ]
*
Perceba que o método push () também pode ser utilizado sem a atribuição do valor retornado para alguma variável. Da mesma forma, o item será incluído na última posição do array.
Também podemos incluir um ou mais elementos na primeira posição do array. Para isso, utilizamos o método unshift (). Veja o exemplo de JavaScript add to array, a seguir.
var arrayNomes = ["João", "Maria", "Paulo", "Pedro"];
var totalItens = arrayNomes.unshift("Silvia", "Carlos");
console.log(arrayNomes);
// saída: [ 'Silvia', 'Carlos', 'João', 'Maria', 'Paulo', 'Pedro' ]
Outra possibilidade é a inclusão de um elemento em uma posição específica do array. Para isso, utilizamos o método splice (), que contém o índice em que haverá a inserção do elemento, o número de elementos que serão excluídos — o método permite isso também — e o item ou itens a serem incluídos. Confira o exemplo.
var arrayInserirNomes = ["João", "Maria", "Paulo", "Pedro"];
arrayInserirNomes.splice(1,0,"Marlene");
console.log(arrayInserirNomes);
// saída: [ 'João', 'Marlene', 'Maria', 'Paulo', 'Pedro' ]
Perceba que, ao executarmos o método splice (), definimos o parâmetro referente à quantidade a ser excluída como zero. Por isso, o resultado foi a inserção do nome Marlene na posição 1 do array, seguido dos elementos restantes.
Removendo elementos de um array
A remoção de itens de um array também contém formas diferentes, de acordo com a posição do elemento. Para remover o primeiro item do array, utilizamos o método shift (). Além de excluir o elemento, ele retorna o item excluído, caso o valor seja atribuído a uma variável ou constante. Confira o código.
var removePrimeiroItemArray = ["João","Maria", "Paulo", "Pedro"];
var itemRemovido = removePrimeiroItemArray.shift();
console.log(removePrimeiroItemArray);
console.log("Item excluído: " + itemRemovido);
/* saída:
[ 'Maria', 'Paulo', 'Pedro' ]
Item excluído: João
*/
Podemos, também, excluir um elemento em alguma posição específica do array. Para isso, empregamos o método splice (), que já aplicamos para adicionar elementos na variável. No caso da remoção, basta informar o índice do item a ser excluído e a quantidade de elementos que serão removidos.
Vale dizer que a adição de novos elementos é opcional nesse método. Por isso, ele tanto pode ser usado para adicionar quanto para remove item from array JavaScript. Veja o exemplo com a exclusão.
var arrayRemoverNomes = ["João", "Maria", "Paulo", "Pedro"];
var itensRemovidos = arrayRemoverNomes.splice(2,2);
console.log(arrayRemoverNomes);
console.log("Itens removidos: " + itensRemovidos);
// saída: [ 'João', 'Maria', 'Joana', 'Cláudia', 'Pedro' ]
A remoção de um elemento também pode ser feita no final do array. Para isso, utilizamos o método pop (), que exclui o último elemento e retorna o item excluído. Veja o exemplo, a seguir.
var arrayExcluirUltimo = ["João", "Maria", "Paulo", "Pedro"];
var itemExcluido = arrayExcluirUltimo.pop();
console.log(arrayExcluirUltimo);
console.log("Item excluído: " + itemExcluido);
/* saída:
[ 'João', 'Maria', 'Paulo' ]
Item excluído: Pedro
*/
Alterando elementos de um array
A alteração do array pode ser feita por meio do método splice (), que, na prática, remove e adiciona um novo elemento no array na posição indicada para concluir a alteração. Veja o próximo exemplo.
var arrayAlterarNomes = ["João", "Maria", "Paulo", "Pedro"];
var itemAlterado = arrayAlterarNomes.splice(2,1, "Joana");
console.log(arrayAlterarNomes);
console.log("Item alterado: " + itemAlterado);
/* saída: [ 'João', 'Maria', 'Joana', 'Pedro' ]
Item alterado: Paulo
*/
Iterando arrays
Existem diferentes formas de iterar os elementos de um array. Uma delas é por meio da estrutura de repetição for. Perceba que utilizamos a propriedade length (), que informa a quantidade de itens existentes, para controlar o momento de interrupção do loop. Veja, a seguir, um loop para exibir os itens de um array.
var arrayNomes = ["João","Maria", "Paulo", "Pedro"];
for (i = 0; i < arrayNomes.length; i++){
console.log("O item " + i + " é " + arrayNomes[i] );
}
/* saída:
O item 0 é João
O item 1 é Maria
O item 2 é Paulo
O item 3 é Pedro
*/
O laço for também é útil para a manipulação de arrays bidimensionais ou multidimensionais, como a que mostramos anteriormente.
A linguagem oferece, ainda, uma série de métodos que ajudam a desenvolver essa atividade. O método forEach (), por exemplo, percorre os elementos do array e executa uma função callback para cada item. Confira como o mesmo código anterior pode ser escrito com a ajuda desse recurso.
var arrayNomes = ["João","Maria", "Paulo", "Pedro"];
arrayNomes.forEach((elemento, indice) => console.log("O item " + indice + " é " + elemento ));
/* saída:
O item 0 é João
O item 1 é Maria
O item 2 é Paulo
O item 3 é Pedro
*/
Arrays e objetos: quando usar e qual a diferença?
Como mencionamos, um array é uma estrutura de dados em que diversos elementos são armazenados e associados a um índice correspondente. Portanto, para cada item do array temos um índice numérico para acessá-lo, com o valor inicial do índice igual a zero. Confira o array abaixo.
var meuArray = [1, 2, 3, 4];
meuArray[4] = 5;
console.log(meuArray);
// saída: [ 1, 2, 3, 4, 5 ]
Cada elemento tem um índice e um valor determinado. Portanto, no índice 0 temos o elemento 1, no índice 1 temos o elemento 2 e assim por diante. Por isso, quando queremos manipular o array precisamos informar o índice correspondente. Nesse caso, adicionamos um elemento com índice 4 e conteúdo 5 à variável.
Em JavaScript, o array não pode ter índice literal, ou seja, não é possível utilizar uma string para acessar o elemento. É importante dizer que o índice numérico pode ser informado entre aspas, como meuArray [‘4’] para indicar o respectivo índice. Entretanto, essa prática não é utilizada, pois o valor será convertido para o correspondente numérico.
Uma forma de usar literais como índice é por meio de objetos. Um objeto é uma estrutura utilizada para agrupar diferentes propriedades de um mesmo elemento. No nosso exemplo sobre alunos, podemos ter um objeto chamado aluno que contém diversas características ligadas a ele, como nome, sobrenome, idade e curso. Veja a diferença entre os códigos abaixo.
var arrayAluno = ['João', 'Souza', 20, 'Direito'];
console.log("Nome do aluno: " + arrayAluno[0] + " " + arrayAluno[1]);
console.log("Idade: " + arrayAluno[2] + " " + "Curso: " + arrayAluno[3]);
/*saída:
Nome do aluno: João Souza
Idade: 20 Curso: Direito
*/
var objetoAluno = {
nome: "João",
sobrenome: "Souza",
idade: 20,
curso: "Direito"
}
console.log("Nome do aluno: " + objetoAluno.nome + " " + objetoAluno.sobrenome);
console.log("Idade: " + objetoAluno.idade + " " + "Curso: " + objetoAluno.curso);
/* saída:
Nome do aluno: João Souza
Idade: 20 Curso: Direito
*/
O arrayAluno contém as mesmas informações que o objetoAluno. Entretanto, a forma de acessar o conteúdo é diferente entre os dois formatos. Enquanto no array é preciso informar o índice de cada elemento, no objeto basta acessar a propriedade desejada.
A decisão sobre qual estrutura utilizar deve ser pensada de acordo com a finalidade pretendida. Se a intenção é manter uma lista de dados que se repetem, como uma relação de nomes ou de dados numéricos, o array é a melhor alternativa.
Já se a necessidade é armazenar um elemento com propriedades variadas, o objeto é a melhor opção. Além disso, é possível conciliar as duas alternativas e utilizar um JavaScript array of objects, em que temos um array para enumerar uma série de objetos.
O JavaScript Array é um objeto da linguagem que funciona como uma estrutura para armazenar diferentes tipos de dados, entre eles, outros arrays, objetos e funções. Além disso, é um recurso que oferece diversos métodos e propriedades que ajudam em sua manipulação e no desenvolvimento de aplicações web com mais organização.
Gostou do nosso conteúdo sobre a utilização de arrays em JavaScript? Então, confira este guia inicial sobre expressões regulares, com dicas imperdíveis sobre esse recurso!
