vue實現物件的複製
寫程式碼的時候發現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;
}
相關文章
- vue複製物件Vue物件
- Vue實現對陣列、物件的深拷貝、複製Vue陣列物件
- vue物件的深層複製Vue物件
- JS 物件如何實現深複製JS物件
- vue 中實現複製貼上Vue
- 【web前端】用javascript實現物件的深複製Web前端JavaScript物件
- VUE js中複製物件 JSONVue物件JSON
- Vue中結合clipboard實現複製功能Vue
- Vue使用vue-clipboard2實現複製貼上功能Vue
- 複製物件物件
- js 實現深複製/深複製JS
- JS物件複製:深複製和淺複製JS物件
- js物件的複製方法JS物件
- 原生js實現的物件複製和擴充套件程式碼例項JS物件套件
- mysql過濾複製的實現MySql
- JS實現複製大法JS
- 前端實現複製功能前端
- js實現複製功能JS
- Redis 複製實現原理Redis
- 淺談JS中物件的淺複製和深複製JS物件
- Java中物件的深複製和淺複製詳解Java物件
- js物件深複製JS物件
- JavaScript物件複製理解JavaScript物件
- iOS之物件複製iOS物件
- js深度複製物件JS物件
- Java物件複製原理剖析及最佳實踐Java物件
- js實現複製連結JS
- redis 主從複製實現Redis
- mysql實現主從複製MySql
- 實現Mysql延時複製MySql
- 對於複製普通物件 深複製和淺複製是否一樣物件
- 實現物件的複用——享元模式(五)物件模式
- 實現物件的複用——享元模式(四)物件模式
- 實現物件的複用——享元模式(三)物件模式
- 實現物件的複用——享元模式(二)物件模式
- 實現物件的複用——享元模式(一)物件模式
- SpringBoot物件複製Spring Boot物件
- JS物件深度克隆/複製JS物件