1. ホーム
  2. javascript

[解決済み] JavaScriptのオブジェクトのコピーを変更すると、元のオブジェクトも変更される

2023-01-27 21:46:09

質問

コピーしている objAobjB

const objA = { prop: 1 }, 
const objB = objA; 
objB.prop = 2;
console.log(objA.prop); // logs 2 instead of 1

配列でも同じ問題があります

const arrA = [1, 2, 3], 
const arrB = arrA; 
arrB.push(4); 
console.log(arrA.length); // `arrA` has 4 elements instead of 3.

どのように解決するのですか?

という文が何を意味しているのか、誤解していることは明らかです。 var tempMyObj = myObj; が何をするのかについて、いくつかの誤解があることは明らかです。

JavaScriptではオブジェクトは参照(正確には参照の値)で渡されたり代入されたりするので tempMyObjmyObj はどちらも同じオブジェクトへの参照です。

何が起こっているのかを視覚化するのに役立つかもしれない簡略化した図を以下に示します。

// [Object1]<--------- myObj

var tempMyObj = myObj;

// [Object1]<--------- myObj
//         ^ 
//         |
//         ----------- tempMyObj

代入の後でわかるように、両方の参照は同じオブジェクトを指しています。

あなたは コピーを作成する を作成する必要があります。

// [Object1]<--------- myObj

const tempMyObj = Object.assign({}, myObj);

// [Object1]<--------- myObj
// [Object2]<--------- tempMyObj

古い回答です。

オブジェクトのコピーを作成する他の方法をいくつか紹介します。

すでにjQueryを使っているので

var newObject = jQuery.extend(true, {}, myObj);

バニラJavaScriptで

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

var newObject = clone(myObj);

参照 を参照してください。 はこちら