【js】js中深拷贝与浅拷贝:

文章目录

        • 一、浅拷贝(修改新对象会改到原对象)
            • 【1】通过= 直接赋值
            • 【2】Object.assign()方法
        • 二、深拷贝(修改新对象不会改到原对象)
            • 【1】通过JSON对象来实现深拷贝
            • 【2】 Object.create()方法
            • 【3】使用扩展运算符实现深拷贝
        • 三、要点:


一、浅拷贝(修改新对象会改到原对象)

只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,修改新对象会改到原对象

【1】通过= 直接赋值
var obj1 = {
    name: '诸葛亮',
    gender: '男',
    age: 20
};
var obj2 = obj1;

obj2.age = 30;
console.log(obj2);  //name: '诸葛亮', gender: '男', age: 30
console.log(obj1);  //name: '诸葛亮', gender: '男', age: 30
【2】Object.assign()方法
var obj1 = {
    name: '诸葛亮',
    gender: '男',
    age: 20
};
var obj2=Object.assign(obj1)
 
obj2.age = 30;
console.log(obj2.age);  // age: 30
console.log(obj1.age);  // age: 30 

二、深拷贝(修改新对象不会改到原对象)

会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象

【1】通过JSON对象来实现深拷贝

JSON.stringify() 方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。
JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。返回值为Object 类型, 对应给定 JSON 文本的对象/值。
该方法的原理是先将引用类型的对象转换为基础类型的字符串,然后将其从字符串再重新转换为对应的引用类型对象,在进行转换为引用对象的时候,会为对象的每个属性重新分配堆内存,即进行了深拷贝

var obj3 = {
    number: 1111,
    city: '西安'
}
var obj4 = JSON.parse(JSON.stringify(obj3));

obj4.city = '深圳';
console.log(obj3.city);  //'西安'
console.log(obj4.city);  //'深圳'
【2】 Object.create()方法
var obj3 = {
    number: 1111,
    city: '杭州'
}
var obj4 = Object.create(obj3)
 
obj4.city = '深圳';
console.log(obj3.city);  //'杭州'
console.log(obj4.city);  //'深圳'
【3】使用扩展运算符实现深拷贝

// 当value是基本数据类型,比如String,Number,Boolean时,是可以使用拓展运算符进行深拷贝
// 当value是引用类型的值,比如Object,Array,引用类型进行深拷贝也只是拷贝了引用地址,所以属于浅拷贝

var obj3 = {
    number: 1111,
    city: '杭州'
}
var obj4 = { ...obj3, number: 2021 }
 
console.log(obj3.number);  //1111
console.log(obj4.number);  //2021

三、要点:

深浅拷贝,都是进行复制,那么区别主要在于复制出来的新对象和原来的对象是否会互相影响,改一个,另一个也会变。
新旧对象共享内存,修改其中一个则会影响另外一个,则为浅拷贝
新旧对象不共享内存,修改其中一个不会影响另一个,则为深拷贝

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)