JavaScript中淺拷貝和深拷貝的區別和實現

wenshi11019 發布于2019-08-23 12:10 / 3436人閱讀

摘要：要理解中淺拷貝和深拷貝的區別，首先要明白的數據類型有兩種數據類型，基礎數據類型和引用數據類型基礎數據類型保存在棧內存中的簡單數據段，有，，，，引用數據類型，對象，保存在堆內存空間中存放在棧內存中與變量名與內存地址存儲在棧內存中，與作為對象存

要理解 JavaScript中淺拷貝和深拷貝的區別，首先要明白JavaScript的數據類型

JavaScript有兩種數據類型，基礎數據類型和引用數據類型

基礎數據類型：保存在棧內存中的簡單數據段 ，有undefined，boolean，number，string，null
引用數據類型：Array，對象，Function  保存在堆內存空間中

var a1 = 0; var a2 = "this is str"; var a3 = null 存放在棧內存中
var c =[1,2,3] 與 var d = {m:20} 變量名與內存地址存儲在棧內存中，[1,2,3]與{m:20} 作為對象存儲在堆內存中

基礎數據類型的復制（如var a = 20 var b = a）

引用數據類型的復制 ( var m ={a:10, b:20} var n = m)

解釋：
m與n指向同一個內存空間，當m或者n改變時，另一個也跟著改變
如m.a = 80 ; console.log(n.a) // 80

怎么樣使引用數據類型有各自獨立的內存空間？

一、采用遞歸的方法復制拷貝對象

    function deepclone(obj) {
        let objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (key in obj) {
                //if (obj.hasOwnProperty(key)) {   //也可以不加
                    if (obj[key] && obj[key] === "object") {
                        objClone[key] = deepclone(obj[key])
                    } else {
                        objClone[key] = obj[key]
                    }
                //}
            }
        }
        return objClone
    }
    var a = [1, 2, 3, 4];
    var b = deepclone(a);
    a[0] = 8
    console.log(a, b);

   Array.isArray(obj)：ECMAScript 5.1 (ECMA-262)   考慮到的兼容性，可以用下面的方法實現較好的兼容
   if (!Array.isArray) {
      Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === "[object Array]";
     };
}

二、用JSON.stringify把對象轉成字符串，再用JSON.parse把字符串轉成新的對象。

   function deepclone(obj){
      var _obj = JSON.stringify(obj);
      var cloneObj = JSON.parse(_obj);
      return cloneObj
    }
    var a =[1,2,3,4];
    var b= deepclone(a);
    a[0]=8
    console.log(a,b);
    //可以用JSON.stringify與JSON.parse實現深拷貝的原因是JSON.stringify(obj)轉換成字符串，變成基本數據類型，基本類型拷貝是直接在棧內存新開空間，直接復制一份名-值，不影響之前的對象

總結：

淺拷貝（shallow copy）：只復制指向某個對象的指針，而不復制對象本身，新舊對象共享一塊內存； ??

深拷貝（deep copy）：復制并創建一個一摸一樣的對象，不共享內存，修改新對象，舊對象保持不變；實現深拷貝主要有2種方法

（1）遞歸

（2）JSON.stringify結合JSON.parse

微信公眾號：前端之攻略
發布前端與設計有關的內容，請掃描下面二維碼

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

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

關于JavaScript的淺拷貝和深拷貝

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

shenhualong 2019-08-26 12:23 評論0 收藏0
js中的淺拷貝深拷貝深入理解

摘要：舉個例子來說明一下什么是淺拷貝什么是深拷貝淺拷貝得出的結果可以看出是淺拷貝非對象的屬性值一個改變不影響另一個的值對象屬性是引用賦值所以一個改變會影響另一個的改變出現這種情況的本質是對象是按引用賦值的深拷貝指的是拷貝一個對象，改變一個值不影響舉個例子來說明一下什么是淺拷貝什么是深拷貝淺拷貝 var x = { a: 1, b: {f: { g: 1 ...

lastSeries 2019-08-21 16:43 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
JavaScript系列--淺析JavaScript解析賦值、淺拷貝和深拷貝的區別

摘要：它將返回目標對象。有些文章說是深拷貝，其實這是不正確的。深拷貝相比于淺拷貝速度較慢并且花銷較大?？截惽昂髢蓚€對象互不影響。使用深拷貝的場景完全改變變量之后對沒有任何影響，這就是深拷貝的魔力。一、賦值（Copy）賦值是將某一數值或對象賦給某個變量的過程，分為： 1、基本數據類型：賦值，賦值之后兩個變量互不影響 2、引用數據類型：賦址，兩個變量具有相同的引用，指向同一個對象，相互之間有...

laznrbfe 2019-08-26 13:48 評論0 收藏0
JavaScript之淺、深拷貝

摘要：前言里面淺拷貝和深拷貝是非常關鍵的知識點，今天就來通過本文清楚的了解深淺拷貝以及該如何實現這兩種拷貝方式。對象的拷貝又分為淺拷貝和深拷貝。印證了上述所說的對于所有的基本類型，簡單的賦值已經是實現了深拷貝。前言 JavaScript里面淺拷貝和深拷貝是非常關鍵的知識點，今天就來通過本文清楚的了解深淺拷貝以及該如何實現這兩種拷貝方式。深淺拷貝的區別拷貝：其實就是一個對象復制給另外...

leanxi 2019-08-26 10:37 評論0 收藏0