Olá! Vimos muitas coisas ao longo das últimas aulas e você já deve ter aprendido que há situações em que os tipos de dados básicos não são suficientes para resolver os problemas encontrados na prática. Por exemplo, imagine que você queira escrever um programa que solicite ao usuário a entrada das notas de dez alunos de uma turma de sua escola. Como você faria isso?

Uma possibilidade seria escrever essa função que está no slide (Código 1). Neste código, criamos uma variável para cada nota e elas recebem o valor inserido pelo usuário no prompt.

Código 1 - 11_1 Notas.html e 11_1 Notas.js

Esse código, apesar de simples, é repetitivo, pois temos claramente duplicação de código, deixando-o muito extenso. Imagine declarar variáveis para turmas de cinquenta alunos!!! E o pior de tudo é que, na prática, teremos turmas com quantidade de alunos diferentes. Dessa forma, não sabemos previamente a quantidade de variáveis que precisaríamos declarar.

Para evitar a duplicação de código, você já viu em aulas anteriores que é possível usar comandos de iteração, reduzindo assim o tamanho do código. Veja uma versão desse mesmo programa usando laços. Observe o Código 2 e verifique se ele está correto. Nesse código temos um contador que iniciamos com 1 e, enquanto esse contador não chega a 11, lemos uma nota inserida pelo usuário e incrementamos o contador.

Código 2 - 11_2 Notas Laços.html e 11_2 Notas Laços.js

Você conseguiu detectar algum problema neste código? Ele está bem enxuto, mas o problema é que temos apenas uma única variável. Toda vez que uma nota é lida, é armazenada nessa mesma variável. Como a variável só consegue armazenar um valor por vez, a nota anteriormente lida é perdida. Para resolver esse problema, fazemos uso de uma estrutura de dados chamada de array, a qual pode ser utilizada para armazenar múltiplos valores que geralmente têm alguma relação entre si.

Por ser uma estrutura de dados muito importante e que abrange um conteúdo relativamente longo, vou dividir este conteúdo em duas aulas. Ao longo desta aula, você aprenderá a criar arrays, acessar elementos de um array, alterar elementos de um array e iteragir através de um array usando o laço for. Além disso, apresentarei também métodos nativos de JavaScript que são bastante úteis para trabalhar com arrays, como, por exemplo, métodos para inserir e remover elementos e métodos para concatenar, ou seja, unir dois arrays.

Na próxima aula, você aprenderá como ordenar arrays e como utilizar métodos muito úteis de iteração sobre os arrays que permitem, por exemplo, filtrar um array retornando apenas elementos que satisfazem uma determinada condição. Além disso, na próxima aula, você ainda aprenderá sobre arrays bidimensionais, também chamados de matrizes.

Vamos lá!!!

Array é uma estrutura de dados indexada que nos permite armazenar diversos valores em uma única variável e você pode acessar esses valores individualmente fazendo referência ao seu índice. A maneira mais fácil de criar um array é declarando os seus elementos explicitamente, como vemos no slide (Figura 1).

Chamamos essa forma de definição de arrays de notação literal. No slide (Figura 1) vemos também que é possível atribuir o valor do array a uma variável. O nome da variável, também considerado como o nome do array, pode ser usado para acessar os elementos do array, você verá como fazer isso logo mais.

Em JavaScript, os índices dos arrays são números naturais, ou seja, números inteiros maiores ou iguais a 0. Dessa forma, 0 é o índice do primeiro elemento, 1 é o índice do segundo elemento, e assim por diante, até o índice do último elemento, que terá sempre o valor igual ao tamanho do array menos um. No exemplo do slide (Figura 1), temos um array com 10 elementos. Assim sendo, o último elemento tem 9 como índice. De uma maneira geral, se você quiser acessar o n-ésimo elemento de um array, é só usar o índice (n - 1). É fácil, mas exige atenção!!!

O JavaScript não suporta arrays associativos. Em JavaScript, arrays usam índices numerados. Se você utilizar um índice nomeado, ao acessar um array, o JavaScript redefinirá o array para um objeto padrão. Após essa redefinição automática, métodos e propriedades do array produzirão resultados indefinidos ou incorretos. Portanto, como nesta disciplina não estamos trabalhando com orientação a objetos, não utilize índices que não sejam números naturais, ou seja, números maiores ou iguais a zero.

Neste outro slide (Ver Código 3), temos um exemplo mais concreto, com a definição de um array chamado dias que contém os nomes dos dias da semana em português. Note que espaços e quebras de linha não são importantes. Uma declaração, como a que temos no slide (Ver Código 3), pode abranger várias linhas.

Código 3 - 11_3 Dias da Semana.html e 11_3 Dias da Semana.js

Para acessar uma posição do array, é só usar o nome da variável e indicar o índice da posição a ser acessada entre colchetes. Por exemplo, o elemento dias[0] é o texto "domingo" e o elemento dias[6] é o texto "sábado".

Você lembra do método getDay() de uma data? Ele retorna um número entre 0 e 6 que representa o dia da semana da data. Em JavaScript, o 0 corresponde ao domingo, o 1 corresponde à segunda-feira e assim por diante até o 6, que corresponde ao sábado. Veja que temos uma relação direta entre o resultado desse método e os índices de nosso array.

Ou seja, utilizando esse método e o nosso array, podemos agora facilmente atribuir a uma variável o nome do dia atual. Para isso, como vemos no slide (Figura 2), basta atribuirmos a data atual à variável hoje, e acessarmos o elemento do array dias cujo índice é o resultado da expressão hoje.getDay(). Dessa forma, se estivermos em um domingo, a expressão hoje.getDay() retornará 0 e, por esse motivo, a variável texto receberá o valor "domingo", pois esse é o valor do elemento de índice 0 no array dias.

Você também pode criar arrays usando a palavra-chave new, como podemos ver no slide (Código 4), onde criamos o mesmo array dias, que definimos anteriormente. Porém, note que dessa vez usamos a palavra-chave new seguida do construtor Array. Na prática, não existe necessidade de utilizar essa forma de construir um array. Por simplicidade, legibilidade e velocidade de execução, use a primeira forma, ou seja, usando a notação literal de definição de arrays.

Código 4 - 11_4 Dias da Semana New.html e 11_4 Dias da Semana New.js

Caso necessite criar um array vazio, você pode simplesmente escrever os colchetes sem nenhum elemento entre eles, como vemos na definição da variável vazio do slide (Figura 3). Outra razão para não utilizar a palavra-chave new é que ela complica o código, podendo gerar resultados inesperados. Por exemplo, a variável teste1 apresentada no slide (Figura 3), está sendo inicializada com um array de dois elementos, 1 e 10. No entanto, a variável teste2 está sendo inicializada com um array com apenas um elemento, o valor undefined.

Outra característica importante dos arrays em JavaScript é que eles são um tipo especial de objeto. O operador typeof em JavaScript retorna object para arrays. Porém, arrays em JavaScript são melhor descritos como arrays mesmo.

Bom, encerro esta videoaula de introdução aos arrays por aqui. Na próxima videoaula, você aprenderá mais sobre essa estrutura de dados tão importante. Até lá!!!