JS物件複製(深拷貝和淺拷貝)
阿新 • • 發佈:2021-04-29
一、淺拷貝
1、Object.assign(target,source,source...)
a、可支援多個物件複製
b、如果source和target屬性相同 source會複製target的屬性
c、target只能為Object物件
var obj = {a:1,b:2} undefined Object.assign({c:3},obj) {c: 3,a: 1,b: 2程式設計客棧} obj {a: 1,b: 2} 相容性寫法if(Object.assign){//相容}else{//不相容}
2、擴充套件運算子(spread)
支援將多個物件複製到一個物件上“
var obj1 = { foo: "foo" }; var obj2 = { bar: "bar" }; var copySpread = { ...obj1,...obj2 }; // Object {foo: "foo",bar: "bar"} copySpread {foo: "foo",bar: "bar"} var obj = {a:1,b:2,c:3} var objs = {...obj} objs {a: 1,b: 2,c: 3} objs.a=10 10 objs {a: 10,c: 3} obj {a: 1,c: 3}
二、深拷貝
1、使用物件序列化 JSON.stringify()和JSON.parse()
注意:此方法僅在原物件包含可序列化值型別且沒有任何迴圈引用時才有效。不可序列化值型別的一個例子是Date物件 -JSON.parse只能將其解析為字串而無法解析回其原始的Date物件 或者物件中屬性值為function
var obj = {a:1,b:[1,2,3],c:{e:3},bool:false} undefined var objs = JSON.parse(JSON.stringify(obj)) undefined objs {a: 1,b: Array(3),c: {JAoQsTt…},bool: false} objs.bool = true true objs {a: 1,c: {…},bool: true} obj {a: 1,bool: false}
2、使用遞迴,對對www.cppcns.com象屬性進行判斷
function deepClone(obj) {
var copy;
// 如果 obj 是 null、undefined 或 不是物件,直接返回 obj
// Handle the 3 simple types,and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0,len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}
// Handle Function
if (obj instanceof Function) {
copy = function() {
return obj.apply(this,arguments);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
程式設計客棧 return copy;
}
throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}
以上就是JS物件複製(深拷貝和淺拷貝)的詳細內容,更多關於JAoQsTtJS的資料請關注我們其它相關文章!