JS深拷贝、浅拷贝和使用场景详解

MuGuiLin

已于 2024-01-11 11:10:23 修改

阅读量8.1k

点赞数 10

分类专栏： ES6-10 / TS 文章标签： js深拷贝 js 对象深拷贝 js 数组的深拷贝什么是深拷贝什么是浅拷贝

于 2019-10-24 23:30:16 首次发布

本文链接：https://blog.csdn.net/muguli2008/article/details/102734106

版权

ES6-10 / TS 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

一、基本概念

1、ECMAScript 数据类型划分：

* 简单类型（基础类型、原始类型）：Number、String、Boolean、Undefined、Symbol(SE6新增的)；

* 引用类型（复杂类型、复合类型）：Object(Math、Null、Function{ Array、Set、Map、Date、RegExp } )；

2、typeof 运算符的返回值：

* number、string、boolean、symbol、object、function、undefined；

3、程序内存操作栈和堆：

栈（Stack）与堆（Heap）是开发人员必须面对的两个概念，在理解这两个概念时，需要放到具体的场景下，因为不同场景下，堆与栈代表不同的含义。一般情况下，有两层含义：

（1）内存操作场景下，堆与栈表示两种内存的管理方式；

（2）数据结构场景下，堆与栈表示两种常用的数据结构；

更多关于js栈和堆信息如下：JS堆和栈详解https://blog.csdn.net/weixin_52691965/article/details/128664283

一文读懂堆与栈的区别_堆和栈的区别https://blog.csdn.net/K346K346/article/details/80849966/通过堆栈的概念，我们更容易理解代码的一些执行方式。这里说的是在程序内存操作(布局)场景下的栈与堆：

堆栈空间分配区别：

（1）栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；从问速度上来看：存在栈中的数据访问速度快，因为栈中直接存储变量的值。

（2）堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；从问速度上来看：存在堆中的数据访问速度略慢(基本感觉不到)，因为在访问复杂类型数据时，需要先访问栈拿到该堆的存储地址，再在堆中去取数据。

（1）简单类型的数据在变量中直接存的就是值（栈里面直接开辟一个存储空间，存放的就是其值的本身）。

（2）复杂类型的数据在变量中存的是内存地址（在栈里存放的是地址[十六进制表示] ，这个地址再指向堆里面的数据[真正的对象实例是放到堆里面的]），由于复杂数据类型存储时变量中所存储的是内存地址（引用），因此又叫它引用数据类型。

从以上两点来看，关于变量在栈与堆中的存放方式，可以总结为：简单数据类型放在栈里面，复杂数据类型放到堆里面的。

在了解JS深拷贝之前，还需要先了解以下2个概念！

传值：

表示传递的是变量所赋的值（就是当一个变量的值赋给另一个新变量的时候，新变量修改了值，不会影响原来变量的值）

【简单来说：就是相当于把变量的值全新的复制了一个份】。

let a = 666;
console.log(a); // 666

let b = a;
    a = 888;    // 给变量a重新赋值为888

console.log(a); // 888
console.log(b); // 666

上面代码中，a变量原来给它赋的初始值是666，然后又将变量a赋给了变量b，最后把变量a又重新赋值为888，可以看到变量b的值还是原来的666！这就是传值（在JS中只对Number、String、Booleanl等基本数据类型有效）

传址：

表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】因为：堆是传址操作。因此，改变堆的值，所有引用该堆的变量的值都会发生改变（简单来讲：就是当一个变量的值赋给另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）

【简单来说：就是类似给变量起了一个新的名字(别名)，但实际上还是原来的存储空间】。

// 数组
{
    let a = [1, 2, 3];
    console.log(a); // [1, 2, 3]

    let b = a;	
    a[0] = 100;

    console.log(a); // [100, 2, 3]
    console.log(b); // [100, 2, 3]
}

// 对象
{
    let a = {
        name: '小明',
        age: 18,
        hobby: ['学习', '打球', '玩游戏']
    };

    let b = a;
	a.name = '小强';
	b.age = 16;
	
    console.log(a); // {name: '小强', age: 16, hobby: ['学习', '打球', '玩游戏']}
    console.log(b); // {name: '小强', age: 16, hobby: ['学习', '打球', '玩游戏']}
}

面代码中，a变量原来给它赋的初始值是，然后又将变量a赋给了变量b，最后把变量a又重新赋值，可以看到变量b的值也一起被修改了（因为变量a和变量b它们俩都是指向同一个内存空间，自然所存的内容也是一样的，一改全改）！这就是传址（在JS中如Array、Object[Function ...]等复杂类型）

所以：一般情况下：简单(基本)类型赋值是传值！！，复杂(复合、引用)类型赋值是传址！！

