JavaScriptで配列の末尾のn個の要素を先頭に移動する方法

配列に対して使える関数 prependN() を作ることを考えてみましょう。この関数は数値 n(関数を適用する配列の長さ以下である必要があります)を受け取り、配列の末尾から n 個の要素を取り出して、それらを配列の先頭へ移動させます。

重要なのは、この処理を「その場で(in-place)」行うこと、そして関数は処理の成否を表すブール値だけを返すという点です。

たとえば、次のようなケースを考えてみます。

// 入力配列が以下の場合:
const arr = ["blue", "red", "green", "orange", "yellow", "magenta", "cyan"];
// 数値 n が 3 のとき、
// 配列は次のように並べ替えられます:
const output = ["yellow", "magenta", "cyan", "blue", "red", "green", "orange"];
// 関数の戻り値は true になります

それでは、実際にこの関数を実装してみましょう。ここでは Array.prototype に reshuffle メソッドとして追加する形で実装します。

実装コード

const arr = ["blue", "red", "green", "orange", "yellow", "magenta", "cyan"];
Array.prototype.reshuffle = function(num){
  const { length: len } = this;
  if(num > len){
    return false;
  };
  const deleted = this.splice(len - num, num);
  this.unshift(...deleted);
  return true;
};
console.log(arr.reshuffle(4));
console.log(arr);

コードの解説

この実装のポイントは以下の通りです。

• まず、分割代入を使って配列の長さを取得します。
• n が配列の長さより大きい場合は false を返して処理を中断します。仕様上、n は配列の長さ以下である必要があるためです。
• splice(len - num, num) で末尾の n 個の要素を取り除き、同時にその要素群を変数に保存します。
• unshift(...deleted) を使って、取り除いた要素をスプレッド構文で展開しながら配列の先頭に挿入します。
• すべての処理が正常に完了したら true を返します。

出力結果

コンソールには次のように表示されます。

true
[
    'orange', 'yellow',
    'magenta', 'cyan',
    'blue', 'red',
    'green'
]

このように、末尾の 4 つの要素("orange"、"yellow"、"magenta"、"cyan")が先頭に移動し、残りの要素がその順序を保ったまま後ろにシフトしていることが確認できます。

補足:Array.prototype を拡張しない実装

なお、実務においては組み込みオブジェクトのプロトタイプを直接変更すると、名前の衝突や予期しない副作用のリスクがあるため、一般的には避けるべきとされています。同じ処理を通常の関数として書くと、次のようになります。

function reshuffle(array, num){
  if(num > array.length){
    return false;
  }
  const moved = array.splice(array.length - num, num);
  array.unshift(...moved);
  return true;
}

どちらの実装でも、splice と unshift を組み合わせることで、余分な配列を作らずに元の配列を直接並べ替えることができます。