Javascript-深淺拷貝

layman 發(fā)布于2019-08-23 12:10 / 3582人閱讀

摘要：深淺拷貝簡介中對于和這兩個類型，把一個變量賦值給另一個變量淺拷貝只是對拷貝對象的引用，深拷貝是徹底拷貝，生成一個新的屬性相同的對象淺拷貝淺拷貝只是對拷貝對的引用，兩者相互影響淺拷貝的實現(xiàn)簡單賦值實現(xiàn)例子拷貝了，改變，也會改變，改變之后者還是

深淺拷貝簡介

javascript中對于Object和Array這兩個類型，把一個變量賦值給另一個變量；淺拷貝只是對拷貝對象的引用，深拷貝是徹底拷貝，生成一個新的屬性相同的對象

淺拷貝（shallow copy）

淺拷貝只是對拷貝對的引用，兩者相互影響

淺拷貝的實現(xiàn) 1.簡單賦值實現(xiàn)

例子：obj2拷貝了obj1，obj2改變，obj1也會改變，改變之后2者還是相同的

    var obj1 = {a: 1}
    var obj2 = obj1
    obj2.b = 2
    console.log(obj1) // {a: 1, b: 2}
    console.log(obj2) //{a: 1, b: 2}
    console.log(obj1 == obj2) // true

Object.assign()實現(xiàn)

例子：當(dāng)?shù)谝粋€傳參是你需要拷貝的對象（PS：Object.assign()也可以實現(xiàn)深拷貝）

    var obj1 = {a: 1}
    var obj2 = Object.assign(obj1)
    obj2.b = 2
    console.log(obj1) // {a: 1, b: 2}
    console.log(obj2) // {a: 1, b: 2}
    console.log(obj1 == obj2) // true

深拷貝（deep copy）

徹底拷貝，生成一個新的屬性相同的對象

深拷貝的實現(xiàn) Object.assign()實現(xiàn)

例子：拷貝對象不是第一個傳參

    var obj1 = {a: 1}
    var obj2 = Object.assign({}, obj1)
    obj2.b = 2
    console.log(obj1) // {a: 1}
    console.log(obj2) // {a: 1, b: 2}
    console.log(obj1 == obj2) // false

Array.slice()可以實現(xiàn)數(shù)組的深拷貝（數(shù)組中不能有Object和Array，Object和Array只是淺拷貝）

    var arr1 = [1, [2]]
    var arr2 = arr1.slice()
    arr2[1].push(3)
    arr2.push(4)
    console.log(arr1) // [1, [2, 3]]
    console.log(arr2) // [1, [2, 3], 4]
    console.log(arr1 == arr2) // false

JSON.stringify()和JSON.parse()實現(xiàn)

    var obj1 = {a: 1}
    var obj2 = JSON.parse(JSON.stringify(obj1))
    console.log(obj1 == obj2) // false
    obj2.b = 2
    console.log(obj1) // {a: 1}
    console.log(obj2) // {a: 1, b: 2}

遞歸實現(xiàn)

    var deepCopy = function(obj) {
        if (typeof obj !== "object") return;
        var newObj = obj instanceof Array ? [] : {};
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key];
            }
        }
        return newObj;
    }
    var obj1 = {a: 1}
    var obj2 = deepCopy(obj1)
    console.log(obj1 == obj2) // false
    obj2.b = 2
    console.log(obj1) // {a: 1}
    console.log(obj2) // {a: 1, b: 2}

Object.create()實現(xiàn)

    var deepCopy = function(obj) {
        if (typeof obj !== "object") return;
        var newObj = obj instanceof Array ? [] : {};
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = typeof obj[key] === "object" ? Object.create(obj[key]) : obj[key];
            }
        }
        return newObj;
    }
    var obj1 = {a: 1}
    var obj2 = deepCopy(obj1)
    console.log(obj1 == obj2) // false
    obj2.b = 2
    console.log(obj1) // {a: 1}
    console.log(obj2) // {a: 1, b: 2}

jQuery.extend()實現(xiàn)

    var obj1 = {a: 1}
    var obj2 = $.extend(true, {}, obj1)
    console.log(obj1 == obj2) // false
    obj2.b = 2
    console.log(obj1) // {a: 1}
    console.log(obj2) // {a: 1, b: 2}

jQuery.extend()源碼

    jQuery.extend = jQuery.fn.extend = function() {
        var src, copyIsArray, copy, name, options, clone,
            target = arguments[0] || {}, // 默認(rèn)取第一個參數(shù)賦值給target
            i = 1,
            length = arguments.length, // 獲取參數(shù)的個數(shù)
            deep = false; // 默認(rèn)淺拷貝

        // Handle a deep copy situation
        if ( typeof target === "boolean" ) { // 如果第一個參數(shù)類型為boolean，那么把該參數(shù)賦值給局部變量deep
            deep = target;  
            target = arguments[1] || {}; // 把第二個參數(shù)賦值給target
            // skip the boolean and the target
            i = 2;
        }

        // Handle case when target is a string or something (possible in deep copy)
        if ( typeof target !== "object" && !jQuery.isFunction(target) ) { // target不是object類型或者不是function，就賦值{}
            target = {};
        }

        // extend jQuery itself if only one argument is passed
        if ( length === i ) { // 如果只有一個參數(shù)，這時候i就是1，length也就是1，那么把target設(shè)置為調(diào)用者，也就是jQuery對象本身!同時把i遞減為0
            target = this; // this就是jQuery
            --i;
        }

        for ( ; i < length; i++ ) { // 循環(huán)參數(shù)
            // Only deal with non-null/undefined values
            if ( (options = arguments[ i ]) != null ) {
                // Extend the base object
                for ( name in options ) {
                    src = target[ name ]; 
                    copy = options[ name ];

                    // Prevent never-ending loop
                    if ( target === copy ) { // 防止無休止循環(huán)
                        continue;
                    }

                    // Recurse if we"re merging plain objects or arrays
                    // deep是否深拷貝，copy是參數(shù)屬性值
                    if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                        if ( copyIsArray ) { // 被拷貝的屬性值是數(shù)組
                            copyIsArray = false;
                            clone = src && jQuery.isArray(src) ? src : [];
                        } else { // 不是數(shù)組
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }

                        // Never move original objects, clone them
                        target[ name ] = jQuery.extend( deep, clone, copy );  // 遞歸~

                    // Don"t bring in undefined values
                    } else if ( copy !== undefined ) {  // 淺拷貝，且屬性值不為undefined
                        target[ name ] = copy;
                    }
                }
            }
        }

        // Return the modified object
        return target;
    };

更多方法...敬請期待