二、浅拷贝与深拷贝

无论是浅拷贝还是深拷贝，其本质还是赋值，原理就是将复杂类型（在实际应用场景中，主要就是对Object {} 或 Array [] 这两种类型的操作最多），如：多维数组、对象等一层一层的拆开后再一个一个的进行赋值。

1、浅拷贝：

当对某个数据（数组或对象）进行拷贝后，修改新数据（拷贝后的数据）里面第1层的数据是不会影响老数据（被拷贝的数据）的，但是如果还要第2层或更深层次的数据（复杂数据类型），它仍然是有关联的，如果修改了新数据，那么老数据也会被修改。

浅拷贝方式1：扩展运算符 ...

// 数组
{
    let a = [1, 2, 3, [4, 5, 6] ];
    console.log(a); // [1, 2, 3, [4, 5, 6] ];

    let b = [...a];	// 浅拷贝

    a[0] = 100;
    a[3][1] = 500; // 这里还是会影响变量b中的第4个下标[]！！
	
    console.log('数组浅拷贝', b); // [1, 2, 3, [4, 500, 6]]
}

// 对象
{
    let a = {
        name: '小明',
        age: 18,
        hobby: ['学习', '打球', '玩游戏']
    };

    let b = {...a}; // 浅拷贝

	a.name = '小强';
	a.age = 16;
    a.hobby[0] = '研究'; // 这里还是会影响变量b中的hobby！！
	
    console.log('对象浅拷贝', b); // {name: '小明', age: 18, hobby: ['研究', '打球', '玩游戏']}
}

浅拷贝方式2：对象合并Object.assign()

// 数组
{
    let a = [1, 2, 3, [4, 5, 6] ];
    console.log(a); // [1, 2, 3, [4, 5, 6] ];

    let b = Object.assign([], a);	// 浅拷贝

    a[0] = 100;
    a[3][1] = 500; // 这里还是会影响变量b中的第4个下标[]！！
	
    console.log('数组浅拷贝', b); // [1, 2, 3, [4, 500, 6]]
}

// 对象
{
    let a = {
        name: '小明',
        age: 18,
        hobby: ['学习', '打球', '玩游戏']
    };

    let b = Object.assign([], a); // 浅拷贝

	a.name = '小强';
	a.age = 16;
    a.hobby[0] = '研究'; // 这里还是会影响变量b中的hobby！！
	
    console.log('对象浅拷贝', b); // {name: '小明', age: 18, hobby: ['研究', '打球', '玩游戏']}
}

从以上的两个实例中可以看出，浅拷贝只是拷贝了复杂数据类型数据、对象的第一层，如果是更深层次的数据对象就是拷贝引用。

根据上面浅拷贝的问题，此时：下面的深拷贝就排上用场了。

2、深拷贝：

* 就是在拷贝数据（数组或对象）时，不管数据对象里面有多少层，是简单还是复杂数据类型，只要进行深拷贝后，和老数据（之前被拷贝的数据）就毫无关联，相互独立（重新开辟内存空间），互不影响！在修改新数据，对老数据毫无影响。

* 作用：打断两个对象或数组之间的引用关系！

* 原理：在对数组或对象进行拷贝，使用递归循环复制，而每次递归都是开辟一个新的内存地址（指针），所以一般只要不是同一个内存地址，就不会修改其值。

* 简单来讲：当拷贝一个数据后，和原来的数据就没有任何联系了，因为它们不是同一个指针。

深拷贝方式1：JSON.parse(JSON.stringify( )) 序列化

该方式最大的缺点就是在对象中不能有循环引用！！

//数组的深拷贝测试
let myArr = ["HTML", ["CSS", "H5", ["html", "head", ["meta", "title", "style"], "body"], "CSS3"], "ES6", "jQuery"]
let newMyArr = JSON.parse(JSON.stringify(myArr));

newMyArr[1][2][2][1] = 'TITLE';
console.log('修改前：', myArr);
console.log('修改后：', newMyArr);




