深、浅拷贝之间的关系

什么是赋值

赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分

基本数据类型：赋值，赋值之后两个变量互不影响
引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响

js 复制代码

//所以赋值操作是直接把一个变量交给另一个变量
const a = 1;
const b = a;//这里赋值是将栈内存的值直接给新变量
const x = {name: '111'};
const y = x;//这里赋值，赋的是引用对象的地址栈的值存的是堆内存的地址

什么是浅拷贝

可以简单理解为新创建一个变量用来拷贝目标变量，并且只解决第一层问题，如果浅拷贝是基本类型数据，直接赋值，如果是引用类型数据，则对其第一层进行赋值操作，即拷贝第一层的基本类型值 ，以及第一层的引用类型地址。

如何实现

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

js 复制代码

let a = {
    name: "zw",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = Object.assign({}, a);
console.log(b);
// {
// 	name: "zw",
// 	book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";//这里只改变了a变量栈内存中的值，不会影响b变量
a.book.price = "55";//这里则直接改了两个变量中共同指向的book的堆内存地址中的值
console.log(a);
// {
// 	name: "change",
// 	book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
// 	name: "zw",
// 	book: {title: "You Don't Know JS", price: "55"}
// }

扩展运算符Spread

js 复制代码

let b = {...a};//对a进行扩展，并放入新的对象中，效果域asign一样

Array.prototype.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。

js 复制代码

// 木易杨
let a = [0, "1", [2, 3]];
let b = a.slice(1);
console.log(b);
// ["1", [2, 3]]

a[1] = "99";
a[2][0] = 4;//要牢记，浅拷贝只赋值第一层，如果第一层有引用类型数据，则它的改变会导致原对象中该值的改变
console.log(a);
// [0, "99", [4, 3]]

console.log(b);
//  ["1", [4, 3]]

什么是深拷贝

深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。

实现深拷贝的方法：

1.递归实现深拷贝：

javascript 复制代码

    <script>
        let obj = {
            name: 'zw',
            number: [10, 20],
            fn: function () {
                console.log(123);
            },
            old: {
                one: '1',
                two: "2"
            }
        }
        // 说明一个函数
        function copy(obj) {
            var newobj = null;
            //通过typeof判断是否为引用数据类型且不等于null
            //如果等于null直接返回newobj
            if (typeof (obj) === 'object' && obj !== null) {
                newobj = obj instanceof Array ? [] : {}//这里创建一个新的引用数据类型用以合并和存放解析后的数据
                //newobj = obj.isArray(obj)?[]:{};
                for (const key in obj) {
                    newobj[key] = copy(obj[key])//递归实现对每一个引用数据类型解析并赋值给一个新创建的引用数据类型
                }
            }
            else {
                newobj = obj;//当解析到基本数据类型时即可以直接赋值。
            }
            return newobj;
        }
        let a = new copy(obj)
        a.number[0] = 555
        console.log(obj);
        console.log(a);
    </script>

核心思想：引用数据类型是有基本数据类型构成的，并且，基本数据类型是不存在深浅拷贝这一说的，那么我们只需要将引用数据类型的每一层次的基本数据类型赋值，并遍历到最深处的基本数据并赋值就可以完成深拷贝。

2.通过JSON的方法

javascript 复制代码

const a = JSON.parse(JSON.stringify(数据))
//JSON.stringify(需要拷贝数据)转化为JSON字符串
//JSON.parse(JSON字符串) 将JSON数据格式的字符串转化为对象