JS 深浅拷贝

￡神魔★判官ぃ 2022-12-29 04:58 208阅读 0赞

### JS基本数据类型 ###

*  基础数据类型按值进行访问的，可以操作保存在变量中的实际值
 *  引用数据类型，不允许直接访问值，不能直接操作对象的内存空间，在操作对象时，实际操作的是引用

![JS数据类型][JS]

### 存储方式 ###

再看一下存储方式，结合深浅拷贝的定义就会理解一些了

*  基础类型存在栈中
 *  引用类型同时保存在栈内存和堆内存

![存储方式][2008ef4b1fe0ad200c453e087981ec14.png]

### 深拷贝 和 浅拷贝 ###

**浅拷贝方式**

1.  直接进行赋值
    
    赋值引用 a 和 b 都指向同一个对象
    
        var a = [1, 2, 3];
        var b = a;
2.  如果拷贝的是普通对象
    
     *  `Object.assign(target, source)`
    
    ES6 新增的对象方法，它可以实现第一层的“深拷贝”，但无法实现多层深拷贝
    
    对于 a 对象所有的属性和方法都进行了深拷贝，但是 a 对象的属性 data 是对象，它拷贝的是地址，也就是浅拷贝
    
        var a = {  name: "lion", age: 6 }
        var c = { };
        Object.assign(c, a);
3.  如果拷贝的是数组
    
     *  `Array.prototype.concat()`
     *  ES6 扩展运算符
     *  `Array.prototype.slice()`
    
        var a = [1, 2, 3];
        var b = a.concat();
        var [...c] = a;
        var d = a.slice();

**拷贝对象**

**拷贝数组**

// concat 不修改原数组，会浅拷贝原数组
    var a = [1,2,{ name:"bird"}];
    var b = a.concat();
    b[2].name = "cat";
    console.log(a[2].name); // cat
    
    // ES6扩展运算符
    var [...c] = a;
    
    // slice 不修改原数组，会浅拷贝原数组
    var d = a.slice();

**深拷贝方式**

1.  递归赋值
2.  `JSON.parse() 和 JSON.stringify`

**实例**

[JS]: /images/20221120/0dfff4e09f564fa388fd7ec7833d1836.png
[2008ef4b1fe0ad200c453e087981ec14.png]: https://img-blog.csdnimg.cn/img_convert/2008ef4b1fe0ad200c453e087981ec14.png