//数组对象深拷贝测试
let arr = ['H5', 'CSS', { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, 'ES6'];
let nArr = JSON.parse(JSON.stringify(arr));
			
nArr[2].a = 'Python';		
nArr[2].c[2][0] = '壹壹壹';
console.log('修改前：', arr);
console.log('修改后：', nArr);





//对象数组深拷贝测试 deepCopy
let obj = { h5: 'H5', cs: 'CSS', back: { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, js: 'ES6', null: null, udf: undefined, fn: function (e) { console.log(666) } };
let nObj = JSON.parse(JSON.stringify(obj));
			
nObj.back.c[0] = 'AAA';
nObj.back.c[2][0] = '壹';
nObj.back.c[2][2] = '叁';
nObj.fn = function(abc){
    alert(888)
}
console.log('修改前：', obj);
console.log('修改后：', nObj);

深拷贝方式2：deepCopy() 自定义方法

该方式可以完美支持所有复杂类型的深度贝后！！



//判断是否是数组：
const isArray = (arr) => {
    return Object.prototype.toString.call(arr) === '[object Array]';
};




//判断是否是对象：
const isObject = (obj) => {
    return typeof obj === 'object' && obj !== null;
};




//数组或对象的深拷贝方法1
const deepCopy = (val) => {
    let oVal = isArray(val) ? [] : {};
    for (let v in val) {
        if (isObject(val[v])) {
            //这里是深拷贝的关键所在（递归调用）
            oVal[v] = deepCopy(val[v]);
        } else {
            oVal[v] = val[v];
        };
    };
    return oVal;
};




			
//数组或对象的深拷贝方法2
const deepCopy2 = (val) => {
    let oVal = Array.isArray(val) ? [] : {};
    for (let v in val) {
        if (val.hasOwnProperty(v)) {
            if ('object' === typeof val[v]) {
                //这里是深拷贝的关键所在（递归调用）
                oVal[v] = deepCopy2(val[v]);
            } else {
                oVal[v] = val[v];
            };
        }
    };
    return oVal;
};




//数组的深拷贝测试
let myArr = ["HTML", ["CSS", "H5", ["html", "head", ["meta", "title", "style"], "body"], "CSS3"], "ES6", "jQuery"]
let newMyArr = deepCopy(myArr);

newMyArr[1][2][2][1] = 'TITLE';
console.log('修改前：', myArr);
console.log('修改后：', newMyArr);




//数组对象深拷贝测试
let arr = ['H5', 'CSS', { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, 'ES6'];
let nArr = deepCopy(arr);
			
nArr[2].a = 'Python';		
nArr[2].c[2][0] = '壹壹壹';
console.log('修改前：', arr);
console.log('修改后：', nArr);





//对象数组深拷贝测试 deepCopy
let obj = { h5: 'H5', cs: 'CSS', back: { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, js: 'ES6', null: null, udf: undefined, fn: function (e) { console.log(666) } };
let nObj = deepCopy(obj);
			
nObj.back.c[0] = 'AAA';
nObj.back.c[2][0] = '壹';
nObj.back.c[2][2] = '叁';
nObj.fn = function(abc){
    alert(888)
}
console.log('修改前：', obj);
console.log('修改后：', nObj);



//对象数组深拷贝测试 deepCopy2
let obj2 = { h5: 'H5', cs: 'CSS', back: { a: 'PHP', b: 'Java', c: ['A', 'B', ['一', 2, '三'], 3, { d: '3D' }] }, js: 'ES6', null: null, udf: undefined, fn: function (e) { console.log(666) } };

let nObj2 = deepCopy2(obj);
nObj2.back.c[0] = 'AAA';
nObj2.back.c[2][0] = '壹';
nObj2.back.c[2][2] = '叁';
nObj2.fn = function(abc){
    alert(888)
}
console.log('修改前：', obj2);
console.log('修改后：', nObj2);

通过以上测试，无论我们是对数组还是对象进行深拷贝后，修改了新的数组或对象后，不会对旧的数组或对象进行修改，它们都是相互独立的！

三、使用场景

无论是浅拷贝还是深拷贝，一般都用于操作Object 或 Array之类的复合类型。

1、例如：

比如：想对某个数组或对象的值进行修改，但是又想保留原来数组或对象的值不被修改！

此时：就可以用深拷贝来创建一个新的数组或对象，从而达到操作(修改)新的数组或对象时，保留原来数组或对象。

2、扩展：

在JS中还有一些原生封装好的浅拷贝方法：

如数组方法：concat()，filter()，slice()，map()等。

它们在修改数组时，不会修改原来的数组，而是返回一个新的数组。

除此以外，在还有一些其他第三方的深拷贝插件：clone-deep

clone-deep - npm (npmjs.com)https://www.npmjs.com/package/clone-deep

MuGuiLin

关注

10
点赞
踩
53

收藏

觉得还不错? 一键收藏
1
评论
JS深拷贝、浅拷贝和使用场景详解

当对某个数据（数组或对象）进行拷贝后，修改新数据（拷贝后的数据）里面第1层的数据是不会影响老数据（被拷贝的数据）的，但是如果还要第2层或更深层次的数据（复杂数据类型），它仍然是有关联的，如果修改了新数据，那么老数据也会被修改。表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】（就是当一个变量的值赋给另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）比如：想对某个数组或对象的值进行修改，但是又想保留原来数组或对象的值不被修改！
复制链接

扫一扫