深拷贝: 拷贝前后的两个数据互不影响.深拷贝不仅拷贝了指针,也将指针指向的内容进行了拷贝.相当于重新开辟了一个内存单元.后面拷贝过来的对象无论怎么改变,对之前的对象没有影响.
浅拷贝: 顾名思义与深拷贝相反,浅拷贝拷贝的是地址也就是指针,但是没有拷贝内容,由于地址指向的是同一个内存单元,无论是原先的对象还是新拷贝过来的对象,只要修改了值也就是共同指向的那个内存单元值改变了,另外一个对象也会相应的发生改变.
对象浅拷贝方法: 1. 通过Object.assign(目标对象,源对象)返回目标对象,如果目标对象与源对象都有值,如果两个对象有相同的key值,那么目标对象会被覆盖,并且这个方法拷贝的是可枚举的属性值.
let obj1 = {a:1,b:2} let obj2 = {b:2,c:3} let obj = Object.assign(obj1,obj2) console.log(obj,obj1,obj2) // {a:1,b:2,c:3} ,{a:1,b:2,c:3},{b:2,c:3}对象深拷贝方法: 1. Lodash原生库,里面提供了很多方法,其中cloneDeep就能实现深拷贝. 2. 通过JSON.stringify(对象)这个方法,先将对象转化成字符串,然后再通过JSON.parse()将这个字符串转化成对象或者数组.
let obj1 = { a: 0 , b: { c: 1,d: {e:2}}}; let obj2 = JSON.parse(JSON.stringify(obj1)) obj2.b.d.e = 5; console.log(obj1,obj2) //{ a: 0 , b: { c: 1,d: {e:2}}}, //{ a: 0 , b: { c: 1,d: {e:5}}} //这样可以简单的实现了深复制,复制过来的对象相互间没有影响,但是有一种情况下这种方法无法实现深复制,如对象中存在函数是无法将函数复制过来的 let obj1 = {a:0,b:function(){ console.log(this) }} let onj2 = JSON.parse(JSON.stringify(obj1)) console.log(obj1,obj2) // {a:0,b:f},{a:0} }}lodash在前端框架中的使用,例如vue
1.安装lodash npm i lodash -D 2.lodash/function 这种格式，单独引入某个函数 <template> <div class="home"> 深复制loadsh测试 <ul> <li>{{obj1.a}}</li> <li>{{obj1.b.c.d}}</li> </ul> <button @click="response()">再说一遍</button> <ul v-if="obj2 !== null"> <li>{{obj2.a}}</li> <li>{{obj2.b.c.d}}</li> </ul> <div v-else>好的</div> </div> </template> <script> import cloneDeep from "lodash/cloneDeep" export default { name: 'Home', data(){ return { obj1:{ a:'头顶一片天', b:{ c:{ d:'脚踏一块地', e:function data(){ alert("好的") } } } }, obj2:null } }, methods:{ response(){ this.obj2 = cloneDeep(this.obj1) this.obj2.b.c.e() } } } </script>