J'ai du mal à trouver comment déplacer un élément de tableau. Par exemple, compte tenu des éléments suivants:

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

Comment puis-je écrire une fonction à déplacer 'd'auparavant '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 [0] serait = 'a', arr [1] = 'd' arr [2] = 'b', arr [3] = 'c', arr [4] = «e»

Cela semble être assez simple, mais je ne peux pas envelopper ma tête.

Si vous souhaitez une version sur npm, array-move est le plus proche de cette réponse, bien que ce ne soit pas la même implémentation. Voir sa section d'utilisation pour plus de détails. La version précédente de cette réponse (qui a modifié Array.prototype.move) peut être trouvée sur npm à 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 returnest simplement à des fins de test: spliceeffectue des opérations sur le tableau sur place, donc un retour n'est pas nécessaire. Par extension, il moves'agit d'une opération sur place. Si vous voulez éviter cela et renvoyer une copie, utilisez slice.

Parcourir le code:

1. Si new_indexest supérieur à la longueur du tableau, nous voulons (je présume) remplir correctement le tableau avec de nouveaux undefineds. Ce petit extrait gère cela en poussant undefinedsur le tableau jusqu'à ce que nous ayons la bonne longueur.
2. Puis, à l' arr.splice(old_index, 1)[0]intérieur, nous épissons l'ancien élément. splicerenvoie l'élément qui a été épissé, mais il est dans un tableau. Dans notre exemple ci-dessus, c'était [1]. Nous prenons donc le premier index de ce tableau pour y obtenir le brut 1.
3. Ensuite, nous utilisons splicepour insérer cet élément à la place de new_index. Puisque nous avons complété le tableau ci-dessus new_index > arr.length, il apparaîtra probablement au bon endroit, à moins qu'ils n'aient fait quelque chose d'étrange comme passer dans 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 expliquer des choses comme array_move([1, 2, 3], -1, -2)correctement (déplacer le dernier élément à l'avant-dernier endroit). Le résultat devrait être [1, 3, 2].

De toute façon, dans votre question d'origine, vous feriez array_move(arr, 0, 2)pour aaprès c. Pour davant b, vous le feriez array_move(arr, 3, 1).

Voici un liner que j'ai trouvé sur JSPerf ....

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

ce 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 prendre de crédit, tout devrait revenir à Richard Scarrott . Il bat la méthode basée sur l'épissure pour les petits ensembles de données dans ce test de performance . Il est cependant beaucoup plus lent sur des ensembles de données plus volumineux, comme le souligne Darwayne .

J'aime cette façon. 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 pas de vérifier les limites de votre tableau.

Exécutez l'extrait de code sur jsFiddle

La méthode splice () ajoute / supprime des éléments vers / depuis un tableau et renvoie les éléments supprimés .

Remarque: Cette méthode modifie le tableau d'origine. / 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"]

comme la fonction est chaînable, cela fonctionne aussi:

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

démo ici

Mon 2c. Facile à lire, il fonctionne, il est rapide, il ne crée pas de nouveaux tableaux.

function move(array, from, to) {
  if( to === from ) return array;

  var target = array[from];                         
  var increment = to < from ? -1 : 1;

  for(var k = from; k != to; k += increment){
    array[k] = array[k + increment];
  }
  array[to] = target;
  return array;
}

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. De plus, pousser un objet vide a l'avantage supplémentaire de pouvoir le rechercher uniquement plus tard. Cela fonctionne car deux objets ne sont pas égaux jusqu'à ce qu'ils se réfèrent au même objet.

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

Voici donc la fonction qui prend dans le tableau source, et la source, les index de destination. Vous pouvez l'ajouter au 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);
}

Ceci est basé sur la solution de @ Reid. Sauf:

• Je ne change pas le Arrayprototype.
• Déplacer un élément hors des limites vers la droite ne crée pas d' undefinedéléments, il déplace simplement l'élément vers la position la plus à droite.

Une fonction:

function move(array, oldIndex, newIndex) {
    if (newIndex >= array.length) {
        newIndex = array.length - 1;
    }
    array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
    return array;
}

Tests unitaires:

describe('ArrayHelper', function () {
    it('Move right', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 0, 1);
        assert.equal(array[0], 2);
        assert.equal(array[1], 1);
        assert.equal(array[2], 3);
    })
    it('Move left', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 1, 0);
        assert.equal(array[0], 2);
        assert.equal(array[1], 1);
        assert.equal(array[2], 3);
    });
    it('Move out of bounds to the left', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 1, -2);
        assert.equal(array[0], 2);
        assert.equal(array[1], 1);
        assert.equal(array[2], 3);
    });
    it('Move out of bounds to the right', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 1, 4);
        assert.equal(array[0], 1);
        assert.equal(array[1], 3);
        assert.equal(array[2], 2);
    });
});

