js深度克隆和淺度克隆
阿新 • • 發佈:2019-02-04
“使用JavaScript深度克隆一個物件。”
這是一個出現概率很高的面試題,下面就來總結下,二者的區別以及其程式碼。
科普一下:
js一般有兩種不同資料型別的值:
基本型別(包括undefined,Null,boolean,String,Number),按值傳遞;
引用型別(包括陣列,物件),按址傳遞,引用型別在值傳遞的時候是記憶體中的地址。
1.概念
淺度克隆:基本型別為值傳遞,物件仍為引用傳遞。
深度克隆:所有元素或屬性均完全克隆,並於原引用型別完全獨立,即在後面修改物件的屬性時,原物件不會被修改。
其實深度克隆就是把一個物件裡面的東西一模一樣地複製到另一個物件,並且這兩個物件分別放在記憶體的不同地方。
無論是深度克隆還是淺度克隆,直接把克隆當做複製就好,一個複製的不乾淨,只複製其值,但另一個複製的比較徹底,直接將其屬性等也複製過來了。
2.程式碼
淺度克隆:
//數值克隆的表現
var a="1";
var b=a;
b="2";
console.log(a);// "1"
console.log(b);// "2"
//字串克隆的表現
var c="1";
var d=c;
d="2";
console.log(c);// "1"
console.log(d);// "2"
//字串克隆的表現
var x=true;
var y=x;
y=false;
console.log(x);// true
console. log(y);// false
//物件克隆表現
var m=function(){alert(1);};
var n=m;
n=function(){
alert(2);
};
console.log(m());//1
console.log(n());//2
以上都是淺度克隆 的表現,其基本都是基本型別為值進行的傳遞,物件依舊是引用進行傳遞。
深度克隆:
//深度克隆一個物件
function cloneObject(o) {
if(!o || 'object' !== typeof o) {
return o;
}
var c = 'function' === typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v = o[p];
if(v && 'object' === typeof v) {
c[p] = Ext.ux.clone(v);
}
else {
c[p] = v;
}
}
}
return c;
};
js程式碼實現JSON物件的深度克隆,並返回一個新物件:
function cloneObj(obj){
var newobj = obj.constructor === Object ? {} : [];
if(typeof JSON === 'object'){
var s = JSON.stringify(obj), //系列化物件
newobj = JSON.parse(s); //反系列化(還原)
}else{
if(newobj.constructor === Array){
newobj.concat(obj);
}else{
for(var i in obj){
newobj[i] = obj[i];
}
}
}
return newobj;
}