javascript深拷貝的幾種情況總結

Posted on by

在前端項目的數據處理中，json數據的拷貝是很常見的，怎麼使拷貝的雙方數據之間互不影響，這就要用到深拷貝瞭

深拷貝：引用數據類型中名存在棧內存中，值存在於堆內存中，但是棧內存會提供一個引用的地址指向堆內存中的值，深拷貝就是增加瞭一個指針並且申請瞭一個新的內存，使這個增加的指針指向這個新的內存。方法一：使用Object.assign(),一般用於數據類型比較簡單，層數不大於1的數據；因為Object.assign無法深層拷貝。

const strJson = {
      id:'12343231',
      name:'張三',
      age:23,
      inof:{
        sex:'男'
      },
      sjid:null,
      strHandle () {
        console.log('111111111');
      }
    }
    obj.name = 'lisi'
    obj.inof.sex = '女'
    console.log('obj',obj);
    console.log('strJson',strJson);

結果：

在這裡插入圖片描述

方法二：使用JSON.parse和JSON.stringify,一般用於數據類型比較復雜的，有深層嵌套的數據；但是undefined ， function， RegExp 等類型無法處理；

const strJson = {
      id:'12343231',
      name:'張三',
      age:23,
      inof:{
        sex:'男'
      },
      sjid:null,
      strHandle () {
        console.log('111111111');
      }
    }
    const obj = JSON.parse(JSON.stringify(strJson))
    obj.name = 'lisi'
    obj.inof.sex = '女'
    console.log('obj',obj);
    console.log('strJson',strJson);

結果：

在這裡插入圖片描述

第三種：使用遞歸拷貝，在代碼中處理特殊的情況。

 function copyHandle (strJson) {
      let result ;
      // 判斷是否存在
      if (!strJson) return null;
      // 判斷是否是對象
      if (typeof strJson !== 'object') return strJson;
      // 判斷是否是數組
      if (Array.isArray(strJson)) {
        result = [];
        for (let i of strJson) {
          result.push(copyHandle(i))
        }
      }//判斷是否是RegExp
      else if(strJson.constructor===RegExp) {
        result = strJson
      }//判斷是否是對象
      else {
        result = {}
        for (let i in  strJson) {
          result[i] = copyHandle(strJson[i])
        }
      }
      // 返回結果
      return result
    }

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：