js中的浅拷贝和深拷贝

127 阅读1分钟

1.浅拷贝和深拷贝的概念

浅拷贝:它是把原来的变量地址给了另一个,他们是会相互影响,其中一个改变会影响另一个的改变,它们之间的地址都是同一个地址,所以它们会互相影响。浅拷贝也称为引用拷贝。
深拷贝:它会先开辟新的空间,然后把要拷贝的属性和方法复制进去,使这个对象指向这个地址。它们之间就不会互相影响,因为它们指向不同的地址与浅拷贝不同,它们虽然属性、方法一样,但它们是两个不一样的个体。 深拷贝也称为值拷贝。

浅拷贝的几种方法

1.使用 for in 循环进行浅拷贝

<script>script
        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };

        let o = {};
        for (const key in obj) {
            o[key] = obj[key];
        }
        console.log(o);
    </script>

image.png

2.使用ES6中的语法 assign

<script>
        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };

        let o = {};
        Object.assign(o, obj);
        console.log(o);
    </script>

image.png 3.使用 扩展运算符 ...

<script>
        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };

        let o = {
            ...obj
        };

        console.log(o);
    </script>

image.png

4.只适用于数组concat

<script>script
        let arr1 = [1, 3, {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        }];

        let arr2 = arr1.concat();

        console.log(arr2);
</script>

image.png

5.也只适用于数组slice

<script>script
        let arr1 = [1, 3, {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        }];

        let arr2 = arr1.slice();

        console.log(arr2);
</script>

image.png

深拷贝的方法

  1. JSON.parse(JSON.stringify()) 方法
<script>
        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18,
                name: 'jack',
                msgs: {
                    age: 21,
                    name: 'laog'
                }
            }
        };
        let o = JSON.parse(JSON.stringify(obj));
        console.log(o);
    </script>

image.png 2.使用 递归 的方法

<script>
        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18,
                name: 'jack',
                msgs: {
                    age: 21,
                    name: 'laog'
                }
            }
        };

        let o = {};

        function fn(newObj, oldObj) {
            for (let key in oldObj) {
                let item = oldObj[key];
                if (item instanceof Array) {
                    newObj[key] = [];
                    fn(newObj[key], item)
                } else if (item instanceof Object) {
                    newObj[key] = {};
                    fn(newObj[key], item);
                } else {
                    newObj[key] = item;
                }
            }
        }
        fn(o, obj);
        console.log(o);
</script>

image.png