js中的浅拷贝深拷贝深入理解

lastSeries 发布于2019-08-21 16:43 / 1519人阅读

摘要：举个例子来说明一下什么是浅拷贝什么是深拷贝浅拷贝得出的结果可以看出是浅拷贝非对象的属性值一个改变不影响另一个的值对象属性是引用赋值所以一个改变会影响另一个的改变出现这种情况的本质是对象是按引用赋值的深拷贝指的是拷贝一个对象，改变一个值不影响

举个例子来说明一下什么是浅拷贝什么是深拷贝

浅拷贝

var x = {
    a: 1,
    b: {f: {
        g: 1
    }},
    c: [1, 2, 3]
};
var y = shallow(x);

得出的结果可以看出是浅拷贝

非对象的属性值一个改变不影响另一个的值

对象属性是引用赋值所以一个改变会影响另一个的改变

出现这种情况的本质是：对象是按引用赋值的

深拷贝

指的是拷贝一个对象，改变一个值不影响另一个的值

// 实现深复制功能
// 判断：1.是否是对象 2.是否是函数
function deepCopy (obj, isDeep) {
    if (!_.isObject(obj)) {
        return obj
    } else {
        if (_.isFunction(obj)) {
            return new Function("return " + obj.toString())();
        } else {
            var name,
                target = _.isArray(obj) ? [] : {},
                value;
            for (name in obj) {
                value = obj[name];

                // 是浅拷贝还是深拷贝
                if (isDeep && (_.isArray(value) || _.isObject(value))) {
                    console.log("深拷贝");
                    target[name] = deepCopy(value, isDeep);
                } else {
                    console.log("浅拷贝");
                    target[name] = value
                }
            }
            return target;
        }
    }
}

var array3 = {
    a: 1,
    b: {f: {
        g: 1
    }},
    c: function () {
        console.log("is function");
    }
};
var array4 = deepCopy(array3, false);

一个技巧

使用JSON对象的parse()和stringify()方法

pares() JSON字符串转成js对象

stringify() 将js对象转成JSON字符串

//例1
var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改变target的name属性
console.log(source.name); //source 
console.log(target.name); //target

//例2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined

这种方法有局限性：

对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)

它会抛弃对象的constructor，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object

参考

lodash一些功能函数的使用

github js中浅拷贝和深拷贝的实现

云服务器 GPU云服务器深拷贝和浅拷贝深拷贝 javascript深拷贝 js拷贝内存数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88640.html

JavaScript中的浅拷贝和深拷贝

摘要：在中可以通过添加一个参数来实现递归，调用就可以实现一个深拷贝。利用序列化实现一个深拷贝在JavaScript中，对于Object和Array这类引用类型值，当从一个变量向另一个变量复制引用类型值时，这个值的副本其实是一个指针，两个变量指向同一个堆对象，改变其中一个变量，另一个也会受到影响。这种拷贝分为两种情况：拷贝引用和拷贝实例，也就是我们说的浅拷贝和深拷贝浅拷贝（shallow...

ernest.wang 2019-08-21 11:34 评论0 收藏0
js的浅拷贝和深拷贝

摘要：拷贝分为浅拷贝和深拷贝。浅拷贝是引用复制，深拷贝是完全单纯拷贝数据的值。所以，这种方法只是简单绕过第一层箱子的引用复制深拷贝目前比较好的方法就是大法，要么就是自己写递归的深拷贝函数。附带深拷贝的自定义函数源自大佬的经常遇到数组或对象等引用类型作为函数的参数的情况，但又不想修改原来的数据，这时候就需要拷贝（基本类型的变量不需要考虑）。拷贝分为浅拷贝和深拷贝。浅拷贝是引用复制，深拷贝是完...

jsliang 2019-08-23 10:26 评论0 收藏0
关于JavaScript的浅拷贝和深拷贝

摘要：引用类型值引用类型值是保存在堆内存中的对象，变量保存的只是指向该内存的地址，在复制引用类型值的时候，其实只复制了指向该内存的地址。前言要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型。JavaScript有两种数据类型，基础数据类型和引用数据类型。js的基本类型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 评论0 收藏0
浅探js深拷贝和浅拷贝

摘要：接下来就让我们更细致的探究中的深浅拷贝。总结以上对深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样...

habren 2019-08-23 13:01 评论0 收藏0
实现JS中的浅拷贝和深拷贝

摘要：浅拷贝和浅拷贝的问题，不仅在日常应用中需要注意，而且在面试和笔试中也常被用来考察应聘者，属于文体两开花的。基本数据类型引用数据类型等等基本数据类型是按值访问的，对其的拷贝会直接复制其值保存在新变量中。方法手工遍历法方法方法方法方法浅拷贝和浅拷贝的问题，不仅在日常应用中需要注意，而且在面试和笔试中也常被用来考察应聘者，属于文体两开花的points。什么是深拷贝和浅拷贝呢？名称 ...

huangjinnan 2019-08-26 13:38 评论0 收藏0