bunny笔记|深拷贝和浅拷贝的区别,深拷贝的几种方式

1.浅拷贝

浅拷贝是指，对基本类型的值拷贝，以及对象类型的地址拷贝。(基本类型，js的number、string、boolean)

如：
对基本类型的值拷贝

<script>
var a=1;
var b=a;//浅拷贝
b=2;//改变b的值，并不会影响到a，因为浅拷贝对基本类型而言就是值拷，也就是按值传递的类型。
console.log(a)；//1
</script>

2.深拷贝

对象类型的地址拷贝

方法一：
当我们对p2进行改造，就不会影响到p1，这就是深拷贝。但是当属性很多的时候，这样处理太繁琐，看第二种方式。

<script>
        var p1 = {
            name: 'bunny',
            age: '18'
        }

        var p2 = {
            name: p1.name,
            age: p1.age
        }
</script>

image.png

方法二：Object.assign()
Object.assign()是一种可以对非嵌套对象进行拷贝的方法，如果对象中出现嵌套情况，那么其对被嵌套对象的行为就成了普通的浅拷贝，如果没有嵌套，如下：

<script>
        //源对象
        var p1 = {
            name: "bunny",
            //嵌套，如这里的对象嵌套对象
            p3: {
                name: "小bunny"
            }
        }
        //目的对象
        var p2 = {}

        //深拷贝嵌套对象
        Object.assign(p2, p1)// Object.assign只能拷贝一层
        JSON.stringify(p1)

</script>

image.png

p2对name属性修改是不会影响到p1的原始值的

image.png

或者用JSON进行转换(实战中用最多的方法 JSON.stringify())

image.png

方法三：用递归的方式做深拷贝

<script>
        var bun1 = {
            name: 'hyacinth',
            age: 18,
            per: {
                name: 'Marry'
            }
        }

        var bun2 = deepCopy({}, bun1)

        function deepCopy(dest, src) {
            var dest = dest || {};
            for (let key in src) {
                //如果对象的属性只是对象，则递归处理
                if (typeof src[key] === "object") {
                    dest[key] = (src[key].constructor === Array) ? [] : {};
                    deepCopy(dest[key], src[key])
                } else {
                    dest[key] = src[key]
                }
            }
            return dest;
        }
</script>

image.png