JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのスプレッド演算子を使った配列の複製方法を徹底解説

配列の複製（クローン）とは、ある配列の中身を別の配列にコピーすることを指します。従来はslice()メソッドを使って配列を複製するのが一般的でしたが、ES6（ECMAScript 2015）ではスプレッド演算子（...）が導入され、より簡潔に複製できるようになりました。この記事では、両方の方法を具体例とともに解説します。

slice()メソッドを使った配列の複製

サンプルコード

次の例では、slice()メソッドを使って配列をコピーしています。slice()は、指定したインデックスから別のインデックスまでの範囲を抜き出すメソッドです。引数にインデックスを何も指定しない場合、配列全体がそのまま切り出されます。その後、代入演算子（=）を使って、切り出した結果を新しい変数に格納します。

<html>
<body>
    <script>
        const games = ['cricket', 'hockey', 'football', 'kabaddi'];
        const clonegames = games.slice();
        document.write(clonegames);
    </script>
</body>
</html>

実行結果

cricket,hockey,football,kabaddi

このように、引数なしのslice()を呼び出すことで、元の配列と同じ要素を持つ新しい配列を作成できます。

スプレッド演算子を使った配列の複製

ES6では多くの新機能が追加されましたが、その中でもスプレッド演算子（...）は特に便利な機能の一つです。スプレッド演算子は配列やオブジェクトを展開するために使われ、配列の複製もその代表的な用途の一つです。

サンプルコード

<html>
<body>
    <script>
        const games = ['cricket', 'hockey', 'football', 'kabaddi'];
        const clonegames = [...games];
        document.write(clonegames);
    </script>
</body>
</html>

実行結果

cricket,hockey,football,kabaddi

[...games]のように記述するだけで、配列の全要素が新しい配列に展開・コピーされます。slice()メソッドよりも直感的で読みやすいコードになるのが大きなメリットです。

どちらの方法を選ぶべきか？

どちらの方法も浅いコピー（シャローコピー）である点は共通しています。つまり、ネストされたオブジェクトや配列までは完全に複製されません。そのため、単純な要素のみの配列であればスプレッド演算子が最適ですが、多次元配列を深く複製したい場合はstructuredClone()などの深いコピー手段の検討が必要です。日常的な用途では、簡潔で可読性の高いスプレッド演算子を使うのがおすすめです。

  1. JavaScriptでJSON配列からデータを読み取る方法をサンプルコード付きで解説

    Web開発では、APIから取得したJSONデータを処理する場面が非常によくあります。本記事では、JavaScriptを使ってJSON配列からデータを読み取り、画面に表示する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 JSON配列からデータを読み取る基本の流れ JSON形式の文字列をJavaScriptで扱うには、まずJSON.parse()メソッドで文字列をJavaScriptのオブジェクト（配列）に変換します。変換後は、forEach()メソッドなどを活用して、配列の各要素に格納された値へ簡単にアクセスできます。 サンプルコード <!DOCTYPE htm

  2. 【JavaScript入門】配列を使ってラジオボタンを動的に生成する方法

    JavaScriptでは、配列のデータをもとにラジオボタンを動的に生成することができます。その際に活用するのが、要素を作成する createElement() メソッドと、作成した要素を画面に追加する appendChild() メソッドです。 サンプルコード 以下は、性別の選択肢を配列で管理し、それを元にラジオボタンを自動生成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=devic