js數組對象拷貝

數組拷貝

var arr = [{old: 'old'}, ['old']];
var new_arr = arr.concat();
arr[0].old = 'new';
new_arr[1][0] = 'new';
console.log(arr); // [{old: 'new'}, ['new']]
console.log(new_arr); // [{old: 'new'}, ['new']]
// 如果數組元素是基本類型，就會拷貝一份，互不影響，而如果是對象或者數組，就會只拷貝對象和數組的引用，這樣我們無論在新舊數組進行了修改，兩者都會發生變化。這種叫淺拷貝 
// 深拷貝就是指完全的拷貝一個對象，即使嵌套了對象，兩者也相互分離，修改一個對象的屬性，也不會影響另一個。

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
}

 

 

slice 方法實現數組的淺拷貝

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

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

concat 方法實現數組的淺拷貝

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

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

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5

淺拷貝和深拷貝都是對於JS中的引用類型而言的，淺拷貝就只是複製對象的引用（堆和棧的關係，簡單類型Undefined，Null，Boolean，Number和String是存入堆，直接引用，object array 則是存入桟中，只用一個指針來引用值），如果拷貝後的對象發生變化，原對象也會發生變化。只有深拷貝纔是真正地對對象的拷貝。

對象淺拷貝

var object1 = {

               a: 1,

               obj: {

                    b: 'string'

                    }

                       };

                 // 淺拷貝

                var copy = Object.assign({}, object1);

               // 改變原對象屬性

               object1.a = 2;

               object1.obj.b = 'newString';

                console.log(copy.a); // 1

對象深拷貝

var obj = { a: 1, b: { c: 2 }};

// 深拷貝

var newObj = JSON.parse(JSON.stringify(obj));

// 改變原對象的屬性

obj.b.c = 20;

console.log(obj); // { a: 1, b: { c: 20 } }

console.log(newObj); // { a: 1, b: { c: 2 } }

對象必須遵從JSON的格式

 

 擴展運算符實現對象的深拷貝
var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)
 

數組對象深拷貝

let arr = [1, {a: 2}];

function deepCopy(arr) {
    let copyArr = (arr.constructor === Array) ? [] : {}; // 判斷是數組還是對象
    for(let i in arr) {
        if(typeof arr[i] === 'object') {   // 判斷是值類型還是引用類型
            copyArr[i] = deepCopy(arr[i]);  // 引用類型的話進行遞歸操作
        } else {
            copyArr[i] = arr[i];  // 值類型直接賦值
        }
    }
    return copyArr;
}

let copyArr = deepCopy(arr);
console.log(copyArr )  // [1, {a: 2}]
arr[1].a = 3;
console.log(copyArr )  // [1, {a: 2}]
copyArr[1].a = 5;
console.log(arr)       // [1, {a: 2}]