Array e Objetos em JS

Sandra Alves
sandra@cotemig.com.br
 Arrays
Como já explicado em outras aulas, 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 ]
 Arrays
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.

var meuArray = [1, 2, 3, 4];

meuArray[4] = 5;
console.log(meuArray);
// saída: [ 1, 2, 3, 4, 5 ]
indice 0 1 2 3 4
 Arrays
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.
 Arrays
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.
 Arrays x Objetos
var arrayAluno = ['João', 'Souza', 17, ‘Informática'];
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: 17 Curso: Informática */
var objetoAluno = {
nome: "João",
sobrenome: "Souza",
idade: 17,
curso: " Informática " }
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: 17 Curso: Informática */
 Arrays x Objetos
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.
 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.

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.
 Incluir um ou mais elementos na primeira
posição do array. 

Para isso, utilizamos o método unshift ().

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' ]
 Incluir um ou mais elementos na primeira
posição do array. 

Para isso, utilizamos o método unshift (). 

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' ]
 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' ]
 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 */

 Removendo elementos de um array
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.

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', ‘Paulo', 'Pedro' ]
//saída: Itens removidos: Paulo,Pedro
 Removendo elementos de um array
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 */
 Iterando arrays
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 */
 Quais as propriedades e métodos do
JavaScript Array?
Propriedades
Array.length – retorna o tamanho do array
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);
 Métodos
Array.from() - O método from() é utilizado quando queremos criar um array a
partir de um objeto que não é um array.
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

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
 Métodos
Array.of () - O método Array.of () retorna um novo array com o elemento ou os
elementos definidos entre os parênteses.

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: []
 Instâncias
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.

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.
 Instâncias
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.

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' ]