配列要素を移動する方法を理解するのに苦労しています。たとえば、次の場合：

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

'd'前に移動する関数を作成するにはどうすればよい'b'ですか？

それとも'a'後'c'？

移動後、残りの要素のインデックスを更新する必要があります。つまり、移動後の最初の例では、arr [0]は= 'a'、arr [1] = 'd'、arr [2] = 'b'、arr [3] = 'c'、arr [4] = 「e」

これはかなりシンプルなように思えますが、頭を包むことはできません。

npmのバージョンが必要な場合は、array-moveがこの回答に最も近くなりますが、同じ実装ではありません。詳細については、その使用法のセクションを参照してください。この回答の以前のバージョン（変更されたArray.prototype.move）は、npmのarray.prototype.moveにあります。

私はこの関数でかなり良い成功を収めました：

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)); 

最後returnは単にテストの目的であることに注意してください：splice配列に対して操作をインプレースで実行するため、戻り値は必要ありません。要するに、これmoveはインプレース操作です。それを避けてコピーを返したい場合は、を使用してくださいslice。

コードをステップ実行：

1. new_indexが配列の長さよりも大きい場合は、（おそらく）配列に新しいを適切に埋め込みますundefined。この小さなスニペットundefinedは、適切な長さになるまで配列をプッシュすることでこれを処理します。
2. 次に、でarr.splice(old_index, 1)[0]古い要素を接合します。spliceスプライスされた要素を返しますが、配列にあります。上記の例では、これはでした[1]。そのため、その配列の最初のインデックスを取得して、1そこにrawを取得します。
3. 次にsplice、この要素をnew_indexの場所に挿入するために使用します。ifの上に配列をパディングしたのでnew_index > arr.length、負の数で渡すような奇妙なことをしない限り、おそらく正しい場所に表示されます。

負のインデックスを説明するためのより洗練されたバージョン：

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));

これはarray_move([1, 2, 3], -1, -2)適切に説明する必要があります（最後の要素を最後から2番目に移動します）。その結果はになるはずです[1, 3, 2]。

いずれにせよ、元の質問ではarray_move(arr, 0, 2)、a後のためにしcます。以下のためにd前にb、あなたが行うだろうarray_move(arr, 3, 1)。

これが、私がJSPerfで見つけた1つのライナーです。

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

これは読むのに最高ですが、パフォーマンスが必要な場合は（小さなデータセットで）試してください...

 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;
    }
  }

私は信用できません、それはすべてリチャード・スカロットに行くべきです。このパフォーマンステストでは、小さいデータセットのスプライスベースの方法よりも優れています。ただし、ダーウェインが指摘するように、大規模なデータセットでは大幅に遅くなります。

私はこのように好きです。簡潔で機能します。

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

注：配列の境界を必ず確認してください。

jsFiddleでスニペットを実行する

splice（）メソッドは、配列にアイテムを追加/削除し、削除されたアイテムを返します。

注：このメソッドは、元の配列を変更します。/ 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"]

関数はチェーン可能であるため、これも機能します。

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

ここでデモ

私の2c。読みやすく、機能し、高速で、新しい配列を作成しません。

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;
}

配列サイズを一定に保つために移動されるはずのアイテムの代わりに何かをプッシュするという@Reidからこのアイデアを得ました。それは計算を単純化します。また、空のオブジェクトをプッシュすると、後で一意に検索できるという利点もあります。これは、2つのオブジェクトが同じオブジェクトを参照するまで等しくないためです。

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

これが、ソース配列を取り込む関数と、ソース、宛先インデックスです。必要に応じて、Array.prototypeに追加できます。

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);
}

これは@Reidのソリューションに基づいています。例外：

• Arrayプロトタイプは変更しません。
• アイテムを境界の外に右に移動しても、アイテムは作成されずundefined、アイテムが一番右の位置に移動するだけです。

関数：

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

単体テスト：

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);
    });
});

これが、オプションのパラメーターを使用した私のワンライナーES6ソリューションですon。

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

によって提案された最初のソリューションの適応 digiguru

パラメータonは、from移動したい要素から始まる要素の数です。