Voici ma solution one liner ES6 avec un paramètre optionnel on.

if (typeof Array.prototype.move === "undefined") {
  Array.prototype.move = function(from, to, on = 1) {
    this.splice(to, 0, ...this.splice(from, on))
  }
}

Adaptation de la première solution proposée par digiguru

Le paramètre onest le nombre d'élément à partir duquel fromvous souhaitez vous déplacer.

La spliceméthode de Arraypourrait aider: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice

Gardez à l'esprit qu'il peut être relativement coûteux car il doit réindexer activement le tableau.

Une approche serait de créer un nouveau tableau avec les pièces dans l'ordre que vous souhaitez, en utilisant la méthode de tranche.

Exemple

var arr = [ 'a', 'b', 'c', 'd', 'e'];
var arr2 = arr.slice(0,1).concat( ['d'] ).concat( arr.slice(2,4) ).concat( arr.slice(4) );

• arr.slice (0,1) vous donne ['a']
• arr.slice (2,4) vous donne ['b', 'c']
• arr.slice (4) vous donne ['e']

Vous pouvez implémenter un calcul de base et créer une fonction universelle pour déplacer l'élément de tableau d'une position à l'autre.

Pour JavaScript, cela ressemble à ceci:

function magicFunction (targetArray, indexFrom, indexTo) { 

    targetElement = targetArray[indexFrom]; 
    magicIncrement = (indexTo - indexFrom) / Math.abs (indexTo - indexFrom); 

    for (Element = indexFrom; Element != indexTo; Element += magicIncrement){ 
        targetArray[Element] = targetArray[Element + magicIncrement]; 
    } 

    targetArray[indexTo] = targetElement; 

}

Consultez les "éléments du tableau en mouvement" sur "gloommatter" pour une explication détaillée.

http://www.gloommatter.com/DDesign/programming/moving-any-array-elements-universal-function.html

J'ai implémenté une ECMAScript 6solution immuable basée sur @Mercla réponse de ici:

const moveItemInArrayFromIndexToIndex = (array, fromIndex, toIndex) => {
  if (fromIndex === toIndex) return array;

  const newArray = [...array];

  const target = newArray[fromIndex];
  const inc = toIndex < fromIndex ? -1 : 1;

  for (let i = fromIndex; i !== toIndex; i += inc) {
    newArray[i] = newArray[i + inc];
  }

  newArray[toIndex] = target;

  return newArray;
};

Les noms de variables peuvent être raccourcis, il suffit d'utiliser des noms longs pour que le code puisse s'expliquer.

