JavaScript

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

30 de março de 2020

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.

mudar posicao no array capa

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

Subscribe
Notify of
guest
7 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
andré luis farias da silva

Muito bom! me ajudou bastante. obrigado.

Battisti

de nada André, valeu!

Hiago Laurenço Donha

Queria saber como funciona isso por baixo dos panos, como ele pega o valor retirado com [0].. sabe de algum artigo aonde explica isso?

Battisti

oi Hiago, com certeza há um algoritmo para realizar a função, você deve buscar pelo código fonte da linguagem…

Lucas

Não entendi o pq do [0]

Battisti

O 0 acessa o primeiro elemento/índice de um array ou string

DevNoob

Olá
Como faria para trocar a posição de 1 em 1 ? Ex: [“galinha”, “pato”, “gato”] ai então fazer a verificação para saber a posição de gato e sempre que for diferente da posição 0, subir uma?

Last edited 3 dias atrás by DevNoob
7
0
Would love your thoughts, please comment.x