对于深拷贝与浅拷贝的理解

最近在做项目的时候遇到一些深拷贝浅拷贝的一些问题，跟着同事学习了下在这里分享一些心得。

深浅拷贝用的是前端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。

我是小丁，

祝你牛逼

对于深拷贝与浅拷贝的理解

猜你喜欢