快捷導(dǎo)航

詳細分析JavaScript中的深淺拷貝

更新時間：2020年09月17日 10:50:41 作者：TanJia

這篇文章主要介紹了JavaScript中的深淺拷貝，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下

在說JS中深淺拷貝之前，我們需要對JS中的數(shù)據(jù)類型有所了解，分為基本數(shù)據(jù)類型與引用數(shù)據(jù)類型，對于基本數(shù)據(jù)類型并沒有深淺拷貝的說法，深淺拷貝主要針對引用數(shù)據(jù)類型。

一、淺拷貝

淺拷貝只復(fù)制了引用，并沒有復(fù)制值。在JS中最簡單的淺拷貝就是利用“=”賦值操作符來實現(xiàn)。

var obj1 = {
  a:1,
  b:[2,3,4],
  c:{name:'tanj'},
  fun:function(){
    console.log('fun')
  }
}
var obj2 = obj1
obj2.a = 666 /* 修改obj2的值，obj1的值也隨之改變 */
console.log(obj1) /* {a: 666, b: Array(3), c: {…}, fun: ƒ} */

上述代碼中，我們修改obj2的值，obj1的值也隨之發(fā)生了改變，使用”=“只實現(xiàn)了淺拷貝。

二、深拷貝

深拷貝是對目標的完全拷貝，進行深拷貝后的兩個值互不影響。

1. 利用JSON.stringify與JSON.parse方法

JSON.stringify將一個JavaScript值轉(zhuǎn)換為JSON字符串；

JSON.parse將一個JSON字符串轉(zhuǎn)換為JavaScript值。

var obj1 = {
  a:1,
  b:[2,3,4],
  c:{name:'tanj'},
}			
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2.a = 12
console.log(obj1) /* {a: 1, b: Array(3), c: {…}} */

修改obj2的值并沒有影響到obj1中的屬性值，顯然，我們利用JSON.parse與JSON.stringify實現(xiàn)了深拷貝。

但是，真的可以這么簡單的實現(xiàn)嗎？我們來看看下面的例子！

var obj1 = {
  a:1,
  b:[2,3,4],
  c:{name:'tanj'},
  fun:function(){
    console.log('fun')
  }
}			
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2.a = 12
console.log(obj1) /* {a: 1, b: Array(3), c: {…}, fun: ƒ} */
console.log(obj2) /* {a: 12, b: Array(3), c: {…}} */

轉(zhuǎn)換后的obj2中沒有了fun這個屬性，這是由于在利用JSON.stringify轉(zhuǎn)換過程中，忽略了undefined、function、symbol。顯然，當(dāng)我們的對象中出現(xiàn)這些類型的屬性時無法利用該方法實現(xiàn)深拷貝。

2. 遞歸

function deepClone(source){
  if(!isObject(source)) return source
  var newObj = source instanceof Array? []:{}
  for(let key in source){
	if(source.hasOwnProperty(key)){
	  newObj[key] = isObject(source[key])?deepClone(source[key]):source[key]
    }
  }
  return newObj
}
function isObject(x) {
  return typeof x === 'object' && x != null
}

測試一下上述方法：

var obj1 = {
  a:1,
  b:[2,3,4],
  c:{name:'tanj'},
  fun:function(){
	console.log('fun')
  }
}			
var obj2 = deepClone(obj1)
obj2.a = 12
console.log(obj1) /* {a: 1, b: Array(3), c: {…}, fun: ƒ} */

通過例子可以看到，我們修改了obj2中a屬性的值，但是并沒有影響到obj1中的a屬性值。通過遞歸我們可以實現(xiàn)深拷貝！

注意：上述方法未解決循環(huán)引用的問題。

var obj1 = {}
obj1.a = obj1
var obj2 = deepClone(obj1) /* 報錯，棧溢出 */
console.log(obj2)

關(guān)于如何解決循環(huán)引用問題以及實現(xiàn)Symbol類型拷貝，稍后完善。

三、其他拷貝方法

1. 數(shù)組中的concat()和slice()方法

我們知道數(shù)組中有兩個方法concat和slice可以完成復(fù)制數(shù)組，并且返回新數(shù)組。以concat為例。

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

改變arr2的值，并沒有影響到arr的值，這是實現(xiàn)了數(shù)組的深拷貝嗎，先不急于下結(jié)論，一起看看下面的例子再來分析：

var arr = [1,2,3,[4,5,6],{a:7}]
var arr2 = arr.concat()
arr2[3] = 444
arr2[4].a=8
console.log(arr) /* [1,2,3,[4,5,6],{a:8}] */
console.log(arr2) /* [1,2,3,444,{a:8}] */

我們直接修改arr2[3]，并沒有引起arr的改變，但是我們修改arr2[4].a時，arr中的相應(yīng)元素跟著一起發(fā)生了改變。其實，我們對arr2數(shù)組中的元素直接進行改變（比如：arr2[0]=***，arr2[1]=***，arr2[3]=***）時，不會影響到原數(shù)組arr，但是我們修改數(shù)組中的[3,4,5]或{a:7}時，會造成原數(shù)組arr的改變。

結(jié)論：concat()方法對數(shù)組第一層進行了深拷貝。

可以再試試數(shù)組的slice()方法，它也是只對數(shù)組第一層進行了深拷貝。

2. Object.assign()和...展開運算符

var obj1 = {
  a:1,
  b:[2,3,4],
  c:{name:'tanj'}
}
var obj2 = {...obj1}
obj2.a = 666
obj2.c.name = 'xinxin'
console.log(obj1) /* {a:1,b:[2,3,4],c:{name:'xinxin'}} */

可以看到利用...展開運算符實現(xiàn)的是對象第一層的深拷貝。后面的只是拷貝的引用值。

可以試試Object.assign()方法：

var obj1 = {
  a:1,
  b:[2,3,4],
  c:{name:'tanj'}
}
var obj2 = {}
Object.assign(obj2,obj1)
obj2.a = 666
obj2.b[0] = 0
console.log(obj1) /* {a:1,b:[0,3,4],c:{name:'tanj'} */

同樣，只對對象第一層進行了深拷貝，假如源對象的屬性值（例如obj1）是一個指向?qū)ο蟮囊?，obj2也只拷貝那個引用值。所以改變obj2中b所指向的那個數(shù)組時，obj1的值也會發(fā)生改變。

我們可以自己實現(xiàn)一個這樣的效果，只對第一層進行深拷貝：

function shallowClone(source) {
  const newObj = source.constructor === Array ? [] : {}
  for (let keys in source) {
    if (source.hasOwnProperty(keys)) {
	  newObj[keys] = source[keys]
	}
  }
  return newObj
}

以上就是分析JavaScript中的深淺拷貝的詳細內(nèi)容，更多關(guān)于JavaScript 深淺拷貝的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: