實現JS中的淺拷貝和深拷貝

huangjinnan 發布于2019-08-26 13:38 / 1970人閱讀

摘要：淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的?；緮祿愋鸵脭祿愋偷鹊然緮祿愋褪前粗翟L問的，對其的拷貝會直接復制其值保存在新變量中。方法手工遍歷法方法方法方法方法

淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于“文體兩開花”的points。

什么是深拷貝和淺拷貝呢？

名稱	定義
淺拷貝	對基本數據類型進行值傳遞，對引用數據類型進行引用傳遞形式的拷貝
深拷貝	對基本數據類型進行值傳遞，對引用數據類型，創建一個新的對象，并復制其內容

也就是說，對于a，讓b對a進行拷貝，之后當a發生變化，若b也跟著發生變化，就是淺拷貝；若a發生變化，b不變化，那就是深拷貝。

基本數據類型	引用數據類型
Number、String、Boolean、Null、Undefined等	Object、Array、Function等

基本數據類型是按值訪問的，對其的拷貝會直接復制其值保存在新變量中。例如Number類型：

var a = 1;
b = a;
console.log(b); // 1
a = 2;
console.log(b);  //1 （a的變化不會影響b的值）

而“引用數據類型”是按引用訪問的，對其直接進行拷貝只會操作引用地址，而不是值本身。例如Array類型：

var a = [1, 2, 3];
b = a;
console.log(a);  // [1, 2, 3]
console.log(b);  // [1, 2, 3]
a[0] = 2;
console.log(a);  // [2, 2, 3]
console.log(b);  // [2, 2, 3]  （對數組a的改動也影響了數組b）

其原理如下圖所示：

那么，如何對引用數據類型實現深拷貝呢？

顯而易見的思路是：既然是因為引用地址造成了無法深拷貝，那就拋開引用地址，直接對值進行遍歷，將其拷貝給新的變量。

方法1: 手工遍歷法

let a = [1, [2, 3], 4];
const copy = (obj) => {
  let newObj = obj.constructor === Array ? [] : {}
  if(typeof obj !== "object") {
    return;
  }
  for(let i in obj) {
    newObj[i] = typeof obj[i] === "object" ? copy(obj[i]) : obj[i]
  }
  return newObj
}

let b = copy(a);  
a[1][0] = 3;
console.log(a);  // [1, [3, 3], 4]
console.log(b);  // [1, [2, 3], 4]

方法2: JSON方法

let a = [1, [2, 3], 4];

const copy = (obj) => {
  let _obj = JSON.stringify(obj)
  let newObj = JSON.parse(_obj)
  return newObj
}

let b = copy(a);  
a[1][0] = 3;
console.log(a);  // [1, [3, 3], 4]
console.log(b);  // [1, [2, 3], 4]

方法3: JQuery-extend方法

let a = [1, [2, 3], 4];

b = $.extend(true,[],a);

a[1][0] = 3;
console.log(a);  // [1, [3, 3], 4]
console.log(b);  // [1, [2, 3], 4]

GPU云服務器云服務器 java實現文件拷貝 js拷貝內存數據庫后拷貝預拷貝深拷貝和淺拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109212.html

JavaScript中的淺拷貝和深拷貝

摘要：在中可以通過添加一個參數來實現遞歸，調用就可以實現一個深拷貝。利用序列化實現一個深拷貝在JavaScript中，對于Object和Array這類引用類型值，當從一個變量向另一個變量復制引用類型值時，這個值的副本其實是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。這種拷貝分為兩種情況：拷貝引用和拷貝實例，也就是我們說的淺拷貝和深拷貝淺拷貝（shallow...

ernest.wang 2019-08-21 11:34 評論0 收藏0
JS中的淺拷貝和深拷貝

摘要：說明外層數組拷貝的是實例說明元素拷貝是引用深拷貝在堆中重新分配內存，并且把源對象所有屬性都進行新建拷貝，拷貝后的對象與原來的對象完全隔離，互不影響。中的方法可以實現深拷貝，源碼原理也是遞歸使用淺拷貝。 1.淺拷貝當把數組或對象簡單賦值給其他變量的時候，實際上進行的是淺拷貝，淺拷貝是拷貝引用，只是將拷貝后的引用指向同一個對象實例，彼此間的操作還會互相影響。分為兩種情況：直接拷貝源對象...

xeblog 2019-08-21 16:02 評論0 收藏0
js的淺拷貝和深拷貝和應用場景

摘要：而大多數實際項目中，我們想要的結果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區別淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。為什么會用到淺拷貝和深拷貝首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

MartinDai 2019-08-30 14:08 評論0 收藏0
js的淺拷貝和深拷貝和應用場景

摘要：而大多數實際項目中，我們想要的結果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區別淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。為什么會用到淺拷貝和深拷貝首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

nemo 2019-08-22 15:17 評論0 收藏0
js的淺拷貝和深拷貝和應用場景

摘要：而大多數實際項目中，我們想要的結果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區別淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。為什么會用到淺拷貝和深拷貝首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

lavor 2019-08-01 18:40 評論0 收藏0