快捷導(dǎo)航

javascript深拷貝的幾種情況總結(jié)

更新時(shí)間：2022年01月12日 15:58:13 作者：Merde！

這篇文章主要為大家介紹了javascript深拷貝的幾種情況，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

在前端項(xiàng)目的數(shù)據(jù)處理中，json數(shù)據(jù)的拷貝是很常見的，怎么使拷貝的雙方數(shù)據(jù)之間互不影響，這就要用到深拷貝了

深拷貝：引用數(shù)據(jù)類型中名存在棧內(nèi)存中，值存在于堆內(nèi)存中，但是棧內(nèi)存會(huì)提供一個(gè)引用的地址指向堆內(nèi)存中的值，深拷貝就是增加了一個(gè)指針并且申請(qǐng)了一個(gè)新的內(nèi)存，使這個(gè)增加的指針指向這個(gè)新的內(nèi)存。方法一：使用Object.assign(),一般用于數(shù)據(jù)類型比較簡(jiǎn)單，層數(shù)不大于1的數(shù)據(jù)；因?yàn)镺bject.assign無(wú)法深層拷貝。

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);

結(jié)果：

在這里插入圖片描述

方法二：使用JSON.parse和JSON.stringify,一般用于數(shù)據(jù)類型比較復(fù)雜的，有深層嵌套的數(shù)據(jù)；但是undefined ， function， RegExp 等類型無(wú)法處理；

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);

結(jié)果：

在這里插入圖片描述

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

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