javascript对象的深克隆

17 阅读1分钟
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var obj1 = { a: 1, b: 2, c: [33, 44, { m: 55, n: 66, p: [77, 88] }] };
      //   obj2的结果是obj执行函数以后的结果
      var obj2 = deepClone(obj1);
      //   定义一个函数让,传入obj1
      function deepClone(obj1, type = "object") {
        // 先判斷obj2里面是用数组接收还是用对象接收
        // 遍历obj1,如果是对象,那么初始的obj2就是{}
        if (type === "object") {
          var obj2 = {};
        }
        if (type === "array") {
          // 如果是数组,那么obj2就要用[]来接收
          var obj2 = [];
        }
        //   开始遍历obj1的值
        for (var k in obj1) {
          if (Array.isArray(obj1[k])) {
            // 如果obj1里面是数组,那么obj2得到的值还不行,
            // obj1继续执行深克隆
            obj2[k] = deepClone(obj1[k], "array");
          } else if (typeof obj1[k] === "object") {
            // obj1遍历以后是对象,那么就把这个对象在深克隆函数里面执行
            // 深克隆里面已经传入了第二个参数object,所以只要写入obj1[k]
            obj2[k] = deepClone(obj1[k]);
          } else {
            // obj1[k]里面的值不是对象也不是数组,只是对象里面的普通元素
            // 那么直接把遍历的赋值给obj2[k]
            obj2[k] = obj1[k];
          }
        }
        //   for循环结束了,可以返回obj2了
        return obj2;
      }

      // 最后函数执行完了,在函数外面打印输出的结果
      console.log(obj2);
    </script>
  </body>
</html>

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa7a4f07be08456aa31c692cca02653e~tplv-k3u1fbpfcp-watermark.image?)