Posted inJavascript

JSオブジェクトのクローンを作成するJavaScriptプログラム

January 24, 2021No Comments

JavaScriptオブジェクトは、さまざまなデータ型を含むことができる複雑なデータ型です。 例えば、

const person = {
    name: 'John',
    age: 21,
}

ここに、 person オブジェクトです。 さて、このようなことをしてオブジェクトのクローンを作成することはできません。

const copy = person;
console.log(copy); // {name: "John", age: 21}

上記のプログラムでは、 copy 変数の値は person オブジェクト。 ただし、の値を変更した場合 copy オブジェクト、の値 person オブジェクトも変更されます。 例えば、

copy.name = 'Peter';
console.log(copy.name); // Peter
console.log(person.name); // Peter

オブジェクトがであるため、変更は両方のオブジェクトで見られます 参照型。 また、 copy と person の両方が同じオブジェクトを指しています。

例1.Object.assign（）を使用してオブジェクトのクローンを作成します

// program to clone the object

// declaring object
const person = {
    name: 'John',
    age: 21,
}

// cloning the object
const clonePerson = Object.assign({}, person);

console.log(clonePerson);

// changing the value of clonePerson
clonePerson.name = 'Peter';

console.log(clonePerson.name);
console.log(person.name);

出力

{name: "John", age: 21}
Peter
John

ザ・ Object.assign() メソッドはの一部です ES6 標準。 ザ・ Object.assign() メソッドはディープコピーを実行し、1つ以上のオブジェクトからすべてのプロパティをコピーします。

注意：空 {} 最初の引数として、元のオブジェクトを変更しないようにします。

例2：Spread構文を使用してオブジェクトのクローンを作成する

// program to clone the object
// declaring object
const person = {
    name: 'John',
    age: 21,
}

// cloning the object
const clonePerson = { ... person}

console.log(clonePerson);

// changing the value of clonePerson
clonePerson.name = 'Peter';

console.log(clonePerson.name);
console.log(person.name);

出力

{name: "John", age: 21}
Peter
John

スプレッド構文 ... 後のバージョン（ES6）で導入されました。

スプレッド構文を使用して、オブジェクトの浅いコピーを作成できます。 これは、オブジェクトをコピーすることを意味します。 ただし、より深いオブジェクトが参照されます。 例えば、

const person = {
    name: 'John',
    age: 21,

    // the inner objects will change in the shallow copy
    marks: { math: 66, english: 73}
}

// cloning the object
const clonePerson = { ... person}

console.log(clonePerson); // {name: "John", age: 21, marks: {…}}

// changing the value of clonePerson
clonePerson.marks.math = 100;

console.log(clonePerson.marks.math); // 100
console.log(person.marks.math); // 100

ここで、内部オブジェクトの値が math に変更されます 100 の clonePerson オブジェクト、の値 math のキー person オブジェクトも変更されます。

例3：JSON.parse（）を使用してオブジェクトのクローンを作成する

// program to clone the object
// declaring object
const person = {
    name: 'John',
    age: 21,
}

// cloning the object
const clonePerson = JSON.parse(JSON.stringify(person));

console.log(clonePerson);

// changing the value of clonePerson
clonePerson.name = 'Peter';

console.log(clonePerson.name);
console.log(person.name);

出力

{name: "John", age: 21}
Peter
John

上記のプログラムでは、 JSON.parse() メソッドは、オブジェクトのクローンを作成するために使用されます。

注意： JSON.parse() でのみ動作します Number そして String オブジェクトリテラル。 でリテラルのオブジェクトでは機能しません function または symbol プロパティ。



Hope this helps!

Source link

Tags: