JS中的深拷贝和浅拷贝

一.JS中的浅拷贝

JS中的浅拷贝会在栈内存中开辟另外一块空间，并且把被拷贝对象的栈内存数据完全拷贝到新开辟的空间中，即基本数据类型的值会被完全拷贝而引用数据类型的浅拷贝则是拷贝了指向堆内存的地址。

二.JS中实现浅拷贝的方法

2.1扩展运算符

扩展运算符的基本语法为：let newObj={...obj}

代码示例如下：

javascript 复制代码

let obj={
            a:1,
            b:2,
            c:3
        }
        let newObj={...obj};
        newObj.b=5;
        console.log(obj);
        console.log(newObj);

运行结果如下：

2.2Object.assign()方法

Object.assign()方法接收两个参数，一个是目标对象，一个是源对象，使用assign方法需要注意的是它不会拷贝对象的继承属性，不会拷贝对象的不可枚举的属性，但是它可以拷贝Symbol类型的属性。

javascript 复制代码

let a = {
            x: 1,
            y: 2,
            z: {
                num: 3
            }
        };
        let b = {};
        Object.assign(b, a);
        b.y = 10;
        console.log(a);
        console.log(b);

2.3Array.slice()方法

slice()方法返回一个新的数组对象，这一对象是一个由start和end决定的原数组的浅拷贝（包括start,不包括end),其中start和end表示的是原数组的索引。原始数组不会被改变。

javascript 复制代码

let a1=[1,2,3,4];
        let b=a1.slice();
        b[2]=10;
        console.log(a1);
        console.log(b);

2.4Array.concat()方法

Array.concat()方法用于合并两个或者是多个数组，这个方法不会改变原来的数组，而是返回一个新数组，用于实现数组的浅拷贝。

javascript 复制代码

 let a1=[1,2,3,4];
        let b=a1.concat(a1);
        console.log(a1);
        console.log(b);

三.JS中的深拷贝

JS中对象的深拷贝指的是其属性与其拷贝的源对象的属性不共享相同的引用的副本。使用深拷贝会创建一个对象及其所有子对象（嵌套对象）的完全独立的副本，新对象与源对象互不影响

四.实现深拷贝的方法

4.1使用JSON.parse(JSON.stringfy(object)) 方法

javascript 复制代码

let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];
        let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));
        console.log(ingredients_list);
        console.log(ingredients_list_deepcopy);

javascript 复制代码

 // 改变 ingredients_list_deepcopy 中 'list' 属性的值。
ingredients_list_deepcopy[1].list = ["rice flour", "water"];
// ingredients_list 的"list"属性不会发生变化。
console.log(ingredients_list[1].list);
// Array(3) [ "eggs", "flour", "water" ]

4.2使用递归的方式，手动拷贝对象的每一层

javascript 复制代码

function deepCopy(obj){
    let objClone=Array.isArray(obj)?[]:{};
    if(obj&&typeof obj=='object'){
        for(const key in obj){
            //判断obj子元素是否为对象，如果是则递归复制
            if(obj[key]&&typeof obj[key]==='object'){
                objClone[key]=deepCopy(obj[key]);
            }
            else{
            //如果不是，简单复制
            objClone[key]=obj[key];
            }
        }
    }
    return objClone;
}

4.3使用函数库lodash

lodash函数库中提供了_.cloneDeep方法来实现深拷贝

javascript 复制代码

let _ = require('lodash');
	let obj = {
	    a:10,
	    b:{f:{g:20}},
	    c:[10,20,30]
	};
	let newObj = _.cloneDeep(obj);
	console.log(obj.b.f === newObj.b.f); // false

五.总结

浅拷贝实现的是对基础数据类型的拷贝，并且数据只有单一的一层，而深拷贝用来拷贝具有嵌套层级的引用数据类型。对于基本数据类型来说，深拷贝和浅拷贝实现的效果一样；而对于引用数据类型来说，深拷贝可以实现操作该数据，并且不会影响到源数据的效果。