浅拷贝和深拷贝只针对于引用数据类型

浅拷贝是复制另一个对象的内存地址，被复制的对象或新对象修改属性，另一个对象也会跟着变化。
深拷贝是开辟新的栈，新旧对象指针指向不同的内存地址（栈），其中一个对象属性改变，不会相互影响。
简单说浅拷贝只复制对象的第一层属性，而深拷贝复制所有层的属性

一.浅拷贝举例

var obj = {
    name: '小红',
    info: {
        age: 20
    }
}
var obj2 = obj;
obj.info.age=1000;
console.log(obj,obj2);

obj2跟着obj变化了

image.png

二.深拷贝方法

方法1. JSON.parse(JSON.stringify(obj))，弊端是：

• 会将对象值为Infinity、-Infinity、NaN的序列化的结果为null
• 会将对象值为undefined、function，序列化的结果会把function或 undefined对应的属性丢失
• 会将对象值为RegExp、Error对象，序列化的结果为空对象{}
• 会将对象值为date对象，序列化的结果为字符串

eg:

var defaults = {
    a1: Infinity,
    a2: -Infinity,
    a3: NaN,
    b1: undefined,
    b2: function() {
        console.log(0)
    },
    c1: new RegExp('\\w+'),
    c2: new Error('错了'),
    d: new Date(),
    limit: {
        a: 1,
        b: 2
    }
};
var settings1 = JSON.parse(JSON.stringify(defaults));
defaults.a3 = 888;
console.log(settings1, defaults);

JSON.parse(JSON.stringify(obj))结果

方法2. $.extend()，需要引入jquery，弊端是：

• 会将对象值为undefined，序列化的结果会把undefined对应的属性丢失

eg:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
var settings2 = $.extend(true, {}, defaults);
defaults.a3 = 888;
console.log(settings2, defaults);

$.extend()结果

方法3. _.cloneDeep，需要引入loadsh实用工具库，暂无发现弊端

eg:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
var settings3 = _.cloneDeep(defaults);
defaults.a3 = 888;
console.log(settings3, defaults);

_.cloneDeep结果

4.自己封装的公共方法 适合所有

    var Animal={
        name: "duobi",
        skin: ["red", "green"],
        child: {
            xxx: "xxx"
        },
        say: function(){
            console.log("I am ", this.name, " skin:", this.skin)
        }
    }
    function deep(dest, obj){
        var o = dest;
        for (var key in obj) {  
            if (typeof obj[key] === 'object'){   //判断是不是对象(是不是数组或对象)
                //constructor判断类型是数组还是对象
                o[key] = (obj[key].constructor===Array)?[]:{};
                deep(o[key], obj[key]);
            } else {
                o[key] = obj[key]
            }
        }
        return o;
    };
    var x = deep({},Animal);
    Animal.child.xxx = 'aaa';
    console.log(Animal);
    console.log(x);

END ，四种方法性能对比

var x = {};
for (var i = 0; i < 2000; i++) {
    x[i] = {};
    for (var j = 0; j < 1000; j++) {
        x[i][j] = Math.random();
    }
}
var start1 = Date.now();
var y0 = JSON.parse(JSON.stringify(x));
console.log('JSON.stringify', Date.now() - start1);

var start2 = Date.now();
var y = $.extend(true, {}, x);
console.log('extend', Date.now() - start2);

var start3 = Date.now();
var y1 = _.cloneDeep(x);
console.log('cloneDeep', Date.now() - start3);

var start4 = Date.now();
var y2 = deep({}, x);
console.log('封装方法', Date.now() - start4);

image.png
image.png
image.png

• 封装方法 > $.extend() > _.cloneDeep > JSON.parse(JSON.stringify(obj))

大家选择自己喜欢的方法即可

有不对的地方请大佬们多多指教，再会

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。