Em aulas anteriores, você aprendeu a criar arrays, acessar ou alterar os seus elementos e iteragir através de um array usando o laço for. Além disso, você também conheceu alguns 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 dois arrays.

Nesta aula, você aprenderá a ordenar arrays, assim como também conhecerá métodos muito úteis de iteração sobre os arrays que permitem, por exemplo, que você aplique uma determinada função a todos os elementos de um array. Por fim, você também aprenderá sobre arrays bidimensionais, também chamados de matrizes. Vamos lá!

Para iniciar, você irá aprender como ordenar os elementos de um array. JavaScript oferece o método sort ("ordenar" em inglês), que ordena um array alfabeticamente. Veja o exemplo no slide.

Nele, temos o array cores, que contém as cores de nossa bandeira, na ordem que normalmente falamos: "Verde", "Amarelo", "Azul" e "Branco". Na linha 2, porém, chamamos o método sort no array cores, e só depois atribuímos a string desse array ao campo de texto da página. Note que a página exibe agora o array ordenado alfabeticamente, ou seja, Amarelo, Azul, Branco e Verde. Após a ordenação, portanto, o primeiro elemento não é mais "Verde", é "Amarelo".

Código 1 - 12_1 Ordenação.html e 12_1 Ordenação.js

E se quisermos ordenar o array de maneira decrescente? Uma das maneiras de fazer isso é usando o método reverse ("inverter" em inglês), que inverte a ordem dos elementos de um array, combinado com o método sort. Veja como podemos fazer isso no exemplo.

Note que logo após ordenar o nosso array na linha 2, invertemos sua ordem na linha 3, chamando o método reverse. Isto faz com que o último elemento se torne o primeiro, o penúltimo se torne o segundo e assim por diante. Dessa forma, a página exibirá o inverso do array ordenado alfabeticamente, ou seja, "Verde", "Branco", "Azul" e "Amarelo".

Como foi visto nos exemplos anteriores, a ordenação de strings pelo método sort é ALFABÉTICA. O que acontece, portanto, se tivermos um array com números dentro dele? Vamos ver um exemplo?

Nele, temos um array com os elementos 100 e 25. Era de se esperar que, ao ordenarmos esse array, o resultado fosse o array 25 e 100. No entanto, note que o resultado é o array 100 e 25. Você sabe por que isso acontece?

É bem simples. Na ordenação alfabética o 100 vem antes do 25. Isto porque o primeiro caracter do 100, ou seja, o 1, vem antes do 2, o primeiro caracter do 25. Por isso, o resultado não foi o esperado.

Para resolver esse problema, vou explicar primeiro como funciona a função sort. Quando essa função compara dois valores para poder ordená-los, ela utiliza uma função de comparação e verifica o seu retorno. Dados dois valores a e b:

1. Se o resultado da função de comparação for negativo, a é classificado antes de b.
2. Se o resultado da função de comparação for 0, nenhuma alteração será feita com a ordem de classificação dos dois valores.
3. Por fim, se o resultado da função de comparação for positivo, b é classificado antes de a.

Nos exemplos vistos, a função sort foi utilizada sem parâmetros. Por esse motivo, ele utilizou implicitamente uma função de comparação alfabética. Essa função retorna, por exemplo, -1 quando compara "Amarelo" com "Verde", 0 quando compara "Amarelo" com "Amarelo" e 1 quando compara "Verde" com "Amarelo".

A função sort, porém, pode receber uma função de comparação como parâmetro. Nos casos de valores numéricos, essa função pode ser definida da seguinte maneira: como você pode ver na Figura 4, temos que a função comparar simplesmente retorna o valor de a menos b. Note que essa função tem exatamente o resultado desejado. Ou seja:

1. Se a for menor que b, a função retorna um número negativo
2. Se a for igual a b, a função retorna 0
3. Por fim, se a for maior que b, a função retorna um número positivo

Portanto:

1. Se compararmos 25 e 100, a função retorna um número negativo, -75
2. Já, se compararmos 25 e 25, a função retorna 0
3. E se compararmos 100 e 25, a função retorna um número positivo, 75

Agora, tudo o que precisamos fazer é passar essa função para o método sort, como vemos na linha 2 do exemplo no slide.

Veja que agora o array exibido na tela está ordenado crescentemente.

É importante destacar que, se apenas forem invertidos o a e o b na subtração da função de ordenação, como vemos no slide (Figura 5), e usarmos essa nova função de ordenação, o array será ordenado decrescentemente.

Verifique esse comportamento alterando o arquivo 12_2 Ordenação Numérica.js

Código 2 - 12_2 Ordenação_Numérica.html

Agora que você já sabe ordenar um array, fica fácil encontrar o menor e o maior elemento dele, não é mesmo? Isto porque, se o array está ordenado crescentemente, o primeiro elemento é o menor e o último elemento é o maior. Assim, após ordenarmos o array numeros, o elemento numeros[0] é o menor elemento e o elemento numeros[numeros.length-1] é o maior elemento.

Veja, no slide, o que acontece se acrescentarmos ao nosso exemplo as linhas 5 e 6, onde acessamos os elementos numeros[0] e numeros[numeros.length-1] para, respectivamente, adicionar o menor elemento e o maior elemento ao texto que será exibido na página.

Observe que, de fato, eles contêm o menor e o maior elemento do array.

Uma opção mais simples é utilizar a expressão Math.min.apply(null, numeros) que retorna o menor valor do array numeros e a expressão Math.max.apply(null, numeros) que retorna o maior valor do array numeros.

Código 3 - 12_3 Menor e Maior Nativo.html e 12_3 Menor e Maior Nativo.js

