常用的淺拷貝實現方法

深淺拷貝的區分

淺拷貝：拷貝的是引用，當引用的值改變時，另外一個也會跟着改變;

淺拷貝新舊對象還是共享同一塊內存，改變其中一個，另一個也會受影響，這樣修改，會失去原始數據。

 

深拷貝：復制出一個全新的對象實例，新對象跟原對象不共享內存，兩者操作互不影響

 

深拷貝和淺拷貝的使用場景是在復雜對象里，復雜數據類型里：object,array,funtion

 

常用的淺拷貝實現方法

1，Object.assign

ES6中拷貝對象的方法，接受的第一個參數是拷貝的目標target，剩下的參數是拷貝的源對象sources（可以是多個）

let target = {};
let source = {
    a: '123',
    b: {name: 'javascript'}
}
Object.assign(target,source);
console.log(target); // {a:'123',b:{name:'javascript'}}

Object.assign使用注意事項：

• 只拷貝源對象的自身屬性（不拷貝繼承屬性）
• 不會拷貝對象不可枚舉的屬性
• undefined和null無法轉成對象，他們不能作為Object.assign參數，但是可以作為源對象
• 屬性名為Symbol 值的屬性，可以被Object.assign拷貝

let copy2 = Object.assign({}, {x:1})

 

2，Array.prototype.slice

let array = [{a:1},{b:2}]
let array1 = array.slice(0);
console.log(array1)

slice:從已有的數組中返回選定的元素

3，擴展運算符

let obj = {a:1,b:{c:1}}
let obj2 = {...obj}
console.log(obj2)

 參考：https://www.cnblogs.com/justyouadmin/p/13413990.html

 

二，實現深拷貝

// 1. JOSN.stringify()/JSON.parse()
let obj = {a: 1, b: {x: 3}}
JSON.parse(JSON.stringify(obj))
 
// 2. 遞歸拷貝
function deepClone(obj) {
  let copy = obj instanceof Array ? [] : {}
  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
    }
  }
  return copy
}

 

三，實現深淺拷貝

    // 淺拷貝實現
    function shallowCopy(obj) {
        var dst = {}
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                dst[prop] = obj[prop]
            }
        }
        return dst
    }

    var obj = { a: 1, arr: [2, 3] }
    var shallowObj = shallowCopy(obj)
    console.log(shallowObj.arr[1])

    shallowObj.arr[1] = 5;
    console.log(obj.arr[1])

    // 賦值
    let a = { 'name': '1111', 'age': 'dddd'}
    let b = a;
    b.name = 22;
    console.log(a)
    // 淺拷貝{name: 22, age: "dddd"}


    // 深拷貝：拷貝實例
    
    function deepCopy(obj) {
        if (obj instanceof Array) {
            let n = [];
            for (let i = 0; i < obj.length; i++) {
                n[i] = deepCopy(obj[i])
            }
            return n;
        } else if (obj instanceof Object) {
            let n = {};
            for (let i in obj) {
                n[i] = deepCopy(obj[i])
            }
            return n;
        } else {
            return obj
        }
    }
    var obj2 = { a: 1, arr: [2, 3] }
    var deepObj = deepCopy(obj2)
    console.log('深拷貝', deepObj.arr[0])
    deepObj.arr[1] = 6;
    console.log('深拷貝' + obj2.arr[0])

    // 深拷貝：通過JSON解析實現
    // 把一個對象轉成json字符串在轉成json對象
    let obj3 = { 'a': 1, 'b': 2 }
    JSON.parse(JSON.stringify(obj3))

    // 參考：https://www.imooc.com/article/68975