JavaScriptで配列をコピーする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで配列をコピーする方法について現役エンジニアが解説しています。配列をコピーするには、シャローコピーとディープコピーがあります。元の配列とは別のコピーはディープコピーで、JavaScriptではArrayクラスのfromメソッドを使ってコピーしましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで配列をコピーする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで配列をコピーする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

配列とは

配列とは、連続したデータの集合体です。

数字や文字列を入れることのできる箱をイメージしましょう。

また、通常では、変数は一つしか値を入れられないものの、配列はいくつもの値を変数に格納することが可能です。

 

配列をコピーする時によくある間違い

配列のコピーには2種類の方法があります。

①シャロ―コピー

②ディープコピー

そのため、配列をコピーする際には、仕様の違いに注意が必要です。

シャロ―コピーは、オリジナルとコピーが同じデータ元を参照しているため、片方の値を変えてしまうともう片方の値も変わってしまいます。

対して、一般的に連想されるコピーの概念に近いのはディープコピーが近いです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptで配列をコピーする方法

配列のコピーにあたっては、Array.fromメソッドを使います。

実際にコードに起こしてみましょう。

<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var original = [0, 1, 2];
      var copy = Array.from(original);
      console.log(original);
      console.log(copy);
    </script>
  </body>
</html>

JavaScriptでArray.fromメソッドを使って配列をディープコピーした結果

これで配列のコピーが完了しました。

 

まとめ

JavaScriptで配列をコピーする方法を現役エンジニアが解説しました。

単純に配列の中身を写すだけでは、完全にコピーできないことを覚えておきましょう。

 

執筆してくれたメンター

メンターTKさん

大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。

その後、建設系企業のシステム担当として従事。

JavaScriptやPHP、Processingなどに没頭中。

 

大石ゆかり

JavaScriptで配列をコピーする方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。