偶尔在今日头条看到一篇关于JavaScript深拷贝的文章(感谢原作者:外卖杂谈(头条号)),备忘一下
浅拷贝代码:
1 //浅拷贝 2 var temp_1 = {name: 'Liang', age: '21', 3 wife:{ 4 name:"hello", 5 author:"world" 6 }, 7 hobby: ['baskeball', 'coding', 'eating', 'sleeping']}; 8 var temp_2 = {}; 9 for (var k in temp_1) { 10 temp_2[k] = temp_1[k]; 11 } 12 console.log("push之前"); 13 console.log(temp_1); 14 temp_2["hobby"].push("laughing"); 15 console.log("push之后"); 16 console.log(temp_2); 17 console.log(temp_1);
浏览器输出结果
注意Array的变化。原因:在复制属性值为Object的时候只是进行了简单的地址拷贝
深拷贝:
1 var temp_1 = { 2 name: 'Liang', age: '21', 3 wife: { 4 name: "hello", 5 author: "world" 6 }, 7 hobby: ['baskeball', 'coding', 'eating', 'sleeping'] 8 }; 9 var temp_2 = {}; 10 /** 11 *深层拷贝 12 * @param obj1 新对象 13 * @param obj2 被拷贝对象 14 */ 15 function myCopy(obj1, obj2) { 16 obj1 = obj1 || {}; 17 for (var temp in obj2) { 18 if (obj2.hasOwnProperty(temp)) {//hasOwnProperty(x) 指示对象是否具有指定名称的属性 19 if (typeof obj2[temp] == 'object') {//属性值为object 20 obj1[temp] = Array.isArray(obj2[temp]) ? [] : {};//确定属性类型 21 myCopy(obj1[temp], obj2[temp]);//递归进行处理 22 } else { 23 obj1[temp] = obj2[temp] 24 } 25 } 26 } 27 } 28 myCopy(temp_2,temp_1); 29 console.log("push之前"); 30 console.log(temp_1); 31 temp_2["hobby"].push("laughing"); 32 console.log("push之后"); 33 console.log(temp_2); 34 console.log(temp_1);
运行结果:
代码不难理解,问题主要来自复制对象时候,浅拷贝直接使用了地址引用,导致复制前后两个对象变量含有共享内容,而深拷贝中 obj1[temp] = Array.isArray(obj2[temp]) ? [] : {}; 这行代码重新创建新的变量,so...
如有不正确的地方,麻烦大神指正一下,谢谢!!!