J'avais besoin d'une méthode de déplacement immuable (qui ne modifiait pas le tableau d'origine), j'ai donc adapté la réponse acceptée de @ Reid pour simplement utiliser Object.assign pour créer une copie du tableau avant de faire l'épissure.

Array.prototype.immutableMove = function (old_index, new_index) {
  var copy = Object.assign([], this);
  if (new_index >= copy.length) {
      var k = new_index - copy.length;
      while ((k--) + 1) {
          copy.push(undefined);
      }
  }
  copy.splice(new_index, 0, copy.splice(old_index, 1)[0]);
  return copy;
};

Voici un jsfiddle le montrant en action .

    Array.prototype.moveUp = function (value, by) {
        var index = this.indexOf(value),
            newPos = index - (by || 1);

        if (index === -1)
            throw new Error("Element not found in array");

        if (newPos < 0)
            newPos = 0;

        this.splice(index, 1);
        this.splice(newPos, 0, value);
    };

    Array.prototype.moveDown = function (value, by) {
        var index = this.indexOf(value),
            newPos = index + (by || 1);

        if (index === -1)
            throw new Error("Element not found in array");

        if (newPos >= this.length)
            newPos = this.length;

        this.splice(index, 1);
        this.splice(newPos, 0, value);
    };



    var arr = ['banana', 'curyWurst', 'pc', 'remembaHaruMembaru'];

    alert('withiout changes= '+arr[0]+' ||| '+arr[1]+' ||| '+arr[2]+' ||| '+arr[3]);
    arr.moveDown(arr[2]);


    alert('third word moved down= '+arr[0] + ' ||| ' + arr[1] + ' ||| ' + arr[2] + ' ||| ' + arr[3]);
    arr.moveUp(arr[2]);
    alert('third word moved up= '+arr[0] + ' ||| ' + arr[1] + ' ||| ' + arr[2] + ' ||| ' + arr[3]);

http://plnkr.co/edit/JaiAaO7FQcdPGPY6G337?p=preview

J'ai fini par combiner deux d'entre eux pour travailler un peu mieux lors de déplacements sur de petites et grandes distances. J'obtiens des résultats assez cohérents, mais cela pourrait probablement être modifié un peu par quelqu'un de plus intelligent que moi pour travailler différemment pour différentes tailles, etc.

Utiliser certaines des autres méthodes pour déplacer des objets sur de petites distances était beaucoup plus rapide (x10) que d'utiliser une épissure. Cela peut changer en fonction de la longueur des tableaux, mais c'est vrai pour les grands tableaux.

function ArrayMove(array, from, to) {
    if ( Math.abs(from - to) > 60) {
        array.splice(to, 0, array.splice(from, 1)[0]);
    } else {
        // works better when we are not moving things very far
        var target = array[from];
        var inc = (to - from) / Math.abs(to - from);
        var current = from;
        for (; current != to; current += inc) {
            array[current] = array[current + inc];
        }
        array[to] = target;    
    }
}

http://jsperf.com/arraymove-many-sizes

Il est dit à de nombreux endroits ( ajouter des fonctions personnalisées dans Array.prototype ) que jouer avec le prototype Array pourrait être une mauvaise idée, de toute façon j'ai combiné le meilleur de divers articles, je suis venu avec ceci, en utilisant Javascript moderne:

    Object.defineProperty(Array.prototype, 'immutableMove', {
        enumerable: false,
        value: function (old_index, new_index) {
            var copy = Object.assign([], this)
            if (new_index >= copy.length) {
                var k = new_index - copy.length;
                while ((k--) + 1) { copy.push(undefined); }
            }
            copy.splice(new_index, 0, copy.splice(old_index, 1)[0]);
            return copy
        }
    });

    //how to use it
    myArray=[0, 1, 2, 3, 4];
    myArray=myArray.immutableMove(2, 4);
    console.log(myArray);
    //result: 0, 1, 3, 4, 2

L'espoir peut être utile à n'importe qui

Cette version n'est pas idéale à toutes fins, et tout le monde n'aime pas les expressions virgule, mais voici une ligne unique qui est une expression pure, créant une nouvelle copie:

const move = (from, to, ...a) => (a.splice(to, 0, ...a.splice(from, 1)), a)

Une version légèrement améliorée des performances renvoie le tableau d'entrée si aucun déplacement n'est nécessaire, c'est toujours OK pour une utilisation immuable, car le tableau ne changera pas, et c'est toujours une expression pure:

const move = (from, to, ...a) => 
    from === to 
    ? a 
    : (a.splice(to, 0, ...a.splice(from, 1)), a)

L'invocation de l'un ou l'autre est

const shuffled = move(fromIndex, toIndex, ...list)

c'est-à-dire qu'il repose sur la diffusion pour générer une nouvelle copie. L'utilisation d'une arité fixe 3 movemettrait en péril la propriété d'expression unique, ou la nature non destructive, ou l'avantage de performance de splice. Encore une fois, il s'agit davantage d'un exemple qui répond à certains critères que d'une suggestion d'utilisation en production.

Array.move.js

Sommaire

Déplace les éléments dans un tableau, renvoyant un tableau contenant les éléments déplacés.

Syntaxe

array.move(index, howMany, toIndex);

Paramètres

index : Index auquel déplacer les éléments. S'il est négatif, l' indice commencera à la fin.

howMany : nombre d'éléments à déplacer de l' index .

toIndex : Index du tableau sur lequel placer les éléments déplacés. S'il est négatif, toIndex commencera à la fin.

Usage

array = ["a", "b", "c", "d", "e", "f", "g"];

array.move(3, 2, 1); // returns ["d","e"]

array; // returns ["a", "d", "e", "b", "c", "f", "g"]

Polyfill

Array.prototype.move || Object.defineProperty(Array.prototype, "move", {
    value: function (index, howMany, toIndex) {
        var
        array = this,
        index = parseInt(index) || 0,
        index = index < 0 ? array.length + index : index,
        toIndex = parseInt(toIndex) || 0,
        toIndex = toIndex < 0 ? array.length + toIndex : toIndex,
        toIndex = toIndex <= index ? toIndex : toIndex <= index + howMany ? index : toIndex - howMany,
        moved;

        array.splice.apply(array, [toIndex, 0].concat(moved = array.splice(index, howMany)));

        return moved;
    }
});

J'ai utilisé la belle réponse de @Reid , mais j'ai eu du mal à déplacer un élément de la fin d'un tableau un peu plus loin - au début (comme dans une boucle ). Par exemple ['a', 'b', 'c'] devrait devenir ['c', 'a', 'b'] en appelant .move (2,3)

J'ai réalisé cela en changeant le cas pour new_index> = this.length.

Array.prototype.move = function (old_index, new_index) {
        console.log(old_index + " " + new_index);
        while (old_index < 0) {
            old_index += this.length;
        }
        while (new_index < 0) {
            new_index += this.length;
        }
        if (new_index >= this.length) {
            new_index = new_index % this.length;
        }
        this.splice(new_index, 0, this.splice(old_index, 1)[0]);
        return this; // for testing purposes
    };

En complément de l'excellente réponse de Reid (et parce que je ne peux pas faire de commentaire); Vous pouvez utiliser modulo pour faire "survoler" des indices négatifs et des indices trop grands:

function array_move(arr, old_index, new_index) {
  new_index =((new_index % arr.length) + arr.length) % arr.length;
  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)); 

