JavaScript中的深拷貝和淺拷貝!
阿新 • • 發佈:2020-12-15
JavaScript中的深拷貝和淺拷貝!
淺拷貝
1.淺拷貝只是拷貝一層,更深層次物件級別的只拷貝引用.{也就是拷貝的是地址!簡而言之就是在新的物件中修改深層次的值也會影響原來的物件!}
// 2.深拷貝拷貝多層,每一-級別的資料都會拷貝. var obj = { id: 1, name: 'andy', msg: { age: 23 } }; var o = {}; // 淺拷貝! // for (var k in obj) { // o[k] = obj[k]; // } // 也是淺拷貝! // Object.assign( target, ... sources) es6新增方法可以淺拷貝 Object.assign(o, obj); console.log(o) console.log(obj)
深拷貝
// 2.深拷貝拷貝多層,每一-級別的資料都會拷貝. var obj = { id: 1, name: 'andy', msg: { age: 23 }, singer: ['小時姑娘', '東京塔子', '葉裡'] }; var o = {}; // 用遞迴的方法實現物件的深拷貝! // 封裝函式 function deepCopy(newObj, oldObj) { for (var k in oldObj) { // 判斷我們的屬性值屬於 哪種資料型別! // 1 獲取屬性值 oldObj[k] var item = oldObj[k]; // 2 判斷這個值是否是陣列! if (item instanceof Array) { newObj[k] = []; deepCopy(newObj[k], item) } else if (item instanceof Object) { // 3 判斷這個值是否是物件! newObj[k] = {}; deepCopy(newObj[k], item) } else { // 4 於屬簡單資料型別! newObj[k] = item; } } } deepCopy(o, obj); console.log(o) o.msg.age = 8734823; console.log(obj)