勝手に上書きされてしまいます

Question

前提・実現したいこと

当方、JS初学者です。
vue.jsを使ってアプリを開発しており、

①配列を参照→
②参照した配列から、条件を基に新たな配列を作る→
③その配列内のデータを基に別の配列からデータを持ってきて、置き換える

というシステムを作成しようとしていたのですが、③の時点で何故か参照基のデータまで勝手に置き換わってしまいます。

半日ほどかけても解決に至らず途方に暮れています。。。
問題解決にお力添え頂けますと幸いです。

発生している問題・エラーメッセージ

上記の通りです

該当のソースコード

            const ptdatafiltered = this.pts.filter((included) => {
                return ( included.m1 === this.temp.name ||  included.m2 === this.temp.name || included.m3 === this.temp.name || included.u1 === this.temp.name || included.u2 === this.temp.name || included.u3 === this.temp.name );
            });
            
            this.temppt1.splice(0,100000,ptdatafiltered)

            this.lengthincludedpt = this.temppt1.length
            
                for (let i = 0; i < this.lengthincludedpt; i++) {
                    this.temppt1[i].m1 =  this.charactors.filter((included) => { return ( included.name === this.temppt1[i].m1 );});
                    this.temppt1[i].m2 =  this.charactors.filter((included) => { return ( included.name === this.temppt1[i].m2 );});
                    this.temppt1[i].m3 =  this.charactors.filter((included) => { return ( included.name === this.temppt1[i].m3 );});
                    this.temppt1[i].u1 =  this.charactors.filter((included) => { return ( included.name === this.temppt1[i].u1 );});
                    this.temppt1[i].u2 =  this.charactors.filter((included) => { return ( included.name === this.temppt1[i].u2 );});
                    this.temppt1[i].u3 =  this.charactors.filter((included) => { return ( included.name === this.temppt1[i].u3 );});
                    this.temppt1[i].w1 =  this.weapons.filter((included) => { return ( included.name === this.temppt1[i].w1 );});
                    this.temppt1[i].w2 =  this.weapons.filter((included) => { return ( included.name === this.temppt1[i].w2 );});
                    this.temppt1[i].w3 =  this.weapons.filter((included) => { return ( included.name === this.temppt1[i].w3 );});
                    this.temppt1[i].a1 =  this.weapons.filter((included) => { return ( included.name === this.temppt1[i].a1 );});
                    this.temppt1[i].a2 =  this.weapons.filter((included) => { return ( included.name === this.temppt1[i].a2 );});
                    this.temppt1[i].a3 =  this.weapons.filter((included) => { return ( included.name === this.temppt1[i].a3 );});
                    this.temppt1[i].number = i
                  }

試したこと

pts → 絞り込みを行って、temppt1にデータを送ります。勝手に書き換わる〜と言うのはこちらのデータになります。

代入方法をspliceからpushに変えたり、filterをfindに変えてみても上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

vue 2.6.12

Answer 1

まずその処理でspliceを使用する必要はないのでは？
（splice(0, 100000)は中身を一旦全消ししたい処理であるという予想）

本題ですが
その書き方だと同じ参照を持ったままになるので片方を変えるともう片方も変わってしまいます
Json文字列を挟んでオブジェクトを作り直すコピーをするといいと思います

this.temppt1 = JSON.parse(JSON.stringify( ptdatafiltered ));

Comments

[daitai001]

ご回答ありがとうございます！
こちらの方法でも無事解決いたしました！

本当に助かりました????

Answer 2

spliceは結果を戻り値で返すので、それを受け取っていないだけではないでしょうか。

this.temppt1.splice(0,100000,ptdatafiltered)
↓結果を変数で受け取る
this.temppt1 = this.temppt1.splice(0,100000,ptdatafiltered)

Comments

[daitai001]

ありがとうございます！
こちらの方法で無事解決いたしました。

本当に助かりました????