JavaScript中的淺拷貝和深拷貝

ernest.wang 發布于2019-08-21 11:34 / 1925人閱讀

摘要：在中可以通過添加一個參數來實現遞歸，調用就可以實現一個深拷貝。利用序列化實現一個深拷貝

在JavaScript中，對于Object和Array這類引用類型值，當從一個變量向另一個變量復制引用類型值時，這個值的副本其實是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。

這種拷貝分為兩種情況：拷貝引用和拷貝實例，也就是我們說的淺拷貝和深拷貝

淺拷貝（shallow copy）

拷貝原對象的引用，這是最簡單的淺拷貝。

// 對象
var o1 = {a: 1};
var o2 = o1;

console.log(o1 === o2);  // =>true
o2.a = 2; 
console.log(o1.a); // => 2

// 數組
var o1 = [1,2,3];
var o2 = o1;

console.log(o1 === o2); // => true
o2.push(4);
console.log(o1); // => [1,2,3,4]

拷貝原對象的實例，但是對其內部的引用類型值，拷貝的是其引用，常用的就是如jquey中的$.extend({}, obj); Array.prototype.slice()和Array.prototype.concat()都會返回一個數組或者對象的淺拷貝，舉個例子：

var o1 = ["darko", {age: 22}];
var o2 = o1.slice(); // 根據Array.prototype.slice()的特性，這里會返回一個o1的淺拷貝對象

console.log(o1 === o2); // => false，說明o2拷貝的是o1的一個實例

o2[0] = "lee";
console.log(o1[0]); // => "darko" o1和o2內部包含的基本類型值，復制的是其實例，不會相互影響

o2[1].age = 23;
console.log(o1[1].age); // =>23 o1和o2內部包含的引用類型值，復制的是其引用，會相互影響

可以通過Array.prototype.slice()或jQuery中的$.extend({}, obj)完成對一個數組或者對象的淺拷貝，我們也可以自己寫一個簡單淺拷貝函數來加深對淺拷貝的理解、

// 淺拷貝實現，僅供參考
function shallowClone(source) {
    if (!source || typeof source !== "object") {
        throw new Error("error arguments");
    }
    var targetObj = source.constructor === Array ? [] : {};
    for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
            targetObj[keys] = source[keys];
        }
    }
    return targetObj;
}

深拷貝（deep copy）

深拷貝也就是拷貝出一個新的實例，新的實例和之前的實例互不影響，深拷貝的實現有幾種方法，首先我們可以借助jQuery，lodash等第三方庫完成一個深拷貝實例。在jQuery中可以通過添加一個參數來實現遞歸extend，調用$.extend(true, {}, ...)就可以實現一個深拷貝。

我們也可以自己實現一個深拷貝的函數，通常有兩種方式，一種就是用遞歸的方式來做，還有一種是利用JSON.stringify和JSON.parse來做，這兩種方式各有優劣，先來看看遞歸的方法怎么做。

jQuery中的extend方法基本的就是按照這個思路實現的，但是沒有辦法處理源對象內部循環引用的問題，同時對Date，Funcion等類型值也沒有實現真正的深度復制，但是這些類型的值在重新定義的時候一般都是直接覆蓋，所以也不會對源對象產生影響，從一定程度上來說也算是實現了一個深拷貝。

// 遞歸實現一個深拷貝
function deepClone(source){
   if(!source || typeof source !== "object"){
     throw new Error("error arguments", "shallowClone");
   }
   var targetObj = source.constructor === Array ? [] : {};
   for(var keys in source){
      if(source.hasOwnProperty(keys)){
         if(source[keys] && typeof source[keys] === "object"){
           targetObj[keys] = source[keys].constructor === Array ? [] : {};
           targetObj[keys] = deepClone(source[keys]);
         }else{
           targetObj[keys] = source[keys];
         }
      } 
   }
   return targetObj;
}
// test example
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: "value"
  },
  func: function(){
    return 1;
  }
};
var o3 = deepClone(o1);
console.log(o3 === o1); // => false
console.log(o3.obj === o1.obj); // => false
console.log(o2.func === o1.func); // => true

還有一種實現深拷貝的方式是利用JSON對象中的parse和stringify，JOSN對象中的stringify可以把一個js對象序列化為一個JSON字符串，parse可以把JSON字符串反序列化為一個js對象，通過這兩個方法，也可以實現對象的深復制。

我們從下面的例子就可以看到，源對象的方法在拷貝的過程中丟失了，這是因為在序列化JavaScript對象時，所有函數和原型成員會被有意忽略，這個實現可以滿足一些比較簡單的情況，能夠處理JSON格式所能表示的所有數據類型，同時如果在對象中存在循環應用的情況也無法正確處理。

// 利用JSON序列化實現一個深拷貝
function deepClone(source){
  return JSON.parse(JSON.stringify(source));
}
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: "value"
  },
  func: function(){
    return 1;
  }
};
var o2 = deepClone(o1);
console.log(o2); // => {arr: [1,2,3], obj: {key: "value"}}

GPU云服務器云服務器 javascript淺拷貝 javascript深拷貝后拷貝預拷貝深拷貝和淺拷貝

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

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

關于JavaScript的淺拷貝和深拷貝

摘要：引用類型值引用類型值是保存在堆內存中的對象，變量保存的只是指向該內存的地址，在復制引用類型值的時候，其實只復制了指向該內存的地址。前言要理解 JavaScript中淺拷貝和深拷貝的區別，首先要明白JavaScript的數據類型。JavaScript有兩種數據類型，基礎數據類型和引用數據類型。js的基本類型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 評論0 收藏0
JS中的淺拷貝和深拷貝

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

xeblog 2019-08-21 16:02 評論0 收藏0
JavaScript的淺拷貝和深拷貝

摘要：但是進行的是淺拷貝，拷貝的是屬性值。對象展開符深拷貝的實現方式手動復制轉成再轉回來只有可以轉成格式的對象才可以這樣用，像沒辦法轉成沒被改到使用方法避免相互引用對象導致死循環，如的情況四參考關于的淺拷貝和深拷貝一、理解淺拷貝只復制指向某個對象的指針，而不復制對象本身，新舊對象還是共享同一塊內存。但深拷貝會另外創造一個一模一樣的對象，新對象跟原對象不共享內存，修改新對象不會改到原對象。...

GeekQiaQia 2019-08-23 14:09 評論0 收藏0
實現JS中的淺拷貝和深拷貝

摘要：淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的。基本數據類型引用數據類型等等基本數據類型是按值訪問的，對其的拷貝會直接復制其值保存在新變量中。方法手工遍歷法方法方法方法方法淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的points。什么是深拷貝和淺拷貝呢？名稱 ...

huangjinnan 2019-08-26 13:38 評論0 收藏0
js的淺拷貝和深拷貝

摘要：拷貝分為淺拷貝和深拷貝。淺拷貝是引用復制，深拷貝是完全單純拷貝數據的值。所以，這種方法只是簡單繞過第一層箱子的引用復制深拷貝目前比較好的方法就是大法，要么就是自己寫遞歸的深拷貝函數。附帶深拷貝的自定義函數源自大佬的經常遇到數組或對象等引用類型作為函數的參數的情況，但又不想修改原來的數據，這時候就需要拷貝（基本類型的變量不需要考慮）。拷貝分為淺拷貝和深拷貝。淺拷貝是引用復制，深拷貝是完...

jsliang 2019-08-23 10:26 評論0 收藏0