[分享]javascript 陣列以及物件的深拷貝（複製陣列或複製物件）的方法

tracy丶傑發表於2018-02-05
JavaScript陣列物件

前言

在js中，陣列和物件的複製如果使用=號來進行復制，那只是淺拷貝。如下：

let arr = [1,3,4,5]
let arr2 = arr
複製程式碼

如上，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 方法實現陣列的深拷貝

這個程式碼實現非常簡單。原理也比較好理解，他是將原陣列中抽離部分出來形成一個新陣列。我們只要設定為抽離全部，即可完成陣列的深拷貝。程式碼如下：

var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)
複製程式碼

concat 方法實現陣列的深拷貝

這個程式碼也非常簡單，原理更加粗暴。它是用於連線多個陣列組成一個新的陣列的方法。那麼，我們只要連線它自己，即可完成陣列的深拷貝。程式碼如下：

var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)
複製程式碼

ES6擴充套件運算子實現陣列的深拷貝

OK，以上之前講的方法全部過時了，用下面的方法實現陣列的深拷貝是最簡單的。

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
複製程式碼

物件的深拷貝

物件的深拷貝相比陣列也沒有困難許多，列舉兩個方法。

萬能的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))
複製程式碼

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

擴充套件運算子實現物件的深拷貝

var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)
複製程式碼

小結

陣列和物件的深拷貝是js中最常見的應用。理解各種方法是必須的。希望對大家有所幫助。

本文中並沒有對異常進行處理，主要在講原理。更多的陣列以及物件的操作方法，可以參考lodash的原始碼，檢視它的原始碼可以讓你的js基礎變得非常牢固。我也在學習中。

使用es6提供的擴充套件運算子的方法實現深拷貝，簡單，高效。並且，物件的深拷貝不會像使用 JSON 方法深拷貝一樣，丟失函式等資訊，只能用來深拷貝 JSON 資料格式的物件。推薦大家使用。

補充一個陣列去重的方法

function dedupe(array) {
  return [...new Set(array)]
}
var arr = [1,2,2,3,3,4,4,5,5]
console.log(dedupe(arr))
複製程式碼

相關文章