javascript深度克隆

js有两种数据类型:
  基本类型(包括undefined,Null,boolean,String,Number),按值传递;
  引用类型(包括Array,Object),按址传递,引用类型在值传递的时候是内存中的地址。
克隆或者拷贝分为2种:
  

浅度克隆:基本类型为值传递,对象仍为引用传递。

 1 var oPerson={
 2     oName:"rookiebob",
 3     oAge:"18",
 4     oAddress:{
 5         province:"beijing"
 6     },
 7     ofavorite:[
 8         "swimming",
 9         {reading:"history book"}
10     ],
11     skill:function(){
12         console.log("bob is coding");
13     }
14 };
15 function clone(obj){
16     var result={};
17     for(key in obj){
18         result[key]=obj[key];
19     }
20     return result;
21 }
22 var oNew=clone(oPerson);
23 console.log(oPerson.oAddress.province);//beijing
24 oNew.oAddress.province="shanghai";
25 console.log(oPerson.oAddress.province);//shanghai

深度克隆:所有元素或属性均完全克隆,并于原引用类型完全独立。即,在后面修改对象的属性的时候,原对象不会被修改。

 1 function deepClone(obj){
 2     var result,oClass=isClass(obj);
 3         //确定result的类型
 4     if(oClass==="Object"){
 5         result={};
 6     }else if(oClass==="Array"){
 7         result=[];
 8     }else{
 9         return obj;//此处如果用return result=obj;会大幅增加时间复杂度
10     }
11     for(key in obj){
12         var copy=obj[key];
13         if(isClass(copy)=="Object"){
14             result[key]=arguments.callee(copy);//递归调用
15         }else if(isClass(copy)=="Array"){
16             result[key]=arguments.callee(copy);
17         }else{
18             result[key]=obj[key];
19         }
20     }
21     return result;
22 }
23 //返回传递给他的任意对象的类
24 function isClass(o){
25     if(o===null) return "Null";
26     if(o===undefined) return "Undefined";
27     return Object.prototype.toString.call(o).slice(8,-1);//返回"[object type]"数组故需从数组第8个元素到最后一个元素截取“type”部分内容
28 }
29 var oPerson={
30     oName:"rookiebob",
31     oAge:"18",
32     oAddress:{
33         province:"beijing"
34     },
35     ofavorite:[
36         "swimming",
37         {reading:"history book"}
38     ],
39     skill:function(){
40         console.log("bob is coding");
41     }
42 };
43 //深度克隆一个对象
44 var oNew=deepClone(oPerson);
45
46 oNew.ofavorite[1].reading="picture";
47 console.log(oNew.ofavorite[1].reading);//picture
48 console.log(oPerson.ofavorite[1].reading);//history book
49
50 oNew.oAddress.province="shanghai";
51 console.log(oPerson.oAddress.province);//beijing
52 console.log(oNew.oAddress.province);//shanghai
时间: 2025-01-08 14:11:00

javascript深度克隆的相关文章

工作积累(四)——JavaScript深度克隆的实现

JavaScript 中的数据有两种大类,即基本类型和引用类型.因为引用类型使用指针,所以在简单赋值时不能实现克隆,下面介绍两种方法来实现 JavaScript 深度克隆. 1. 原生JavaScript: function clone(former) { if(!(former instanceof Object) ||former === null || (former instanceof RegExp) || (former instanceof Function)) return fo

javascript深度克隆与javascript的继承实现

1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ o[key] = typeof obj[key] === "object" ? cloneObject(obj[key]) : obj[key]; } } ret

javascript深度克隆函数deepClone

javascript深度克隆函数deepClone function deepClone(obj) { var _toString = Object.prototype.toString; // null, undefined, non-object, function if (!obj || typeof obj !== 'object') { return obj; } // DOM Node if (obj.nodeType && 'cloneNode' in obj) { retu

javascript深度克隆对象

/** * * @param obj * @returns {*} */ //深度克隆 function cloneObject(obj) { if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) return obj; if (obj instanceof Date) var temp = new obj.constructor(); //or new Date(obj); else var temp =

编写 javascript 深度克隆函数 deepClone

function deepClone(obj) { var _toString = Object.prototype.toString; // null, undefined, non-object, function if (!obj || typeof obj !== 'object') { return obj; } // DOM Node if (obj.nodeType && 'cloneNode' in obj) { return obj.cloneNode(true); }

JavaScript实现对象的深度克隆【简洁】【分享】

JavaScript实现对象的深度克隆 代码实现如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clone</title> 6 7 <script type="text/javascript"> 8 //对象深度克隆方法 9 10 11 ////

javascript中对象的深度克隆

零.寒暄 又是一个月多月没有更新博客了,这段时间回学校处理下论文的事情,实习的生活也暂时告一段落(在公司上班,才发现学校里面的生活简直如天堂一般,相信很多已经毕业的小伙伴肯定被我说中了,说中了请给本文点个赞,哈哈!).希望接下来自己的更新进度能加快,马上又是一年校招时,被虐也好.大牛虐别人也罢,总之祝福各位今年要找工作的小伙伴们好运.那么,今天就聊一下一个常见的笔试.面试题,js中对象的深度克隆.翻了下这个题目,在很多地方出现过,已经算一个老的题目了,但是每年的校招中总会考到,其实想想,这个题目

JavaScript对象之深度克隆

也不知道从什么时候开始,前端圈冒出了个新词:对象深度克隆.看起来好像很高大上的样子,实际上并不新鲜,在我们的实际项目开发中,你可能早已用到,只不过由于汉字的博大精深,有些原本很简单的事物被一些看似专业的词汇稍加修饰,就变得神秘起来了. 首先为什么要将一个对象进行深克隆?请允许我进行一个猜测:你有时一定会认为js的内置对象document太长,那么你可能会这样做: var d = document; d.by = function(id){ return d.getElementById(id);

JavaScript 浅克隆与深度克隆

一.浅克隆  1.基本数据类型的克隆(赋值即可) var a = 1; var b = a; console.info(a); //1 console.info(b); //1 a = 2; console.info(a); //2 console.info(b); //1 把一个值赋给另一个变量时,当那个变量的值改变的时候,另一个值不会受到影响. 2.数组克隆 如果我们采取基本数据类型的方式(赋值)来进行克隆,案例如下: var arr1 = [1, 2, 3]; var arr2 = arr