JavaScript: Mudar a posição de um elemento no array

Neste artigo veremos uma maneira de mudar a posição de um elemento no array, com funções nativas do JavaScript, de forma fácil.

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender coisa nova!

Podemos fazer a manipulação de um array via JavaScript, para posicionar os elementos em um índice que nós desejarmos

Isso serve, por exemplo, para quando precisamos exibir os itens em um select, e atualizar as options com valores que vem em um array

Então podemos manipular antes os itens e depois inserir nas options, vamos para a prática?

Trocar a posição de um elemento no array: prática

Podemos criar uma função para resolver este problema, veja:

function changePosition(arr, from, to) {
    arr.splice(to, 0, arr.splice(from, 1)[0]);
    return arr;
};

let arr = [1,2,4,5,6,7,8,9,10,3];

arr = changePosition(arr, 9, 3);

console.log(arr); // [1,2,3,4,5,6,7,8,9,10]

Criamos uma função chamada changePosition, que leva três argumentos: o array que vamos mudar os elementos de posição, a posição que o elemento está (from) e a posição que o elemento deve ficar (to)

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Veja que conseguimos organizar a ordem do array, mudando o número 3 da última posição para a número 2 (arrays começam contando do 0)

Então agora ficou fácil para você trocar a posição de um elemento no array, certo? 😀

Dica: como mudar o elemento da primeira posição para a última no array

E vai também uma dica bônus neste artigo, vamos mudar a posição do primeiro elemento para última no array

Veja como é simples:

let arr = [3,1,2];

arr.push(arr.splice(0,1)[0]);

console.log(arr); // [ 1, 2, 3 ]

Simplesmente removemos o primeiro elemento do array com splice, e pegamos ele no retorno com o [0]

Depois damos um push no array, que adiciona um elemento no fim do array

E este elemento sera o primeiro, que foi retirado com splice

Conclusão

Neste artigo vimos uma forma de trocar a posição de um elemento em um array

Criamos uma função para o nosso código poder ser reaproveitado e ficar bem estruturado nos helpers do nosso projeto 😀

E ainda, uma super dica de como colocar o primeiro elemento como último no array

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube