最近在做项目的时候遇到一些深拷贝浅拷贝的一些问题，跟着同事学习了下在这里分享一些心得。
深浅拷贝用的是前端lodash的库
先上代码：
<template> <div class="">对于深拷贝浅拷贝的练习</div> </template> <script> import _ from "lodash"; import object from "element-resize-detector/src/detection-strategy/object"; export default { components: {}, data() { return {}; }, created() {}, mounted() { let a1 = { name: "a1", age: 40, children: { name: "a11", age: 12, }, }; let a2 = { name: "a1", age: 40, children: { name: "a11", age: 12, }, }; let a3 = a1; //这里浅拷贝用的es6内置方法，可以用lodash的_.deep也是一样 let a4 = Object.assign({}, a1); let a5 = _.cloneDeep(a1); console.log("a2是否等于a1", a1 == a2, a1 === a2,a1.children==a2.children,a1.children===a2.children); console.log("a3是否等于a1", a1 == a3, a1 === a3,a1.children==a3.children,a1.children===a3.children); console.log("a4是否等于a1", a1 == a4, a1 === a4,a1.children==a4.children,a1.children===a4.children); console.log("a5是否等于a1", a1 == a5, a1 === a5,a1.children==a5.children,a1.children===a5.children); }, watch: {}, computed: {}, methods: {}, }; </script> <style lang="scss" scoped> </style>
然后上结果：
第一条结果：因为a1，a2各自声明，故所在内存地址肯定不一样，故全是false
第二条结果：a3是直接赋值a1的结果，两者指向的内存地址一样，修改a3任意属性a1都会改变，故全是true。
第三条结果：a4是我们浅拷贝a1来的值，浅拷贝只拷贝根节点的属性，子节点的内存地址不变和 原来一样，我们修改a4根节点的name看a1的name不会变，但是我们更改a4的子节点的name，a1的子节点name会跟着变，所以前两个是false，后两个是true。
第四条结果：a5是我们深拷贝的结果，不光拷贝根节点，还会拷贝子节点，子节点的再子节点，故内存地址都是不一样的，所以结果全是false。
我是小丁，
祝你牛逼
