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
Muito bom! me ajudou bastante. obrigado.
de nada André, valeu!
Queria saber como funciona isso por baixo dos panos, como ele pega o valor retirado com [0].. sabe de algum artigo aonde explica isso?
oi Hiago, com certeza há um algoritmo para realizar a função, você deve buscar pelo código fonte da linguagem…
Não entendi o pq do [0]
O 0 acessa o primeiro elemento/índice de um array ou string
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?
Top demais Matheus!!
Fiquei com uma dúvida , eu entendi que o método splice me retorna uma lista com os itens eliminados e o método push pega esse o retorno e adiciona ao final do próprio array.
Mas esse ” [0] ” o que ele faz por baixo dos panos? eu vi que se não adiciona o “[0]”, essa expressão retorna um array com o elemento removido e não apenas o elemento.