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物件
- JS 物件如何實現深複製JS物件
- VUE js中複製物件 JSONVue物件JSON
- vue 中實現複製貼上Vue
- 【web前端】用javascript實現物件的深複製Web前端JavaScript物件
- Vue中結合clipboard實現複製功能Vue
- Vue使用vue-clipboard2實現複製貼上功能Vue
- js 實現深複製/深複製JS
- JS物件複製:深複製和淺複製JS物件
- js物件的複製方法JS物件
- SpringBoot物件複製Spring Boot物件
- C#中的物件深複製和淺複製C#物件
- mysql過濾複製的實現MySql
- JS實現複製大法JS
- 前端實現複製功能前端
- 淺談JS中物件的淺複製和深複製JS物件
- JavaScript物件複製理解JavaScript物件
- js深度複製物件JS物件
- js物件深複製JS物件
- Java物件複製原理剖析及最佳實踐Java物件
- 對於複製普通物件 深複製和淺複製是否一樣物件
- mysql實現主從複製MySql
- js實現複製連結JS
- redis 主從複製實現Redis
- JS物件深度克隆/複製JS物件
- 尾遞迴實現深複製遞迴
- docker實現mysql主從複製DockerMySql
- Vue中配合clipboard.js實現點選按鈕複製內容VueJS
- 複製物件重新賦值不改變原物件物件賦值
- JS如何實現點選複製功能,JS點選複製文字JS
- JS 複製陣列和物件JS陣列物件
- Java物件複製之MapStruct使用Java物件Struct
- 談談Python中物件複製Python物件
- 【JavaScript】聊一聊js中的淺複製與深複製與手寫實現JavaScriptJS
- ZeroClipboard 多個複製按鈕,多個複製連結 實現方式
- js 實現點選複製內容JS
- JavaScript實現複製和貼上功能JavaScript