JavaScriptで文字列を配列の指定順序どおりにシャッフルする方法

本記事では、文字列 str を第一引数として、それと同じ長さの正の整数の配列 arr を第二引数として受け取る JavaScript 関数の実装方法を解説します。

この関数は、文字列内の文字を並べ替え(シャッフル)し、i 番目の位置にある文字が、シャッフル後の文字列の arr[i] 番目の位置へ移動するようにします。

入力例と期待される出力

たとえば、次の文字列と配列が与えられたとします。

const str = 'example';
const arr = [5, 2, 0, 6, 4, 1, 3];

この場合、期待される出力は次のとおりです。

const output = 'alxepem';

各文字がどのように移動するのかを整理すると、以下のようになります。

• 0番目の「e」→ 5番目へ(arr[0] = 5)
• 1番目の「x」→ 2番目へ(arr[1] = 2)
• 2番目の「a」→ 0番目へ(arr[2] = 0)
• 3番目の「m」→ 6番目へ(arr[3] = 6)
• 4番目の「p」→ 4番目へ(arr[4] = 4)
• 5番目の「l」→ 1番目へ(arr[5] = 1)
• 6番目の「e」→ 3番目へ(arr[6] = 3)

この結果、「example」は「alxepem」へと並べ替えられます。

サンプルコード

以下が実際のコード例です。

const str = 'example';
const arr = [5, 2, 0, 6, 4, 1, 3];
const shuffleString = (str = '', arr = []) => {
   let res = '';
   const map = new Map();
   for (let i = 0; i < arr.length; i++) {
      const char = str.charAt(i), index = arr[i]
      map.set(index, char)
   };
   for (let i = 0; i < arr.length; i++){
      res += map.get(i);
   };
   return res;
};
console.log(shuffleString(str, arr));

出力結果

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

alxepem

コードの仕組み

このアルゴリズムの処理の流れは以下のとおりです。

1. まず、文字の対応関係を保持するための空の Map を作成します。
2. 最初のループでは、元の文字列の各インデックス i について、その位置の文字 char と移動先のインデックス index = arr[i] をペアとして Map に登録します。
3. 2つ目のループでは、インデックス 0 から順に Map から文字を取り出し、新しい文字列 res を組み立てていきます。
4. 最後に、完成した文字列を返します。

このアプローチは O(n) の時間計算量で動作し、文字列を一度ずつ走査するだけで済むため非常に効率的です。なお、Map の代わりに長さ n の配列を事前に用意し、result[arr[i]] = str[i] と代入していく方法でも、まったく同じ結果を得られます。