Como declarar, atribuir, acessar e remover elementos de um Array em JavaScript

Por: Angelo Luis Ferreira | 30/08/2022 Acessos: 4.243

Neste tutorial vamos mostrar como declarar, atribuir e acessar arrays em JavaScript.

Array é um tipo de dados do JavaScript que pode receber mais de um elemento ao mesmo tempo em uma única variável. Além disso, cada elemento de um array pode conter valores com qualquer tipo primitivo de dados, um objeto ou mesmo um outro array, e estará sempre relacionado à um índice numérico. Esta estrutura de dados é também conhecida como variável indexada ou matriz.

Tipos primitivos de dados do JavaScript: existem 6 tipos primitivos de dados no JavaScript, sendo eles: String, Number, Boolean, Null, undefined e Symbol (novo no ECMAScript 6)

Objetos JavaScript: é uma coleção de dados e/ou funcionalidades relacionadas. Estes dados e/ou funcionalidades consistem geralmente em variáveis e funções que dentro de um objeto passam a ser denominados de propriedades e métodos respectivamente. Leia Criando objetos e o uso do "this" no JavaScript e O básico sobre objetos JavaScript.

Obs: Um Array, portanto, não deixa de ser um tipo especial de objeto, porém com índices numéricos ordenados de maneira sequencial (começando em 0 e terminando em n-1).

Declarando um Array em JavaScript

a) Para declararmos um array podemos utilizar o construtor de linguagem new Array(), como mostra a sintaxe abaixo:

let valores = new Array(100, 500, 1000);

Obs.: A utilização do construtor new Array() somente é permitida para arrays vazios ou arrays com mais de um elemento.

b) Também podemos declarar um array em JavaScript utilizando colchetes (modo literal). As duas sintaxes são equivalentes e não alteram o resultado. Veja o nosso exemplo:

let valores = [100, 500, 1000];

c) Para facilitar o desenvolvimento e a visualização dos códigos, podemos declarar arrays como mostram os exemplos abaixo:

// Exemplo 1 - usando construtor
const valores1 = new Array(
   100,
   500,
   1000
);

// Exemplo 2 - modo literal
const valores2 = [
   100,
   500,
   1000
];

Obs.1: É  uma prática comum declarar arrays com a palavra-chave const em vez de let ou var. Os elementos e valores neste caso podem ser alterados normalmente, pois const em um array define apenas a referência constante de matriz para a variável. Porém, um array declarado como const não poderá ser reatribuído.

Obs.2: Pela simplicidade, legibilidade e velocidade de execução, use de preferência o método literal de array - exemplo 2.

Obs.3.: Em JavaScript, a utilização do ponto e vírgula (;) no final de cada linha de comando é opcional

Veja como ficou o nosso exemplo no squids editor.

Obs.: Para visualizarmos um array completo podemos utilizar o método document.querySelector() se referindo ao nome do array:

const valores = [
   100,
   500,
   1000
];

document.querySelector("#demo").innerHTML = valores;

Veja como ficou o nosso exemplo no squids editor.

d) Em JavaScript podemos declarar um array vazio. A declaração de array vazio é muito útil, pois com ela podemos definir que a variável somente receberá valores compostos tipo array. Veja abaixo um exemplo de como se declara um array vazio por meio de construtor ou pelo método literal:

const valor1 = new Array(); // array vazio (construtor)

const valor2 = []; // array vazio (literal)

Como atribuir ou alterar valores em um Array em JavaScript

a) No exemplo abaixo vamos atribuir valores a partir de um array vazio:

Obs.: Lembre-se que os elementos de um array em JavaScript sempre se iniciam a partir do índice 0 (zero).

const frutas = []; // array vazio
frutas[0] = "banana";
frutas[1] = "mamão";
frutas[2] = "laranja";
frutas[3] = "morango";

Veja como ficou o nosso exemplo no squids editor.

b) No exemplo a seguir vamos alterar os valores dos elementos com índice 1 e 3:

const frutas = ["banana","mamão","laranja","morango"];

// alterando valores nos índices 1 e 3
frutas[1] = "jaboticaba";
frutas[3] = "tamarindo";

Veja como ficou o nosso exemplo no squids editor.

const frutas = ["banana","mamão","laranja","morango"];

frutas[4] = "jaboticaba";
frutas[5] = "tamarindo";

c) No próximo exemplo vamos incluir 2 elementos nos índices 4 e 5:

Veja como ficou o nosso exemplo no squids editor.

Como contar o número de elementos de um Array

a) Para obtermos a quantidade de elementos de um array,  podemos utilizar a propriedade length do JavaScript.

Obs.: A propriedade length, portanto, retorna o comprimento de um array (número de elementos do array).

Veja no nosso exemplo a seguir:

const frutas = ["banana","mamão","laranja","morango"];
let elementosFrutas = frutas.length;

Veja como ficou o nosso exemplo no squids editor.

Como acessar elementos do array em JavaScript

a) Neste exemplo vamos acessar os elementos de índice 1 e 2:

const frutas = ["banana","mamão","laranja","morango"];
let elemento1 = frutas[1];
let elemento2 = frutas[2];

Veja como ficou o nosso exemplo no squids editor.

 b) No exemplo a seguir vamos acessar o primeiro e o último elemento do array:

const frutas = ["banana","mamão","laranja","morango"];
let firstItem = frutas[0]; // acessar o primeiro item do array
let lastItem = frutas[frutas.length-1]; // acessar o último item do array

 Obs.: Para acessarmos o último elemento do array utilizamos a propriedade length para contar o número total de elementos. Depois subtraímos 1 (um), pois a indexação de um array é sempre iniciada em 0 (zero).

Veja como ficou o nosso exemplo no squids editor. 

Como acessar todos elementos de um array em JavaScript

Existem várias formas para percorrer todo o array e acessar todos seus elementos. Veja os exemplos a seguir:

a) Usando a estrutura de repetição com o loop for:

const frutas = ["banana","mamão","laranja","morango"];

let texto = "";
for (i=0; i < frutas.length; i++) {
   texto +="<p>Elemento "+i+" = "+frutas[i]+"</p>";
}

document.querySelector("#demo").innerHTML = texto;

Veja como ficou o nosso exemplo no squids editor. 

b) Usando a estrutura de repetição com o loop for in:

const frutas = ["banana","mamão","laranja","morango"];

let texto = "";
for (let i in frutas) {
   texto +="<p>Elemento "+i+" = "+frutas[i]+"</p>";
}

document.querySelector("#demo").innerHTML = texto;

Veja como ficou o nosso exemplo no squids editor. 

c) usando o método forEach():

Obs.: O método forEach() percorre todos os elementos do array e executa uma função callback para cada item. 

const frutas = ["banana","mamão","laranja","morango"];

let texto = "";
frutas.forEach(getElements);

function getElements(value, index) {
	 texto +="<p>Elemento "+index+" = "+value+"</p>";
}

document.querySelector("#demo").innerHTML = texto;

Veja como ficou o nosso exemplo no squids editor. 

Resultado visual de todos exemplos acima para acessar todos os elementos de um array:

Como incluir um novo elemento ao final do Array em JavaScript

a) Veja no exemplo abaixo como incluir um novo item no final do array:

const frutas = ["banana","mamão","laranja","morango"];
frutas[frutas.length] = "jaboticaba";

Veja como ficou o nosso exemplo no squids editor. 

b) Também podemos adicionar um ou mais itens ao final do array usando a propriedade push:

Obs.: Para adicionar mais de um item ao final do array, separe-os com vírgula.

const frutas = ["banana","mamão","laranja","morango"];
frutas.push("jaboticaba");

Veja como ficou o nosso exemplo no squids editor.  

Resultado dos exemplos acima para adicionar um novo elemento no final do array em JavaScript:

 c) Atenção: Evite adicionar elementos com índices altos pode criar "vazios" indefinidos em uma matriz. Veja o exemplo a seguir:

const frutas = ["banana","mamão","laranja","morango"];
frutas[6] = "manga"

Veja como ficou o nosso exemplo no squids editor.  

Como incluir um novo elemento no início de um Array em JavaScript

a) Para adicionarmos um ou mais itens no início do array podemos utilizar a propriedade unshift:

Obs.: Para adicionar mais de um item no início do array, separe-os com vírgula.

const frutas = ["banana","mamão","laranja","morango"];
frutas.unshift("jaboticaba");

  Veja como ficou o nosso exemplo no squids editor.  

Como excluir elementos do início e final de um Array em JavaScript

a) Para removermos um elemento no início de um array podemos utilizar a propriedade shift:

const frutas = ["banana","mamão","laranja","morango"];
frutas.shift();

Veja como ficou o nosso exemplo no squids editor.  

 b) Para removermos um elemento no final de um array podemos utilizar a propriedade pop:

const frutas = ["banana","mamão","laranja","morango"];
frutas.pop();

Veja como ficou o nosso exemplo no squids editor.  

Array com tipos diferentes de dados em seus elementos

a) Como vimos anteriormente, cada elemento de array pode conter valores tipos diferentes de dados. Veja no exemplo abaixo onde utilizamos um array com vários tipos diferentes de dados (tipos primitivos, objetos e arrays):

const array =[
	"São Paulo",
    221,
    "",
    true,
    null,
    123.45,
    undefined,
    {"nome": "José", "sobrenome": "silva", "idade": 34},
    [22,45,56,"números"]

];
document.querySelector("#demo1").innerHTML = array;

Veja como ficou o nosso exemplo no squids editor.  

Array Bidimensional

Um array bidimensional nada mais é que um array que armazena um ou mais arrays. Este recurso é muito útil em diversas situações na programação.

a) No exemplo a seguir, vamos criar um array bidimensional para armazenar dados de clientes de um empresa:

const clientes = [
	["Paulo", "Modena", 40, "Santos"],
    ["Carolina", "Silva", 28, "São Paulo"],
    ["Marcos", "Santana", 39, "Campinas"]
];

// acessando dados do cliente índice 1
let nome = clientes[1][0];
let sobrenome = clientes[1][1];
let idade = clientes[1][2];
let cidade = clientes[1][3];

Veja como ficou o nosso exemplo no squids editor.

Documentação Oficial

1. [Array - MDN Web Docs] » Sobre o objeto global Array

2. [O básico sobre objetos JavaScript] » Informações básicas sobre o uso de objetos em JavaScript.