JavaScriptで多次元配列を並べ替える方法|特定の文字だけをソートする

問題の概要

次のように、配列の中にさらに配列が格納された「配列の配列(多次元配列)」があるとします。

const arr = [
  ["A","F","A","H","F","F"],
  ["F","A","A","F","F","H"]
];

求められているのは、このような配列を引数として受け取り、各サブ配列を次のルールに従って並べ替えるJavaScript関数を作成することです。

• 要素が「A」でも「F」でもない場合(例えば「H」)は、元の位置を維持する
• 要素が「A」または「F」である場合は、アルファベット順(「A」が先、「F」が後)に並べ替える

期待される出力

上記の配列に対してこの関数を実行すると、最終的な出力は次のようになります。

const output = [
  ["A","A","A","H","A","F"],
  ["F","F","F","F","F","H"]
];

ここでのポイントは、並べ替えの過程でサブ配列の要素が別のサブ配列へ移動してもよいという点です。実際、この処理では全要素をいったん1つの配列にまとめ(平坦化)、「A」と「F」だけを整列させた後、元の各サブ配列の長さに基づいて再分割しています。

コード例

const arr = [
  ["A","F","A","H","F","F"],
  ["F","A","A","F","F","H"]
];

const customSort = (arr = []) => {
  // すべてのサブ配列を1つの平坦な配列に結合
  const order = [].concat(...arr.slice()),
    res = [];
  order.forEach((el, ind) => {
    if (el === 'A') {
      const fIndex = order.indexOf('F');
      if (fIndex < ind) {
        order[fIndex] = 'A';
        order[ind] = 'F';
      }
    }
  });
  // 元のサブ配列と同じ長さごとに切り出して戻す
  arr.forEach(el => res.push(order.splice(0, el.length)));
  return res;
};

console.log(customSort(arr));

コードの仕組み

1. [].concat(...arr.slice()) により、すべてのサブ配列の要素を1つの平坦な配列に結合します。
2. forEach で各要素を走査し、「A」を見つけるたびに、それより前方にある「F」と入れ替えます。これにより、すべての「A」が「F」より前に配置されるように整列されます。
3. 「H」など「A」「F」以外の要素は、位置を一切動かさずそのまま保持されます。
4. 最後に splice(0, el.length) を使って、元の各サブ配列と同じ長さ単位で要素を切り出し、新しい2次元配列として返します。

実行結果

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

[
  [ 'A', 'A', 'A', 'H', 'A', 'F' ],
  [ 'F', 'F', 'F', 'F', 'F', 'H' ]
]