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

 基本概念：

---

ECMAScript 数据类型划分：

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

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

 

 typeof 运算符的返回值：

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

 

 

在了解深拷贝之前，应该先了解以下2个概念：

 

传值：

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

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

 

传址：

表示传递的是变量所在的内存地址【内存地址：也就是所谓的指针】（就是当一个变量的值 赋给 另一个新变量的时候，新变量修改了值，那么原来变量的值也会被修改，因为它们是同一个内存地址，所以一改全改）

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

 

 

注：一般情况下：简单类型赋值是 传值 ！！， 复杂类型赋值是 传址！！。

 

浅拷贝：

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

浅拷贝一般意义不大，了解就行，这里就不贴代码了。

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

 

 

深拷贝：

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

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

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

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

 

 深拷贝方式一：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);

 

 

深拷贝方式二：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之类的复合类型。

比如想对某个数组 或 对象的值进行修改，但是又要保留原来数组 或 对象的值不被修改，此时就可以用深拷贝来创建一个新的数组 或 对象，从而达到操作(修改)新的数组 或 对象时，保留原来数组 或 对象。

在JS中还有一些已经封装好的方法：

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

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