vue項目使用深拷貝

 

淺拷貝 ： 只是將數據中所有的數據引用下來，依舊指向同一個存放地址，拷貝之后的數據修改之后，也會影響到原數據的中的對象數據。例如:Object.assign(),...擴展運算符

深拷貝： 將數據中所有的數據拷貝下來，對拷貝之后的數據進行修改不會影響到原數據。

JSON.parse(JSON.stringify(obj))深拷貝的問題

1、如果obj里面存在時間對象,JSON.parse(JSON.stringify(obj))之后，時間對象變成了字符串。
2、如果obj里有RegExp、Error對象，則序列化的結果將只得到空對象。
3、如果obj里有函數，undefined，則序列化的結果會把函數， undefined丟失。
4、如果obj里有NaN、Infinity和-Infinity，則序列化的結果會變成null。
5、JSON.stringify()只能序列化對象的可枚舉的自有屬性。如果obj中的對象是有構造函數生成的， 則使用JSON.parse(JSON.stringify(obj))深拷貝后，會丟棄對象的constructor。
6、如果對象中存在循環引用的情況也無法正確實現深拷貝。

適用於vue深拷貝

function coppyArray(arr){
   return arr.map((e)=>{
        if(typeof e==='object'){
           return Object.assign({},e);
         }else{
           return e;
       }
     }) 
 }　　//這個好像不兼容IE所以使用下面那個

function copyArray(arr){
  return JSON.parse(JSON.stringify(arr));      
}

遞歸實現深拷貝

function copy (obj) {
    let newObj = null
    if (typeof obj === 'object' && obj !== null) {
        newObj = obj instanceof Array ? [] : {}
        for (let i in obj) {
            newObj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i]
        }
    } else {
        newObj = obj
    }
    return newObj
}