js淺拷貝及深拷貝的幾種方法

一、淺拷貝

(1) Object.assign()

Object.assign我們經常會用到合並對象，當然利用Object.assign性質我們也可以實現對象的拷貝。

var obj1 = {a: 1, b: 2} var obj2 = Object.assign({}, obj1) obj2.a = 4 console.log(obj1, obj2)

結果如圖：

這里要注意的是Object.assign第一個參數必須是個空對象

(2) 解構賦值

var obj1 = {a: 1, b: 2} var obj2 = {...obj1} obj2.a = 4 console.log(obj1, obj2)

結果如圖：

這里一樣可以實現之前上面的結果。

但這兩種拷貝有一個問題就是只能賦值一層，假設我們有如下數據結構

var obj1 = [{ name: '臧三', childs: ['小明', '小芳'] }] var obj2 = [...obj1] obj2[0].childs = [] console.log(obj1, obj2)

我們會發現打印出的結果如下：

上圖可看出obj1,obj2 的結果均變了，這並不是我們想要的結果，所以我們要用到深拷貝。

二、深拷貝

(1) 利用json.stringify

var obj1 = [{ name: '臧三', childs: ['小明', '小芳'] }] var obj2 = JSON.parse(JSON.stringify(obj1)) obj2[0].childs = [] console.log(obj1, obj2)

結果如下:

這樣的話就能達到我們想要的結果。

這種方法簡單，但也有弊端，看看下面的數據結構：

var obj1 = [{ name: '臧三', childs: ['小明', '小芳'], fn: function() {}, age: undefined }] var obj2 = JSON.parse(JSON.stringify(obj1)) obj2[0].childs = [] console.log(obj1, obj2)

結果：

我們從結果中發現，值為undefined,或者function的時候並不會拷貝過來。

(2) 利用遞歸來實現一個方法進行拷貝

var obj1 = [{ name: '臧三', childs: ['小明', '小芳'], fn: function() {}, age: undefined }] var obj2 = extend(obj1) obj2[0].childs = [] console.log(obj1, obj2) function extend(data) { if (typeof data === 'object' && data) { let val = typeof data.length === 'number' ? [] : {} for(let i in data) { val[i] = extend(data[i]) } return val } else { return data } }

結果：