[Javascript] objectのディープコピーを便利に扱えるスニペット

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

特定の言語で、既存の機能に物足りなくなったら、自分のスキルが向上したことを感じる、下駄です。
 

javascriptのobjectディープコピーが度々話題になっていますが、jsonレベルのデータコピーは簡単にできるんですが、javascriptのobjectは、中にfunctionも含めて、複雑なデータが含まれているんですが、使用するケースがまあまあ多いことから、
 

簡単に使える関数とネイティブに使えるコードを記載しておきます。

本日のIT謎掛け

「データコピー」と、かけまして、
 

「三部作の映画」と、ときます。
 

そのココロは・・・
 

サンショウ(参照と三章)が、全てにおいて重要になります。

ディープコピーの必要性

javascriptで、配列や連想配列などは、全てobjectというタイプに属します。
 

そのobjectの中には、functionも含めることができるので、単純なjson構造では無くなる場合も多々あります。
 

このサイトでも過去に紹介した方法では、functionがコピーされません。
 

過去記事 : 【javascript】オブジェクトデータのコピー
 

そして、何故ディープコピーをしなければ行けないかと言うと、
 

このように、javascriptでobjectを別のobject変数に代入すると、参照コピーになってしまいます。
 

ディープコピー関数を紹介

参照コピーを便利に使える場面ではありがたいんですが、ちゃんとコピーしなければ、いけない場合も数多くあるので、以下のような関数を作ってみました。
 

 

ディープコピーを使用する前に、この関数を実行して、読み込んでおきます。
 

ちゃんと、データの変更がコピーされた側だけになっているのと、functionデータも一緒にコピーされていることが確認できました。

ネイティブ環境で使いたい

javascriptのObject関数として使うとnew宣言しなくても、objectに対して直接使うことができます。
 

まずは、使用したいWEBページで読み込んだ時に、以下のコードを実行しておきます。
 

 

使いたい時は以下のようにすると、簡単にデータのコピーをすることができます。
 

ちゃんとコピーできていることも確認できます。
 

手順としては、関数として登録するのと、ネイティブとして登録するのは、同じなのですが、ネイティブ関数は、他の機能なども含めて便利ライブラリにしておくと、javascriptのプログラム進行をする時に、スッキリとしたプログラムが構築できるようになります。
 

実は他にも溜め込んでいるネイティブ機能がたくさんあるので、そのうちに公開したいと思います。
 

もし、「こんな機能がほしい」というような要望などあれば、コメントもらえると嬉しいです!!!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です