Esta, porém, ainda não é a maneira mais eficiente de retornar esses valores. Veja agora como isso pode ser feito através de uma função própria para isso.

Vou aproveitar esse exemplo para demonstrar como podemos utilizar os arrays para fazer com que as funções retornem mais de um valor.

Código 4 - 12_4 Menor e Maior Método.html

No exemplo 12_4 Menor e Maior Método.html, temos um HTML muito simples: tem apenas um título e um parágrafo onde será escrito o resultado.

Então importamos o js (JavaScript), que é a parte que realmente vamos trabalhar. Nele, podemos ver, na linha 1, a declaração do array numeros e, nas linhas 3 e 4, atribuo à variável min o resultado da chamada da função minimo, passando o array numeros. E em max, o resultado da chamada da função maximo, passando também o array numeros.

Assim, nas linhas 10 e 11, simplesmente crio o texto da resposta, informando que o menor elemento é o valor da variável min e o maior elemento é o valor da variável max. O interessante é conhecer essas duas funções, minimo e maximo.

Vou começar pela função minimo, ou seja, pela variável min com o maior valor possível, e a ideia é varrer o array procurando os elementos e comparando esses elementos com aquele valor mínimo que eu tenho no momento. Para isso, usaremos o laço for com i variando de 0 até antes do tamanho, então de 0 até o tamanho menos um, ou seja, i menor que o array.length, incrementando o i a cada passo, como consta na linha 16.

E nas linhas 17 e 18 temos que, se aquele elemento for menor que o min, o min recebe aquele elemento. Então como a gente começou com o maior valor possível na primeira comparação, ele já retorna e substitui esse valor pelo primeiro elemento do array e passa a trabalhar com ele.

A função maximo é muito parecida, tem o mesmo princípio, só que agora a variável max, a que vai retornar, começa com o menor valor possível, que é o -Infinity, tá certo? Para isso, varremos o array com a função for, como mostra a linha 26, e se o elemento daquele índice que a gente tá no momento for maior que o max, a gente simplesmente atribui a max aquele elemento. Ok?

Então, como você pode ver, ao chegar na página HTML, de fato, ele conseguiu pegar o "Menor Elemento é 25" e "Maior Elemento é 100".

Mas note que, para passar por esse array, ou seja, para dar esse retorno, eu tive que passar duas vezes pelo array, uma vez procurando pelo mínimo e outra vez procurando pelo máximo.

Vou mostrar uma solução para você, para que a gente só passe uma vez pelo array. Para isso, retiramos a atribuição que constava nas linhas 3 e 4 e vamos criar uma função chamada maxmin, e a ideia é que ela passe pelo array apenas uma vez, já armazenando os valores máximo e o valor mínimo.

Então definimos a função máximo_minimo com a variável min começando com Infinity, ou seja, com o maior valor possível, e vamos começar o max, com o menor valor possível, ou seja –Infinity.

E então usamos o laço for, para varrer o array apenas uma vez, fazendo exatamente as duas comparações que fizemos separadamente nas funções minimo e maximo.

Como retornamos dois valores? Esse era o problema e, como eu disse, vou mostrar para você como uma função pode retornar mais de um valor. A solução é retornar um array onde o primeiro elemento do array tem o min e o segundo tem o max. Ao chamar essa função, vou receber um array que tem dois elementos, min e max. E o que eu faço? min recebe o elemento índice 0 desse array e max recebe o índice o 1 desse array, o segundo elemento do array. Então, podemos usar arrays para permitir que funções retornem mais de um valor.

Por fim, é só voltar à página e recarregar, o resultado é exatamente o mesmo, mas lembrando que dessa vez a gente passou apenas uma vez pelo array. Legal, não é?

Antes de concluir esta videoaula, vou te ensinar a encontrar o índice de um determinado elemento do array. Para isso, utilizarei os métodos indexOf e lastIndexOf. O método indexOf ("índice de" em inglês) procura no array o elemento passado como parâmetro e retorna o índice no array de sua primeira ocorrência. Por outro lado, o método lastIndexOf ("último índice de" em inglês) procura no array o elemento passado como parâmetro, mas retorna o índice no array de sua última ocorrência. Em ambos os métodos, caso o elemento não seja encontrado no array, o retorno é -1.

Observe este exemplo (Figura 8). Nele, temos um array com valores 100, 25, 79 e 100. Note que o 100 ocorre duas vezes. A variável a recebe o valor da expressão numeros.indexOf(100). Ou seja, a recebe 0, que é o índice da primeira ocorrência de 100 no array. A variável b recebe o valor da expressão numeros.lastIndexOf(100). Dessa forma, b recebe 3, que é o índice da última ocorrência de 100 no array. Por fim, as variáveis c e d recebem o valor -1 porque 200 não existe no array e ambos os métodos retornam -1 para o valor 200.

O método indexOf pode receber um segundo parâmetro para indicar de onde começar a busca pela primeira ocorrência do valor passado. Nesse novo exemplo (Figura 9) atribuímos à variável e o valor da expressão numeros.indexOf(100,1). Note que agora temos um segundo parâmetro, o valor 1, que indica que a busca deve ter início a partir do elemento de índice 1. Por esse motivo, a variável e recebe o valor 3, que corresponde ao índice da primeira ocorrência do valor 100 a partir do elemento de índice 1 no array numeros.

Código 5 - 12_5 Índices.html e 12_5 Índices.js

Em resumo, nesta videoaula você viu como ordenar arrays, como retornar o menor e o maior elemento de um array e como encontrar o índice de um determinado valor dentro do array. Na próxima videoaula, você conhecerá métodos de iteração sobre os arrays. Até lá!!!