Déplacer un élément de tableau d'une position de tableau à une autre

Question

J'ai du mal à trouver comment déplacer un élément de tableau. Par exemple, étant donné ce qui suit :

var arr = [ 'a', 'b', 'c', 'd', 'e'];

Comment puis-je écrire une fonction pour déplacer 'd' avant 'b' ?

Ou 'a' après 'c' ?

Après le déplacement, les indices du reste des éléments doivent être mis à jour. Cela signifie que dans le premier exemple, après le déplacement,

arr = ['a', 'd', 'b', 'c', 'e']

Cela semble assez simple, mais je n'arrive pas à m'y retrouver.

Answer 1

Si vous souhaitez une version sur npm, array-move est ce qui se rapproche le plus de cette réponse, bien qu'il ne s'agisse pas de la même implémentation. Voir sa section utilisation pour plus de détails. La version précédente de cette réponse (qui modifiait Array.prototype.move) peut être trouvée sur npm à l'adresse suivante array.prototype.move .

---

J'ai eu un assez bon succès avec cette fonction :

function array_move(arr, old_index, new_index) {
    if (new_index >= arr.length) {
        var k = new_index - arr.length + 1;
        while (k--) {
            arr.push(undefined);
        }
    }
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
    return arr; // for testing
};

// returns [2, 1, 3]
console.log(array_move([1, 2, 3], 0, 1)); 

Notez que le dernier return est simplement à des fins de test : splice effectue les opérations sur le tableau en place, donc un retour n'est pas nécessaire. Par extension, cette move est une opération "in-place". Si vous voulez éviter cela et retourner une copie, utilisez slice .

Passer à travers le code :

1. Si new_index est supérieure à la longueur du tableau, nous voulons (je suppose) remplir correctement le tableau avec de nouvelles données de type undefined s. Ce petit bout de code gère cela en poussant undefined sur le tableau jusqu'à ce que nous ayons la bonne longueur.
2. Ensuite, en arr.splice(old_index, 1)[0] on retire l'ancien élément. splice renvoie l'élément qui a été découpé, mais c'est dans un tableau. Dans notre exemple ci-dessus, c'était [1] . Donc, nous prenons le premier indice de ce tableau pour obtenir l'indice brut. 1 là.
3. Ensuite, nous utilisons splice pour insérer cet élément à la place du new_index. Puisque nous avons rempli le tableau ci-dessus si new_index > arr.length il apparaîtra probablement au bon endroit, à moins qu'ils n'aient fait quelque chose d'étrange comme entrer un nombre négatif.

Une version plus sophistiquée pour tenir compte des indices négatifs :

function array_move(arr, old_index, new_index) {
    while (old_index < 0) {
        old_index += arr.length;
    }
    while (new_index < 0) {
        new_index += arr.length;
    }
    if (new_index >= arr.length) {
        var k = new_index - arr.length + 1;
        while (k--) {
            arr.push(undefined);
        }
    }
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
    return arr; // for testing purposes
};

// returns [1, 3, 2]
console.log(array_move([1, 2, 3], -1, -2));

Ce qui devrait tenir compte de choses comme array_move([1, 2, 3], -1, -2) correctement (déplacer le dernier élément à l'avant-dernière place). Le résultat devrait être [1, 3, 2] .

Quoi qu'il en soit, dans votre question originale, vous feriez array_move(arr, 0, 2) para a après c . Pour d avant b vous feriez array_move(arr, 3, 1) .

Answer 2

J'aime cette façon de faire. C'est concis et ça marche.

function arraymove(arr, fromIndex, toIndex) {
    var element = arr[fromIndex];
    arr.splice(fromIndex, 1);
    arr.splice(toIndex, 0, element);
}

Remarque : n'oubliez jamais de vérifier les limites de votre tableau.

Exécuter le snippet dans jsFiddle

Answer 3

Voici une phrase que j'ai trouvée sur JSPerf.....

Array.prototype.move = function(from, to) {
    this.splice(to, 0, this.splice(from, 1)[0]);
};

qui est génial à lire, mais si vous voulez des performances (dans de petits ensembles de données), essayez...

 Array.prototype.move2 = function(pos1, pos2) {
    // local variables
    var i, tmp;
    // cast input parameters to integers
    pos1 = parseInt(pos1, 10);
    pos2 = parseInt(pos2, 10);
    // if positions are different and inside array
    if (pos1 !== pos2 && 0 <= pos1 && pos1 <= this.length && 0 <= pos2 && pos2 <= this.length) {
      // save element from position 1
      tmp = this[pos1];
      // move element down and shift other elements up
      if (pos1 < pos2) {
        for (i = pos1; i < pos2; i++) {
          this[i] = this[i + 1];
        }
      }
      // move element up and shift other elements down
      else {
        for (i = pos1; i > pos2; i--) {
          this[i] = this[i - 1];
        }
      }
      // put element from position 1 to destination
      this[pos2] = tmp;
    }
  }

Je ne peux pas m'attribuer le mérite, tout doit aller à Richard Scarrott . Elle bat la méthode basée sur l'épissure pour les ensembles de données plus petits dans ce domaine. test de performance . Il est toutefois nettement plus lent sur les grands ensembles de données. comme le souligne Darwayne .

Answer 4

La méthode splice() ajoute/supprime des éléments à/depuis un tableau, et renvoie la méthode supprimé article(s).

Note : Cette méthode modifie le tableau original. /w3schools/

Array.prototype.move = function(from,to){
  this.splice(to,0,this.splice(from,1)[0]);
  return this;
};

var arr = [ 'a', 'b', 'c', 'd', 'e'];
arr.move(3,1);//["a", "d", "b", "c", "e"]

var arr = [ 'a', 'b', 'c', 'd', 'e'];
arr.move(0,2);//["b", "c", "a", "d", "e"]

car la fonction est enchaînable cela fonctionne aussi :

alert(arr.move(0,2).join(','));

Démonstration ici

Answer 5

J'ai eu l'idée de @Reid de pousser quelque chose à la place de l'élément qui est censé être déplacé pour garder la taille du tableau constante. Cela simplifie les calculs. En outre, le fait de pousser un objet vide présente l'avantage supplémentaire de pouvoir le rechercher de manière unique par la suite. Cela fonctionne parce que deux objets ne sont pas égaux tant qu'ils ne font pas référence au même objet.

({}) == ({}); // false

Voici donc la fonction qui prend en compte le tableau source, et les index source et destination. Vous pouvez l'ajouter à Array.prototype si nécessaire.

function moveObjectAtIndex(array, sourceIndex, destIndex) {
    var placeholder = {};
    // remove the object from its initial position and
    // plant the placeholder object in its place to
    // keep the array length constant
    var objectToMove = array.splice(sourceIndex, 1, placeholder)[0];
    // place the object in the desired position
    array.splice(destIndex, 0, objectToMove);
    // take out the temporary object
    array.splice(array.indexOf(placeholder), 1);
}