克隆JS对象的JavaScript程序

在此示例中,您将学习编写一个克隆对象的程序。

JavaScript对象是一种复杂的数据类型,可以包含各种数据类型。例如,

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

在这里, person是一个对象。现在,您无法通过执行以下操作来克隆副本。

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

在上述程序中, copy变量的值与人员对象的值相同。但是,如果更改copy对象的值,则person对象中的值也会更改。例如,

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

因为对象是引用类型,所以在两个对象中都可以看到更改。复制和人都指向同一个对象。


例子1.使用Object.assign()克隆对象
// program to clone the object

// declaring object
let 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()方法执行深度复制,并复制一个或多个对象的所有属性。

注意 :空{}作为第一个参数,可确保您不更改原始对象。


示例2:使用Spread语法克隆对象
// program to clone the object
// declaring object
let 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)中引入。

传播语法可用于制作对象的浅表副本。这意味着它将复制对象。但是,将引用更深层次的对象。例如,

let 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
let 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()仅适用于NumberString以及对象字面量。它不适用于具有functionsymbol属性的对象字面量 。


总计 0 评论

发表评论

作为 登录 | 登出 »

联系电话

18321263196

交换链接

互相学习

服务咨询

我的微信