WDD 131: Fundamentos da Web Dinâmica

S03 – Atividade de Aprendizagem: Arrays JavaScript

Visão Geral

Um array é uma estrutura de dados que armazena vários valores em uma única variável em vez de declarar variáveis separadas para cada valor.

Preparação

Em JavaScript, arrays podem ser declarados assim:

let pontuacoes = [100, 72, 83, 94, 88, 87];

let nomes = ['Nancy','Blessing','Jorge','Svetlana'];

Os arrays são indexados com base em zero, o que significa que o primeiro elemento está no índice 0, o segundo elemento está no índice 1 e assim por diante.

Os arrays podem ser acessados por uma referência de índice:

let umaPontuacao = pontuacoes[0];  // A variável umaPontuacao recebe o valor 100

Os valores dos arrays podem ser modificados:

pontuacoes[0] = 99; // Esta expressão de atribuição alterou a primeira pontuação no array de 100 para 99.

Os arrays podem ser percorridos usando um loop for clássico:

for (let i = 0; i < pontuacoes.length; i++) {
  console.log(pontuacoes[i]);
}

Preferido: Os arrays podem ser percorridos usando outras estruturas de loop, como forEach:

pontuacoes.forEach(function(pontuacao) {
  console.log(pontuacao);
});

Os arrays têm uma propriedade length:

let pontuacoesNum = pontuacoes.length; // A variável pontuacoesNum recebe o valor 6

Métodos de Array

Os arrays têm vários métodos que podem ser usados para manipulá-los (alterá-los):

pontuacoes.push(100); // Adiciona um novo elemento ao final do array

pontuacoes.pop(); // Remove o último elemento do array

pontuacoes.shift(); // Remove o primeiro elemento do array

pontuacoes.unshift(100); // Adiciona um novo elemento ao início do array

pontuacoes.slice(2,3); // Corta uma parte do array começando em um índice para um determinado comprimento

pontuacoes.splice(2, 1); // Remove 1 elemento do array começando no índice 2

pontuacoes.join(', '); // Transforma o array em uma única string com uma opção delimitadora de vírgula e espaço

• Referência Arrays JavaScript – MDN
  Esta referência fornece uma lista completa de métodos de array, alguns dos quais serão amplamente utilizados neste curso.

Avalie Seu Conhecimento

Considerando esta declaração de array:

let nomes = ['Nancy','Blessing','Jorge','Svetlana'];

• Qual é o valor da seguinte expressão?

  nomes[2];

  Resposta

  Jorge

• Qual é o valor da seguinte expressão?

  nomes.length;

  Resposta

  4

• Qual é o índice do último item no array? (Svetlana)
  Resposta

  3

• O que a seguinte expressão faz?

  nomes.push('Sally');

  Resposta

  Adiciona um novo elemento ao final do array