1つのアプローチは、スライスメソッドを使用して、必要な順序でピースを含む新しい配列を作成することです。

例

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）はあなたに['a']を与えます
• arr.slice（2,4）はあなたに['b'、 'c']を与えます
• arr.slice（4）はあなたに['e']を与えます

のsplice方法Arrayが役立つかもしれません：https : //developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice

配列のインデックスを積極的に再作成する必要があるため、比較的高価になる可能性があることに注意してください。

基本的な計算を実装して、配列要素をある位置から別の位置に移動するための汎用関数を作成できます。

JavaScriptの場合、次のようになります。

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; 

}

詳しくは「gloommatter」の「moving array elements」をご覧ください。

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

私はここでの答えにECMAScript 6基づいて不変のソリューションを実装@Mercしました：

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;
};

変数名は短くすることができ、コードを説明できるように長い名前を使用するだけです。

不変のmoveメソッド（元の配列を変更しないもの）が必要だったので、@ Reidの受け入れられた回答を、スプライスを行う前にObject.assignを使用して配列のコピーを作成するだけに変更しました。

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;
};

ここでのアクションでそれを示すjsfiddleが。

    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

近距離と遠距離の両方を移動するときに、これらの2つを組み合わせて少しうまく機能するようになりました。かなり一貫性のある結果が得られますが、これはおそらく、私よりも賢い誰かが少し微調整して、さまざまなサイズで異なるように動作するようにするなどです。

オブジェクトを短い距離で移動するときに他の方法のいくつかを使用すると、スプライスを使用するよりもはるかに高速（x10）でした。ただし、これは配列の長さに応じて変わる可能性がありますが、大きな配列の場合も同様です。

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

それは多くの場所で述べられています（Array.prototypeにカスタム関数を追加する）Arrayプロトタイプで遊ぶのは悪い考えかもしれません、とにかく私は様々な投稿から最高のものを組み合わせました、私はこれを現代のJavascriptを使って作りました：

    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

誰にでも役立つことを願っています

このバージョンはすべての目的に理想的であるとは限らず、誰もがカンマ式を好むわけではありませんが、ここに純粋な式であり、新鮮なコピーを作成するワンライナーがあります：

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

わずかにパフォーマンスが改善されたバージョンでは、移動が必要ない場合は入力配列が返されます。配列は変更されないため、不変の使用でも問題なく、純粋な式です。

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

どちらかの呼び出しは

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

つまり、新しいコピーを生成するために拡散に依存しています。固定アリティ3を使用するとmove、単一の式プロパティ、非破壊的な性質、またはのパフォーマンス上の利点が危険にさらされますsplice。繰り返しになりますが、これは、本番環境での使用を推奨するものではなく、いくつかの基準を満たす例です。

Array.move.js

概要

配列内の要素を移動し、移動した要素を含む配列を返します。

構文

array.move(index, howMany, toIndex);

パラメーター

index：要素を移動するインデックス。負の場合、インデックスは最後から始まります。

howMany：インデックスから移動する要素の数。

toIndex：移動した要素を配置する配列のインデックス。負の場合、toIndexは最後から始まります。

使用法

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"]

ポリフィル

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;
    }
});

私は@Reidの良い答えを使用しましたが、要素を配列の最後から1ステップ先に（ループのように）最初に移動するのに苦労しました。例：['a'、 'b'、 'c']は.move（2,3）を呼び出すことで['c'、 'a'、 'b']になるはずです

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
    };

リードの優れた答えへの追加として（そして私がコメントできないため）; モジュロを使用して、負のインデックスと大きすぎるインデックスの両方を「ロールオーバー」することができます。

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)); 

これはスワップの問題だと思いましたが、そうではありません。これが私のワンライナーソリューションです：

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));

ここに小さなテストがあります：

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 );

結果：

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

配列コピーなしの不変バージョン：

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);
  }, []);
};

最善の方法は、配列の新しいプロパティを定義することだと思います

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]

変異のないES6配列スプレッド演算子を使用する別の純粋なJSバリアント

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))
      
 

このメソッドは、元の配列を保持し、境界エラーをチェックします。

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}