vue實現物件的複製

我是死宅蘿莉控發表於2020-05-18

寫程式碼的時候發現bug
首先我是有一個陣列,假設是陣列:

var a = [
{id=1,name="test1",time="2020-5-18 10:20"}
,{id=2,name="test2",time="2020-5-17 10:20"}
];

然後我將陣列中的一項單獨拿出來

var flag = a[0];

然後進行了一些操作

flag.name = "今天的時間";

然後在呼叫a陣列的時候發現a陣列中的陣列也變了,變成了

var a = [
{id=1,name="今天的時間",time="2020-5-18 10:20"}
,{id=2,name="test2",time="2020-5-17 10:20"}
];

bing查了下發現這是因為除了基礎變數外,其他變數間進行= 操作都是傳遞的地址,倆個變數都是指向同一個地址,其中一個變了其他的頁會跟著變
如果只想進行值傳遞,則需要進行物件陣列的複製
倆種方法
1:var flag = JSON.parse(JSON.stringify(a[0])) a[0]替換為你需要複製的物件陣列,但是這種方法的話會有一些限制:參考連結

轉換值如果有 toJSON() 方法,該方法定義什麼值將被序列化。
非陣列物件的屬性不能保證以特定的順序出現在序列化後的字串中。
布林值、數字、字串的包裝物件在序列化過程中會自動轉換成對應的原始值。
undefined、任意的函式以及 symbol 值,在序列化過程中會被忽略(出現在非陣列物件的屬性值中時)或者被轉換成 null(出現在陣列中時)。函式、undefined 被單獨轉換時,會返回 undefined,如JSON.stringify(function(){}) or JSON.stringify(undefined).
對包含迴圈引用的物件(物件之間相互引用,形成無限迴圈)執行此方法,會丟擲錯誤。
所有以 symbol 為屬性鍵的屬性都會被完全忽略掉,即便 replacer 引數中強制指定包含了它們。
Date 日期呼叫了 toJSON() 將其轉換為了 string 字串(同Date.toISOString()),因此會被當做字串處理。
NaN 和 Infinity 格式的數值及 null 都會被當做 null。
其他型別的物件,包括 Map/Set/WeakMap/WeakSet,僅會序列化可列舉的屬性。

2:直接迴圈遍歷進行復制:

function deepClone(data){
       var type = getType(data);
       var obj;
       if(type === 'array'){
           obj = [];
       } else if(type === 'object'){
           obj = {};
       } else {
           //不再具有下一層次
           return data;
       }
       if(type === 'array'){
           for(var i = 0, len = data.length; i < len; i++){
               obj.push(deepClone(data[i]));
           }
       } else if(type === 'object'){
           for(var key in data){
               obj[key] = deepClone(data[key]);
           }
       }
       return obj;
   }

相關文章