JavaScript高级---(7)浅拷贝与深拷贝

x33g5p2x  于2021-09-24 转载在 JavaScript  
字(1.1k)|赞(0)|评价(0)|浏览(238)

一、浅拷贝

在JavaScript中,分为简单数据类型(数字、字符等)和复杂数据类型(对象、数组等),一般简单数据类型被存储在栈内存;而复杂数据类型存储在堆内存,其地址存储在栈内存里面。
所以一般将复杂数据类型赋值给其他变量的时候,一般是将其地址复制,如果对赋值后的数据进行操作,很容易改变原本的复杂数据类型。

我们举个例子,首先定义一个对象,里面有两个简单数据类型和另一个对象

var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18 // 将地址拷贝
            }
        };

        var o = {};
        for (var k in obj) {
            // k是属性名
            o[k] = obj[k];
        }
        console.log(o);
        o.msg.age = 20;
        console.log(o);
        console.log(obj);

我们先打印对象o,发现赋值完成:

接下来我们仅改变对象o里面age的属性,观察两个对象的age属性。

我们明明只改变了o的age,为什么obj的也会随着改变呢?这是因为在浅拷贝的情况下,里面复杂数据类型的赋值是地址的值传递,修改一个对象的同时,另一个对象也会改变。下面这张图可以更直观的理解。

js(es6)也为我们提供了浅拷贝的语法糖,同样可以实现浅拷贝,语法如下:
Object.assign(target, …sources)

Object.assign(o, obj);
        o.msg.age = 20;
        console.log(o);
        console.log(obj);

二、深拷贝

深拷贝很简单理解了,就是将赋值后的每一个变量都单独指向,与原先的数据脱离,不再公用变量。
下图有助你的理解:

原生JS递归实现深拷贝:

var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18
            },
            color: ['red', 'pink']

        };

        var o = {};

        // 递归实现深拷贝
        function deepCopy(newObj, oldObj) {
            for (var key in oldObj) {
                // 判断数据类型
                item = oldObj[key];
                if (item instanceof Array) {
                    newObj[key] = [];
                    deepCopy(newObj[key], item);
                } else if (item instanceof Object) {
                    newObj[key] = {};
                    deepCopy(newObj[key], item);
                } else {
                    newObj[key] = item;
                }
            }
        }
        deepCopy(o, obj);
        o.msg.age = 19;
        console.log(o);
        console.log(obj);

可以看到修改一个对象的值,另一个对象不受影响。

下一篇:JavaScript高级—(8)正则表达式

相关文章