淺拷貝和深拷貝只針對于引用數(shù)據(jù)類型

淺拷貝是復制另一個對象的內存地址，被復制的對象或新對象修改屬性，另一個對象也會跟著變化。
深拷貝是開辟新的棧，新舊對象指針指向不同的內存地址（棧），其中一個對象屬性改變，不會相互影響。
簡單說淺拷貝只復制對象的第一層屬性，而深拷貝復制所有層的屬性

一.淺拷貝舉例

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實用工具庫，暫無發(fā)現(xiàn)弊端

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'){   //判斷是不是對象(是不是數(shù)組或對象)
                //constructor判斷類型是數(shù)組還是對象
                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))

大家選擇自己喜歡的方法即可

有不對的地方請大佬們多多指教，再會

原文作者：匆匆那年_海，博客主頁：http://m.itdecent.cn/u/910c0667c515
95后前端漢子，愛編程、優(yōu)秀、聰明、理性、沉穩(wěn)、智慧的程序猿一枚。