通俗解释：深拷贝是内容拷贝，浅拷贝是地址拷贝

深拷贝

  1.  <script>
  2.         //  深拷贝,引用数据类型复制一份,复制后修改数据内容互不影响
  3.         const obj = {
  4.             id: 1,
  5.             name: "andy",
  6.             msg: {
  7.                 age: 18
  8.             },
  9.             color: ["pink", "blue"]
  10.         }
  11.         const o = {};
  12.         //  封装克隆函数
  13.         function deepClone(newObj, oldObj) {
  14.             //  使用forin遍历,因为它可以遍历数组也可以遍历对象
  15.             for (let k in oldObj) { //  遍历旧对象取值,k是old的属性名，可以遍历数组和对象
  16.                 //拿到旧数组的值,判断是否是复杂数据类型
  17.                 let item = oldObj[k]; // 将复杂数据类型的值给item
  18.                 if (Array.isArray(item)) {
  19.                     // 先判断值是否是数组,如果是就递归循环这个数组并赋值
  20.                     newObj[k] = []; //   将类型变成数组,是数组的话,k就是索引号
  21.                     deepClone(newObj[k], item); //   将索引号给到数组,并将值赋值到相应的属性名下
  22.                 } else if (item instanceof Object) {
  23.                     // 判断是否是对象
  24.                     newObj[k] = {};
  25.                     deepClone(newObj[k], item);
  26.                 } else {
  27.                     //  是普通数据类型.直接赋值
  28.                     newObj[k] = item;
  29.                 }
  30.             }
  31.         }
  32.         deepClone(o, obj);
  33.         console.log(o);
  34. </script>

浅拷贝

  1.     //  浅拷贝
  2.         const obj = {
  3.             id: 1,
  4.             name: "andy",
  5.             msg: {
  6.                 age: 18
  7.             },
  8.             color: ["pink", "blue"]
  9.         }
  10.         console.log("obj", obj);
  11.         const o = {};
  12.         for (let k in obj) {
  13.             // k是obj的属性名 obj[k]是obj的属性值
  14.             o[k] = obj[k]; //  将k属性名作为o的属性名,obj属性值给到o
  15.         }
  16.         console.log("o", o);
  17.         //  浅拷贝语法糖
  18.         Object.assign(o, obj);
  19.         console.log("合并", o);
  20.         //  可以进行对象的合并
  21.         const obj1 = {
  22.             test: 11
  23.         };
  24.         //  如果拷贝的值得属性于之前的有相同,则值会覆盖
  25.         Object.assign(obj1, {
  26.             test: 1
  27.         })
  28.         console.log(obj1);
  1. /**
  2.  * 深度拷贝
  3.  */
  4. export const deepClone = function (obj, hash = new WeakMap()) {
  5.   if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
  6.   if (obj instanceof Date) return new Date(obj);
  7.   if (obj instanceof RegExp) return new RegExp(obj);
  8.   // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  9.   if (typeof obj !== "object") return obj;
  10.   // 是对象的话就要进行深拷贝
  11.   if (hash.get(obj)) return hash.get(obj);
  12.   let cloneObj = new obj.constructor();
  13.   // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  14.   hash.set(obj, cloneObj);
  15.   for (let key in obj) {
  16.     if (obj.hasOwnProperty(key)) {
  17.       // 实现一个递归拷贝
  18.       cloneObj[key] = deepClone(obj[key], hash);
  19.     }
  20.   }
  21.   return cloneObj;
  22. }