赋值 深拷贝 浅拷贝 （What？Why？How？）

WHAT？

说到深浅拷贝我们必须简单了解JavaScript基本数据类型和引用数据的区别

赋值

基本数据类型

 //在栈内开辟一个空间，空间名称叫a，存放值1;
let a = 1;

//在栈内开辟一个空间，空间名字叫b
//接着先把a的值1复制一份，然后存放进b
let b = a;
a=3;
console.log(b)//1

引用数据类型

//首先在栈开辟一个空间a存放指针地址，设指针地址为address1；同时会在堆里面开辟一个空间放置对象数据
let a = {
  name: "Jack"
}
//a赋值给b,此时b会在栈开辟一个空间b，用来放置address1，这个指针指向a所在堆的对象数据
let b = a;
//修改赋值后的值b，其实就是修改b的指针address1所指向的对象数据
b.name = "Rose";

console.log(a.name, b.name)//Rose Rose

深拷贝 浅拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

深拷贝会另外创造开辟新的内存空间来储存一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

之前图片有错误 第一层为引用数据类型 赋值和深浅拷贝才有区别 万分抱歉

WHY？

当我们需要拷贝一份多层引用数据 如果原数据还要用来做其他事情时 就要用到深拷贝 修改新数据原数据不能随之发生改变

HOW？

浅拷贝

• Object.assign()
• ES6 扩展运算符
• Array.concat()
• Array.slice() 由于比较简单这里就不一一举例了 需要注意只有一级对象时 Object.assign() 扩展运算符是深拷贝

  let obj = { a: 1, arr: [1, 2] }
      let newObj = Object.assign({}, obj)
      newObj.arr = 10
      console.log(newObj.arr, obj.arr) //10 [1,2]

深拷贝

1 用JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象可以转成JSON格式的对象才能使用这种方法，如果对象中包含 function 就不能用这种方法了。

let obj = { a:1, arr: [1,2] };
let newObj = JSON.parse(JSON.stringify(obj));
newObj.arr[0] = 10;
console.log(newObj.arr[0],obj.arr[0]); //10 1

2 递归深拷贝

       const json = [
            {
                id: 1,
                fn() { },
                title: "课程1",
                children: [
                    { id: 4, title: "课程1-1" },
                    {
                        id: 5,
                        title: "课程1-2",
                        children: [
                            { id: 6, title: "课程1-2-1" },
                            { id: 7, title: "课程1-2-2" },
                        ],
                    },
                ],
            },
            { id: 2, title: "课程2" },
            { id: 3, title: "课程3" },
        ]
        // 定义检测数据类型的函数
        function checkType(data) {
            return Object.prototype.toString.call(data).slice(8, -1)
        }
        function deepClone(target) {
            // 声明一个空对象来存结果 一个对象保存检测结果
            let result = null,
                targetType = checkType(target)
            //规定 对象 数组 或基本数据类型的容器
            if (targetType === "Object") {
                result = {}
            } else if (targetType === "Array") {
                result = []
            } else {
                return target
            }
            // for in进行深拷贝
            for (const key in target) {
                let value = target[key]
                //如果数据结构中是否有对象或数组
                if (checkType(value) === "Object" || checkType(value) === "Array") {
                    // 如果此层仍是对象或数组将值传递出去作为函数的参数继续拷贝
                    result[key] = deepClone(value)
                } else {
                    result[key] = target[key]
                }
            }
            // 将结果传递出去
            return result
        }
        let res = deepClone()
        res[0].children[0].id = 2222
        console.log(res, json)

人生到处知何似，应似飞鸿踏雪泥。