JavaScriptの配列から最も長い文字列をすべて検索・取得する方法

以下のような文字列の配列があったとしましょう。

const arr = [
  'iLoveProgramming',
  'thisisalsoastrig',
  'Javascriptisfun',
  'helloworld',
  'canIBeTheLongest',
  'Laststring'
];

このような配列を受け取って、最も長い文字列をすべて取り出すJavaScript関数を作成します。最長の文字列が複数存在する場合も、漏れなくすべて取得できるのがポイントです。

関数は最終的に、最長の文字列だけを要素として含む新しい配列を返します。

コード例

reduceメソッドを使った実装は次のとおりです。

const arr = [
  'iLoveProgramming',
  'thisisalsoastrig',
  'Javascriptisfun',
  'helloworld',
  'canIBeTheLongest',
  'Laststring'
];

const getLongestStrings = (arr = []) => {
  return arr.reduce((acc, val, ind) => {
    if (!ind || acc[0].length < val.length) {
      return [val];
    }
    if (acc[0].length === val.length) {
      acc.push(val);
    }
    return acc;
  }, []);
};

console.log(getLongestStrings(arr));

実行結果

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

[ 'iLoveProgramming', 'thisisalsoastrig', 'canIBeTheLongest' ]

処理の流れを解説

このコードでは、Array.prototype.reduce を使って配列を1つの配列へと畳み込んでいます。具体的な処理の流れは以下のとおりです。

• アキュムレータ（acc）には、「これまでに見つかった最長の文字列」を順に格納していきます。
• 先頭の要素（ind が 0）のとき、または現在の値 val が acc[0] より長い場合は、新しい配列 [val] を返して最長記録を更新します。
• val の長さが acc[0] と同じ場合は、同率の最長として acc に追加します。
• それ以外の場合は acc をそのまま返し、次の要素の判定へ進みます。

この仕組みにより、配列を1回走査するだけで、同率を含むすべての最長文字列を収集できます。

別のアプローチ：filterとMath.maxを組み合わせる

より直感的なコードにしたい場合は、map・Math.max・filter を組み合わせる方法もおすすめです。

const getLongestStrings = (arr = []) => {
  const maxLength = Math.max(...arr.map(str => str.length));
  return arr.filter(str => str.length === maxLength);
};

まず map で各文字列の長さの一覧を作成し、Math.max でその最大値を求めます。続いて filter で最大長と一致する文字列だけを抽出すれば完成です。コードの意図が読み取りやすいため、チーム開発などではこちらの書き方が好まれることも少なくありません。

どちらの方法でも得られる結果は同じです。配列の規模やコードの可読性といった要件に応じて、用途に合った方を選択してください。