Je pensais que c'était un problème de swap mais ce n'est pas le cas. Voici ma solution monoplace:

const move = (arr, from, to) => arr.map((item, i) => i === to ? arr[from] : (i >= Math.min(from, to) && i <= Math.max(from, to) ? arr[i + Math.sign(to - from)] : item));

Voici un petit test:

let test = ['a', 'b', 'c', 'd', 'e'];
console.log(move(test, 0, 2)); // [ 'b', 'c', 'a', 'd', 'e' ]
console.log(move(test, 1, 3)); // [ 'a', 'c', 'd', 'b', 'e' ]
console.log(move(test, 2, 4)); // [ 'a', 'b', 'd', 'e', 'c' ]
console.log(move(test, 2, 0)); // [ 'c', 'a', 'b', 'd', 'e' ]
console.log(move(test, 3, 1)); // [ 'a', 'd', 'b', 'c', 'e' ]
console.log(move(test, 4, 2)); // [ 'a', 'b', 'e', 'c', 'd' ]
console.log(move(test, 4, 0)); // [ 'e', 'a', 'b', 'c', 'd' ]

let ar = ['a', 'b', 'c', 'd'];

function change( old_array, old_index , new_index ){

  return old_array.map(( item , index, array )=>{
    if( index === old_index ) return array[ new_index ];
    else if( index === new_index ) return array[ old_index ];
    else return item;
  });

}

let result = change( ar, 0, 1 );

console.log( result );

résultat:

["b", "a", "c", "d"]

Version immuable sans copie de tableau:

const moveInArray = (arr, fromIndex, toIndex) => {
  if (toIndex === fromIndex || toIndex >= arr.length) return arr;

  const toMove = arr[fromIndex];
  const movedForward = fromIndex < toIndex;

  return arr.reduce((res, next, index) => {
    if (index === fromIndex) return res;
    if (index === toIndex) return res.concat(
      movedForward ? [next, toMove] : [toMove, next]
    );

    return res.concat(next);
  }, []);
};

Je pense que la meilleure façon est de définir une nouvelle propriété pour les tableaux

Object.defineProperty(Array.prototype, 'move', {
    value: function (old_index, new_index) {
        while (old_index < 0) {
            old_index += this.length;
        }
        while (new_index < 0) {
            new_index += this.length;
        }
        if (new_index >= this.length) {
            let k = new_index - this.length;
            while ((k--) + 1) {
                this.push(undefined);
            }
        }
        this.splice(new_index, 0, this.splice(old_index, 1)[0]);
        return this;
    }
});

console.log([10, 20, 30, 40, 50].move(0, 1));  // [20, 10, 30, 40, 50]
console.log([10, 20, 30, 40, 50].move(0, 2));  // [20, 30, 10, 40, 50]

Une autre variante JS pure utilisant l'opérateur de propagation de tableau ES6 sans mutation

const reorder = (array, sourceIndex, destinationIndex) => {
	const smallerIndex = Math.min(sourceIndex, destinationIndex);
	const largerIndex = Math.max(sourceIndex, destinationIndex);

	return [
		...array.slice(0, smallerIndex),
		...(sourceIndex < destinationIndex
			? array.slice(smallerIndex + 1, largerIndex + 1)
			: []),
		array[sourceIndex],
		...(sourceIndex > destinationIndex
			? array.slice(smallerIndex, largerIndex)
			: []),
		...array.slice(largerIndex + 1),
	];
}

// returns ['a', 'c', 'd', 'e', 'b', 'f']
console.log(reorder(['a', 'b', 'c', 'd', 'e', 'f'], 1, 4))
      
 

Cette méthode préservera le tableau d'origine et vérifiera les erreurs de délimitation.

const move = (from, to, arr) => {
    to = Math.max(to,0)
    from > to 
        ? [].concat(
            arr.slice(0,to), 
            arr[from], 
            arr.filter((x,i) => i != from).slice(to)) 
        : to > from
            ? [].concat(
                arr.slice(0, from), 
                arr.slice(from + 1, to + 1), 
                arr[from], 
                arr.slice(to + 1))
            : arr}