By U Zensen.

欲しいものはプログラミングで自分で作る。

JavaScriptのオブジェクトを参照渡しではなく、普通にコピーする方法!!

2016 / 9 / 29
JavaScript
160929_title

はじめに!!

どうも!JavaScript大好き、ぴーすけです!

いきなりですが、JavaScriptのオブジェクトをコピーしようと思って他の変数に代入すると、参照渡しになってしまいます。

それでも、配列とか連想配列とかを一旦保存したい時など、そのままコピーしたい時があると思います。

今回はそんな時のための、オブジェクトを参照渡しではなく、普通にコピーする方法を記事にしようと思います。

【注意】

参照渡しについてはいろいろ考え方があると思いますが、一般的に通じるのであればそれでいいと思っています。あしからず。

スポンサードリンク

いわゆる参照渡しとは

配列での例は以下の通りです。

var array1 = [1,2,3];//配列1を作成
var array2 = array1;//配列1の中身を配列2にコピー
array1[0] = 5;//配列1の中身を変更
console.log(array1);//[5,2,3]
console.log(array2);//[5,2,3](あれ?こっちも変わっちゃうの?)

オブジェクト(配列とか連想配列とか)をコピーしようとすると、実態ではなく、実態がある参照先の情報がコピーされてしまいます。なので、同じ実態を参照する変数が2つの変数が出来上がることになります。

同じ実態を参照しているので、どちらか片方を変更するともう片方にも影響が出てしまうということなんです。

詳しくは以下のようなページを参照してください。

配列をコピーする

配列を参照渡しではなく実態をコピーをするためには以下のようにすればOKです。

var array1 = [1,2,3];//配列1を作成
var array2 = array1.concat();//配列1の中身を配列2にコピー
array1[0] = 5;//配列1の中身を変更
console.log(array1);//[5,2,3]
console.log(array2);//[1,2,3](おー、こっちは変わってない)

concat()メソッドを引数なしで使用すれば実態をコピーすることができます。このやり方なら多次元配列も問題無くコピーできます!

concat()はそもそも、配列に他の配列をつないだ配列を返すメソッドで、つなぐ配列を指定しなければ、元の配列をそのまま返すしようになっているのでこのような動きになるのです。

連想配列をコピーする

連想配列を参照渡しではなく実態をコピーをするためには以下のようにすればOKです。

var map1 = { 'a': 1, 'b': 2 };//連想配列1を作成
var map2 = JSON.parse(JSON.stringify(map1));//一旦JSON形式に変換して、またオブジェクトに戻す
map1.a = 5//連想配列1の中身を変更
console.log(map1);//{ 'a': 5, 'b': 2 }
console.log(map2);//{ 'a': 1, 'b': 2 }

連想配列を一旦JSON.stringify()メソッドでJSON形式に変換して、その後にJSON.parse()メソッドを使って、JSON形式をオブジェクトに戻します。を引数なしで使用すれば実態をコピーすることができます。

以上!!

これでオブジェクトを好きなだけコピーしよう!!!

Pocket

コメント

コメントを残す