配列に配列をpushした後に計算処理を行いたい

Question

###前提・実現したいこと
配列で複数の数値を管理して、インクリメントや書き換え等の処理を行いたい
のですが、書き換え後の配列が思ったような結果が出ないので質問させていただきたいです。

エラー内容
・配列をpushした配列内の一部を変更すると、想定外の部分まで同じ変更がされてしまう。

###該当のソースコード

	test=[]
	deta=[1,1]
	test.push(deta)
	test.push(deta)
	test[0][1]=2
	alert(test)
	//希望イメージ	[[1,2],[1,1]]
	//現実の結果	[[1,2],[1,2]]

###試したこと
pushしていないデータで試した場合想定外の処理は行われなかったため、pushに原因があるのだと思っているのですがよくわかっていません。

	//サブテスト
	test=[[1,1],[1,1]]
	test[0][1]=2
	alert(test)
	//希望イメージ	[[1,2],[1,1]]
	//現実の結果	[[1,2],[1,1]]

Answer 1

detaの中を見てみると、そこも変更されているのが分かると思います。
pushは引数のオブジェクトをコピーせずにArrayに追加しますので、「同じオブジェクト」になります。

わかりやすい例：

a = [1,2]
b = a // 同じオブジェクト
a[0] = 99
alert(b[0]) //=> 99

あなたの期待通りにするには、「同じオブジェクト」でなく、「同じ中身を持つ新たなオブジェクト」を用意してやる必要があります。

    test=[]
    deta=[1,1]
    test.push(deta.slice())
    test.push(deta.slice())
    test[0][1]=2
    alert(test)

と、一重のArrayであればslice()で出来ます。二重以上だと駄目ですが。

Comments

[id_masao]

分かりやすい例・対処法ありがとうございます。
slice()いれてみたら本当にできました。
簡易に導入する事ができそうです、ありがとうございます。

Answer 2

javascitpではArrayを始めとする一般のオブジェクトは参照としてあつかわれます。

dataに入っているのは配列ですが、これを2回pushすると同一の配列実体への参照がpushされます。そのためtestの0番目、1番目は同一の配列実体を参照することになりますので、

test[0][1]=2
test[1][1]=2

のどちらも同じ場所を更新するという意味になります。それぞれを異なる実体にしたいならオブジェクトをコピーして、それをpushしなければなりません。

オブジェクトのコピーの方法には結構バリエーションがあり、浅いコピーや深いコピーの違い、用いるライブラリーなどそれだけでも一つの記事が書けるほどではないかと思います。それはそれで研究してみるとよいと思いますが、例えばjQueryの$.extend()などはよく見る方法だと思います。

Comments

[id_masao]

ありがとうございます。
例としてあげて頂いた「$.extend()」を利用したら希望の結果を出力する事ができました。

[KSwordOfHaste]

オブジェクトが要素でない単純なArrayならotnさん回答のようにsliceの方が適切だと思いました。{ a: 1, b: 2}みたいなObjectだと$.extend()がいいのかも知れませんが。

Answer 3

	    test=[]
	    deta=[1,1]
	    var extend_deta=[]
	    $.extend(extend_deta, deta);
	    test.push(deta)
	    test.push(extend_deta)
	    test[0][1]=2
	    alert(test)
	    //希望イメージ    [[1,2],[1,1]]
	    //現実の結果    [[1,2],[1,1]]

頂いた回答を元に修正しました。
ありがとうございます。