javascript 數組以及對象的深拷貝（複製數組或複製對象）的方法

標籤：對象   技術   oda   post   數組   基本功   操作   obj   content   

javascript 數組以及對象的深拷貝（複製數組或複製對象）的方法前言

在js中，數組和對象的複製假設使用=號來進行複製。那僅僅是淺拷貝。

例如以示範：

如上。arr的改動，會影響arr2的值，這顯然在絕大多數情況下，並非我們所須要的結果。
因此，數組以及對象的深拷貝就是javascript的一個基本功了。

數組的深拷貝

條條大道通羅馬，實現數組的深拷貝。是有好幾種方法的。舉比例如以下：

for 迴圈實現數組的深拷貝

for迴圈是很好用的。假設不知道進階方法。通過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}

如上，通過對數組的for迴圈，就可以實現對數組的深拷貝了。

slice 方法實現數組的深拷貝

這個代碼實現很easy。原理也比較好理解，他是將原數組中抽離部分出來形成一個新數組。我們僅僅要設定為抽離所有，就可以完畢數組的深拷貝。

代碼例如以下：

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

執行結果例如以下：

很多其它 slice 內容請訪問 w3school JavaScript slice 方法

concat 方法實現數組的深拷貝

這個代碼也很easy。原理更加粗暴。

它是用於串連多個數組組成一個新的數組的方法。那麼。我們僅僅要串連它自己，就可以完畢數組的深拷貝。代碼例如以下：

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

執行結果例如以下：

很多其它 concat 內容請訪問 w3school JavaScript concat 方法

對象的深拷貝

對象的深拷貝相比數組也沒有困難很多，列舉兩個方法。

萬能的for迴圈實現對象的深拷貝

在很多時候，for迴圈可以解決大問題。

var obj = {  name: ‘FungLeo‘,  sex: ‘man‘,  old: ‘18‘}var obj2 = copyObj(obj)function copyObj(obj) {  let res = {}  for (var key in obj) {    res[key] = obj[key]  }  return res}

轉換成json再轉換成對象實現對象的深拷貝

上面的代碼實在是比較長，所以，用一個更暴力的方法吧。代碼例如以下：

var obj = {  name: ‘FungLeo‘,  sex: ‘man‘,  old: ‘18‘}var obj2 = JSON.parse(JSON.stringify(obj))

這個原理沒什麼好解釋的，實在是夠簡單粗暴的啦。

小結

數組和對象的深拷貝是js中最常見的應用。理解各種方法是必須的。希望對大家有所協助。
本文中並沒有對異常進行處理，主要在講原理。很多其它的數組以及對象的操作方法，可以參考lodash的原始碼，查看它的原始碼可以讓你的js基礎變得很堅固。我也在學習中。

著作權申明：本文由FungLeo原創。同意轉載，但轉載必須附註首發連結。

謝謝。

javascript 數組以及對象的深拷貝（複製數組或複製對象）的方法