javascript 數組以及對象的深拷貝（復制數組或復制對象）的方法

引自：//blog.csdn.net/FungLeo/article/details/54931379

在js中，數組和對象的復制如果使用=號來進行復制，那只是淺拷貝。

下面是數組和對象的深拷貝

數組的深拷貝

1.for 循環實現數組的深拷貝

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

2.slice 方法實現數組的深拷貝

他是將原數組中抽離部分出來形成一個新數組

var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)

3.concat 方法實現數組的深拷貝

var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)

4.ES6擴展運算符實現數組的深拷貝

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)

對象的深拷貝

1.for循環

作者：六師兄Leon
鏈接：https://www.zhihu.com/question/23031215/answer/124017500
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

var china = {
          nation : '中國',
          birthplaces:['北京','上海','廣州'],
          skincolr :'yellow',
          friends:['sk','ls']
      }
      //深復制，要想達到深復制就需要用遞歸
      function deepCopy(o,c){
        var c = c || {}
        for(var i in o){
        if(typeof o[i] === 'object'){
                          //要考慮深復制問題了
                      if(o[i].constructor === Array){
                        //這是數組
                        c[i] =[]
                    }else{
                        //這是對象
                        c[i] = {}
                    }
                    deepCopy(o[i],c[i])
                    }else{
                         c[i] = o[i]
                    }
             }
             return c
      }
      var result = {name:'result'}
      result = deepCopy(china,result)
      console.dir(result)

2：通過JSON解析解決

var result = JSON.parse(JSON.stringify(test))

不過這有局限性：

• 無法復制函數
• 原型鏈沒了，對象就是object，所屬的類沒了

3.jquery

jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );

 

作者：知乎用戶
鏈接：https://www.zhihu.com/question/23031215/answer/31950463
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

jQuery.extend = jQuery.fn.extend = function() {
    var src, copyIsArray, copy, name, options, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;

        // skip the boolean and the target
        target = arguments[ i ] || {};
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( i === length ) {
        target = this;
        i--;
    }

    for ( ; i < length; i++ ) {
        // 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 ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        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 ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};