深淺拷貝數組

3019/03/05

深拷貝，簡單的使用即是用 被封裝好的，能夠直接用於深拷貝的方法有：

... 擴展運算符
JSON.parse(JSON.stringify(source)) 
複製代碼

可是用js代碼去實現呢？

首先就是會想到遍歷，去遍歷數組，或者是對象。

想到遍歷就會想到for 循環。

for ... of 或者 for ... in 均可以實現，區別是 for ... of 能夠由 break, throw 或return終止

首先使用 for of

const deepClone = obj => {
        const newObj = (Array.isArray(obj) ? [] : {}) // 判斷是否是數組
        for (const [k,v] of Object.entries(obj)) { // 將數組或者對象變爲具備鍵值對的數組
            //newObj[k] = v // 淺拷貝 將對象屬性裏面的值賦值給新對象
            newObj[K] = (typeof v === 'object') ? deepClone(v) : v  //深拷貝 （若是對象/數組裏面的值仍是對象，則遞歸，再進行克隆）
        }
        return newObj
    }
    
    // 數組
    let arr = [1,2,3]
    
    //test1
    let arr2 = deepClone(arr);
    console.log(arr2,arr) // [1,2,3] [1,2,3]
    
    //test2
    let arr3 = deepClone(arr);
    arr3[1] = 10;
    console.log(arr3,arr) // [1,2,3] [1,2,3]
    
    //對象
    let people = {
        name: {
            firstName: 'wang',
            lastName: 'huihui'
        }
    }
    let someone = deepClone(people)
    someone.name.lastName = 'test'
    console.log(ArrObject2, ArrayOnject) // {name: {firstName: 'wang', lastName: 'huihui'} }   {name: {firstName: 'wang', lastName: 'test'} } 
複製代碼

使用 for in (Object.prototype.hasOwnProperty.call() 方法)

const deepClone = obj => {
        const newObj = (Array.isArray(obj) ? [] : {})
        for (var key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key)) { // 判斷obj對象得原型鏈裏面是否有key屬性
                   newObj[key]  = (typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key]  /// 若是對象裏面的屬性仍是一個對象，則遞歸繼續拷貝，將對象裏面屬性的值賦值給新的屬性
            }
        }
        return newObj
    }
    
      // 數組
    let arr = [1,2,3]
    
    //test1
    let arr2 = deepClone(arr);
    console.log(arr2,arr) // [1,2,3] [1,2,3]
    
    //test2
    let arr3 = deepClone(arr);
    arr3[1] = 10;
    console.log(arr3,arr) // [1,2,3] [1,2,3]
    
    //對象
    let people = {
        name: {
            firstName: 'wang',
            lastName: 'huihui'
        }
    }
    let someone = deepClone(people)
    someone.name.lastName = 'test'
    someone.name[lastName] = 'test' // 兩個式子是同樣的
    console.log(ArrObject2, ArrayOnject) // {name: {firstName: 'wang', lastName: 'huihui'} }   {name: {firstName: 'wang', lastName: 'test'} } 
複製代碼

方法介紹：

Object.prototype.hasOwnProperty.call（） 會返回一個==布爾值==去判斷對象自身屬性中是否具備指定的屬性 （重點查看 MDN）

Object.entries（）返回一個給定對象自身可枚舉屬性的==鍵值對數組==，其排列順序是於for..in 循環遍歷改對象返回的順序是一致的（for in 也枚舉原型鏈中的屬性）

爲了簡便，最好能使用三元運算符去節省必定的代碼！！！！！

則簡單的淺拷貝：

///淺拷貝一個對象，或者數組
      copyObject = (oldObj) => {
        const newObj = {} // []
        for (let k in oldObj) {
            newObj[k] = oldObj[k]
        }
    }
    
    或者使用 OBject.assign()
複製代碼