最近在做项目的时候遇到一些深拷贝浅拷贝的一些问题,跟着同事学习了下在这里分享一些心得。
深浅拷贝用的是前端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。
我是小丁,
祝你牛逼