【JavaScript】同じ先頭文字で始まる重複文字列を配列から削除する方法

本記事では、文字列の配列を受け取り、同じ文字で始まる文字列が複数存在する場合に、そのうち1つだけを残して残りをすべて削除するJavaScript関数の作成方法を解説します。

例えば、次のような配列があるとします。

const arr = ['Apple', 'Jack', 'Army', 'Car', 'Jason'];

この配列を見ると、「Apple」と「Army」はどちらも「A」で始まり、「Jack」と「Jason」はどちらも「J」で始まっています。先頭文字ごとに1つの文字列のみを残したいので、ここでは「Army」と「Jason」を配列から取り除くことになります。

実装例

Mapオブジェクトを使用して、すでに登場した先頭文字を記録しながら処理を進めるコードは以下の通りです。

const arr = ['Apple', 'Jack', 'Army', 'Car', 'Jason'];
const deleteSameLetterWord = arr => {
    const map = new Map();
    arr.forEach((el, ind) => {
        if(map.has(el[0])){
            arr.splice(ind, 1);
        } else {
            map.set(el[0], true);
        }
    });
};
deleteSameLetterWord(arr);
console.log(arr);

このコードでは、各要素の先頭文字（el[0]）をキーとしてMapに登録していき、すでに登録済みの文字で始まる要素はsplice()によって配列から削除されます。

出力結果

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

[ 'Apple', 'Jack', 'Car' ]

「Apple」「Jack」「Car」だけが残り、先頭文字が重複していた「Army」と「Jason」が正しく削除されていることがわかります。

補足：filter()を使ったより安全な方法

forEach()のループ中にsplice()で配列を直接変更すると、インデックスがずれて意図しない動作を引き起こすリスクがあります。実務では、元の配列を壊さずに新しい配列を返すfilter()を使う方法がおすすめです。

const uniqueByFirstLetter = arr => {
    const seen = new Set();
    return arr.filter(el => {
        if(seen.has(el[0])){
            return false;
        }
        seen.add(el[0]);
        return true;
    });
};

const result = uniqueByFirstLetter(['Apple', 'Jack', 'Army', 'Car', 'Jason']);
console.log(result); // [ 'Apple', 'Jack', 'Car' ]

こちらの方法なら、副作用なく先頭文字の重複を排除できるため、コードの安全性と可読性が向上します。