Inverter e criar array a partir de um array em JavaScript. Dica 11

Nesta dica vemos como inverter os valores de um array e, como criar um array a partir de outro array.

Precisamos de um documento HTML, padrão dos últimos vídeos.

<!DOCTYPE html>
<html>
    <head>
        <title>Array parte 6</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Array parte 6</h1>
        <script src="array6.js"></script>
    </body>
</html>

E outro .js inicial

Para evitar possíveis erros, para cada exemplo utilizando o método slice foi criado um array com nome diferente e, como já informado neste paragrafo vamos começar com o método slice.

Método slice();

Utilizando o método slice nós criamos um array com partes de outro array. Mas vamos direto a parte pratica.

Criamos uma variável com um nome qualquer e, essa variável será nosso novo array.

var slice1 =

Precisamos informar qual será o nosso array que será copiado.

var slice1 = arrayEx1

E agora utilizamos o método slice.

var slice1 = arrayEx1.slice();

Mas, precisamos inserir parâmetros quando utilizamos o método slice

var slice1 = arrayEx1.slice(5);

Quando informarmos apenas um número e esse número for positivo, o novo array vai copiar os elementos do array que está sendo copiado, exceto do primeiro ao (neste caso) 5º elemento.

Resultado: 5,6,7

Mas, o parâmetro pode ser negativo e, quando ele for negativo e tiver declarado apenas um parâmetro em nosso slice os dados copiados serão sempre os últimos elementos.

var slice2 = arrayEx2.slice(-5);
document.write("<h1>Novo array 2 slice(-5): "+slice2+"</h1>");

Neste exemplo o resultado é:

Novo array 2 slice(-5): 3,4,5,6,7

E caso você precise pegar os primeiros elementos e não os últimos, a partir desse momento precisamos começar a declarar dois parâmetros em nosso slice.

var slice3 = arrayEx3.slice(0,5);
document.write("<h1>Novo array 3 slice(0,5): "+slice3+"</h1>");

O primeiro parâmetro sempre é relacionado ao inicio, onde começa a ser copiado. Eu quis que meu novo array copiasse os 5 primeiros elementos do array que está sendo copiado, por isso o primeiro parâmetro é zero (0). E quando o segundo parâmetro for positivo, significa que ele copiará até o elemento do indice informado.

Novo array 3 slice(0,5): 0,1,2,3,4

E quando o segundo parâmetro for negativo?

var slice4 = arrayEx4.slice(1,-1);

Neste caso este segundo parâmetro informa que, eu não quero que seja copiado o último elemento.

-2 ignora os dois últimos elementos, -3 os três últimos, e assim consecutivamente.

Resultado: Novo array 4 slice(1,-1): 1,2,3,4,5,6

Método reverse();

Para inverter a ordem dos elementos de um array utilizamos o método reverse. Coisa simples, objeto.metodo(); e depois "chamar" o objeto.

arrayEx1.reverse();
document.write("<h1>valores invertidos reverse(): "+arrayEx1+"</h1>");

Caso tenha ficado alguma dúvida ou queira conferir, a seguir temos o vídeo desta dica.

Assista ao vídeo:

Código fonte JavaScript (final)

var arrayEx1 = new Array(0,1,2,3,4,5,6,7);
document.write("<h1>Array 01: "+arrayEx1+"</h1>");
var arrayEx2 = new Array(0,1,2,3,4,5,6,7);
document.write("<h1>Array 02: "+arrayEx2+"</h1>");
var arrayEx3 = new Array(0,1,2,3,4,5,6,7);
document.write("<h1>Array 03: "+arrayEx3+"</h1>");
var arrayEx4 = new Array(0,1,2,3,4,5,6,7);
document.write("<h1>Array 04: "+arrayEx4+"</h1>");

document.write("<h1></br>slice();</h1>");
var slice1 = arrayEx1.slice(5);
document.write("<h1>Novo array 1 slice(5): "+slice1+"</h1>");
var slice2 = arrayEx2.slice(-5);
document.write("<h1>Novo array 2 slice(-5): "+slice2+"</h1>");

var slice3 = arrayEx3.slice(0,5);
document.write("<h1>Novo array 3 slice(0,5): "+slice3+"</h1>");

var slice4 = arrayEx4.slice(1,-1);
document.write("<h1>Novo array 4 slice(1,-1): "+slice4+"</h1>");

document.write("<h1></br>reverse();</h1>");

arrayEx1.reverse();
document.write("<h1>valores invertidos reverse(): "+arrayEx1+"</h1>");

Sugestão

Agora faça testes inserindo um valor negativo no primeiro parâmetro de um array, brinque com o slice, mas vá com calma.

Espero que esta dica tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.