【JS面試題】深克隆 和 淺克隆 有了解過嗎？能手寫深克隆嗎？

深克隆 和 淺克隆 有了解過嗎？能手寫深克隆嗎？

什么是克隆？克隆其實就是拷貝，就是把一個對象中的屬性復(fù)制一份，放到另一個對象中的過程。而屬性的數(shù)據(jù)是有原始值和引用值之分。

• 淺克?。寒?dāng)我們復(fù)制對象中屬性的時候，如果是原始值，則兩個對象中的變量隨意修改，兩者互不影響（敵動我不動）。如果是引用值，一個對象的變量改變，則另一個對象跟著變（敵動我便動）。
• 深克?。荷羁寺【褪墙鉀Q拷貝引用值時“敵動我便動”的問題，無論數(shù)據(jù)怎么修改，兩者互不影響。

深克隆的實現(xiàn)有兩種方式：遞歸拷貝和JSON函數(shù)拷貝,我會用這兩種方式分別來實現(xiàn)深拷貝

1. 遞歸拷貝：將obj克隆到newObj中

    let obj = {
        name: "前端獵手",
        des: "好好學(xué)習(xí)，天天向上",
        like: ["琴", "棋","書", "畫"],
        idol: {
          name: "喬布斯",
          des:"神一樣的男人",
          achievement:["蘋果公司","皮克斯"]
        },
      };
      
    let newObj = {};

      function deepClone(origin, target) {
        var target = target || {}, //容錯處理，防止用戶不傳target值
          toStr = Object.prototype.toString,
          arrAtr = "[object Array]";
        for (let prop in origin) {
          //遍歷對象
          if (origin.hasOwnProperty(prop)) {
            //防止拿到原型鏈屬性
            if (origin[prop] !== "null" && typeof origin[prop] == "object") {
              //判斷是不是原始值
              target[prop] = toStr.call(origin[prop]) == arrAtr ? [] : {}; //建立相對應(yīng)的數(shù)組或?qū)ο?br>              deepClone(origin[prop], target[prop]); //遞歸，為了拿到引用值里面還有引用值
            } else {
              target[prop] = origin[prop]; //是原始值，直接拷貝
            }
          }
        }
        return target;
      }
      deepClone(obj,newObj)

代碼驗證：

2. JSON函數(shù)拷貝:將obj克隆到newObj中

    let obj = {
        name: "前端獵手",
        des: "好好學(xué)習(xí)，天天向上",
        like: ["琴", "棋","書", "畫"],
        idol: {
          name: "喬布斯",
          des:"神一樣的男人",
          achievement:["蘋果公司","皮克斯"]
        },
      };
      
     let newObj = JSON.parse(JSON.stringify(obj));
     
     obj.idol.achievement[0] = "green apple";
     newObj.idol.achievement[0] = "red apple";
     console.log(obj);
     console.log(newObj);
     

代碼驗證：