【JavaScript】配列の指定した範囲だけを逆順に反転させる方法

配列の一部だけを逆順に並べ替えるには？

JavaScriptでは、配列・開始インデックス・終了インデックスの3つを引数として受け取り、開始インデックスから終了インデックスの直前までの範囲だけを反転させる関数を実装したいケースがあります。組み込みの reverse() メソッドは配列全体を反転してしまうため、部分的な反転にはひと工夫が必要です。

期待される動作

たとえば、次のような配列を考えてみましょう。

const arr = [2, 6, 5, 8, 3, 5, 2, 6, 7];

開始インデックスを「3」、終了インデックスを「7」と指定した場合、インデックス3〜6にある要素（8, 3, 5, 2）だけが反転され、結果は次のようになります。

const output = [2, 6, 5, 2, 5, 3, 8, 6, 7];

範囲外にあたる先頭部分（2, 6, 5）と末尾部分（6, 7）は、元の順序のまま維持される点に注目してください。

サンプルコード

以下が実際の実装例です。まず配列自体を反転させる関数を用意し、それを splice() と組み合わせて指定範囲だけを入れ替えています。

const arr = [2, 6, 5, 8, 3, 5, 2, 6, 7];
const start = 3, end = 7;

// 配列を反転させる関数
const reverse = arr => {
  const { length: l } = arr;
  for (let i = 0; i < Math.floor(l / 2); i++) {
    const temp = arr[i];
    arr[i] = arr[l - i - 1];
    arr[l - i - 1] = temp;
  }
  return arr;
};

// 指定範囲だけを反転させる関数
const reverseBetween = (arr, start, end) => {
  const num = Math.min(end - start, arr.length - start);
  arr.splice(start, 0, ...reverse(arr.splice(start, num)));
};

reverseBetween(arr, start, end);
console.log(arr);

コードのポイント

• reverse()関数： 先頭と末尾の要素を一時変数を使って交換し、中央に到達するまで繰り返すことで配列を反転させています。
• num の計算： Math.min(end - start, arr.length - start) で反転対象の要素数を求めています。これにより、終了インデックスが配列の長さを超えていても安全に処理できます。
• splice()の活用： arr.splice(start, num) で開始位置から要素を取り出し、反転したものを同じ位置に挿し戻しています。

出力結果

このコードをコンソールで実行すると、次のように出力されます。

[
  2, 6, 5, 2, 5,
  3, 8, 6, 7
]

もっとシンプルな書き方：slice()を活用する

slice() を使うと、同じ処理をより簡潔で読みやすいコードにできます。

const reverseBetween = (arr, start, end) => {
  const part = arr.slice(start, end).reverse();
  arr.splice(start, part.length, ...part);
  return arr;
};

const arr = [2, 6, 5, 8, 3, 5, 2, 6, 7];
reverseBetween(arr, 3, 7);
console.log(arr); // [ 2, 6, 5, 2, 5, 3, 8, 6, 7 ]

slice(start, end) で該当範囲を抜き出して反転し、splice() で元の位置に戻すという流れです。ロジックが明確でバグも起きにくいため、実務ではこちらの書き方がおすすめです。

まとめ

配列の一部だけを反転したい場合は、「範囲を抜き出す → 反転する → 元の位置に戻す」という手順を slice() と splice() の組み合わせで実現するのが簡単です。なお、元の配列を変更したくない場合は、slice() やスプレッド構文を使って新しい配列を生成する方法も検討してみてください。