JavaScriptで配列内の複数の要素を先頭に移動する方法を解説

JavaScriptでは、配列と任意の個数の文字列を引数として受け取り、その文字列が配列内に存在する場合、該当する要素を配列の先頭へ移動する関数が必要になることがあります。

本記事では、splice() と unshift() を組み合わせてこの処理を実現する方法を解説します。

実装の考え方

処理の手順は以下の通りです。

• 可変長引数（レストパラメータ）を使って、任意の個数の文字列を受け取る
• 各文字列について indexOf() で配列内の位置を調べる
• 見つかった場合（インデックスが -1 以外の場合）、splice() でその要素を取り出し、unshift() で配列の先頭に挿入する

コード例

const arr = ['The', 'weather', 'today', 'is', 'a', 'bit', 'windy.'];
const pushFront = (arr, ...strings) => {
    strings.forEach(el => {
        const index = arr.indexOf(el);
        if(index !== -1){
            arr.unshift(arr.splice(index, 1)[0]);
        };
    });
};
pushFront(arr, 'today', 'air', 'bit', 'windy.', 'rain');
console.log(arr);

実行結果

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

[ 'windy.', 'bit', 'today', 'The', 'weather', 'is', 'a' ]

コードのポイント

• splice(index, 1)[0]：指定した位置から要素を1つ削除し、削除された要素（配列に格納されるため [0] で取り出す）を取得します。
• unshift()：取得した要素を配列の先頭に追加します。この2つを組み合わせることで、要素を「移動」できます。

なお、配列内に存在しない文字列（例：'air' や 'rain'）は indexOf() が -1 を返すため、何も処理されずそのままスキップされます。また、後から処理された文字列ほど先頭に近い位置に配置される点にも注意してください。