javascript|js高级—理解浅拷贝和深拷贝 vue.js|node.js

【javascript|js高级—理解浅拷贝和深拷贝】1、浅拷贝只是拷贝一层，更深一层对象级别的值拷贝引用。也就是拷贝了内存地址。
2、深拷贝拷贝多层，每一级别的数据都会拷贝。也就是会重新开辟一个新的空间进行存储，修改的话不会影响原数据。
浅拷贝案例代码：

//案例一只拷贝一层 var obj = { id:1, name:'lisi' } var newObj={ } //应用for in 遍历对象 for(var k in obj){//k是属性名也就是id、name //obj[k]属性值得到的就是对象里面的1、lisi newObj[k] = obj[k]; } console.log(newObj)

打印结果：

文章图片

更深一层的对象拷贝，虽然也可以拷贝，但是拷贝的是原来对象的地址。如下案例：

//案例二更深层次的对象级别拷贝 var obj = { id:1, name:'lisi' msg:{age:18 } } var newObj={ } //应用for in 遍历对象 for(var k in obj){ newObj[k] = obj[k]; } console.log(newObj); newObj.msg.age = 20; // 修改新对象里面的值,会影响原对象的值 console.log('---obj打印结果如下---'); console.log(obj);

打印结果

文章图片

以上案例使用原生js方法，可以使ES6的新增方法实现一句话搞定浅拷贝。

// 第一个参数为要拷贝给谁第二个参数为要拷贝哪一个对象 Object.assign(newObj, obj); //实现效果和上面的一样

利用函数递归的思想来实现深拷贝
深拷贝案例代码：

var obj1 = { id: 1, name: 'lisi', msg: {age: 18, }, color: ['red', 'green'], }; var obj2 = { }; // 封装函数 function deepCope(newObj, oldobj) { for (var k in oldobj) { //判断属性值属于那种数据类型 // 1、获取属性值 oldobj[k] var item = oldobj[k]; // 2、判断这个值是否是数组要先判断数组因为数组也是属于对象型 if (item instanceof Array) {newObj[k] = []; // 相当于obj2.color = [] 也就是说这个属性里面传的必须是一个数组 deepCope(newObj[k], item); } else if (item instanceof Object) {// 3、判断这个值是否是对象 newObj[k] = { }; deepCope(newObj[k], item); } else {// 4、属于简单数据类型 newObj[k] = item; } } } deepCope(obj2, obj1); // 调用函数并传入要拷贝的对象 console.log(obj1); obj2.msg.age = 20; console.log('---修改后obj2打印结果如下---'); console.log(obj2);

打印结果：