先來普及一下深拷貝和淺拷貝的區別
淺拷貝:就是簡單的複製,用等號便可完成jquery
let a = {a: 1} let b = a
這就完成了一個淺拷貝
可是當修改對象b的時候,咱們發現對象a的值也被改變了es6
b.a = 10 console.log(a.a) => 10
這是由於淺拷貝只複製了指向對象的指針,新舊對象共用同一塊內存,修改某一個對象的同時也會把另外一個都一併修改了npm
深拷貝:跟淺拷貝最簡單明瞭的區別就是修改拷貝的對象,不會改變源對象
利用Object.assign能夠對只有一層的對象實現深拷貝,以下:函數
let a = {a: 1,b: 2,c: 3} let b = Object.assign({}, a) b.b = 100 console.log(a.b) => 2
能夠看出來這樣是徹底能夠作到對只有一層的對象實現深拷貝的
可是若是對象裏面的元素仍是對象的話就沒做用了測試
let a = {a: 1,b: 2,c: 3, d: {a: 1}} let b = Object.assign({}, a) b.d.a = 100 console.log(a.d.a) => 100
對於這種比較複雜的對象,咱們就能夠利用遞歸的方式實現真正的對象深拷貝了ui
function deepClone (sourceObj, targetObj) { let cloneObj = targetObj || {} if(!sourceObj || typeof sourceObj !== "object" || sourceObj.length === undefined){ return sourceObj } if(sourceObj instanceof Array){ cloneObj = sourceObj.concat() } else { for(let i in sourceObj){ if (typeof sourceObj[i] === 'object') { cloneObj[i] = deepClone(sourceObj[i], {}) } else { cloneObj[i] = sourceObj[i] } } } return cloneObj }
簡單的幾行代碼就能夠輕鬆實現對象的深拷貝es5
簡單的測試代碼,以下: let sourceObj = { a: 1, b: { a: 1 }, c: { a: 1, b: { a: 1 } }, d: function() { console.log('hello world') }, e: [1, 2, 3] } let targetObj = deepClone(sourceObj, {}) targetObj.c.b.a = 9 console.log(sourceObj) => { a: 1, b: { a: 1 }, c: { a: 1, b: { a: 1 } }, d: [Function: d], e: [ 1, 2, 3 ] } console.log(targetObj) => { a: 1, b: { a: 1 }, c: { a: 1, b: { a: 9 } }, d: [Function: d], e: [ 1, 2, 3 ] }
另外介紹兩個用來作深拷貝的庫指針
**jquery** 使用方法: let targetObj = $.extent(true,{},sourceObj) **lodash函數庫** 使用方法: npm install lodash **es5寫法** let lodash = require('lodash') **es6寫法** import lodash from 'lodash' let targetOj = lodash.cloneDeep(sourceObj)
各位看官以爲有什麼地方不對的請多多指教。code