JavaScript對象復制理解

fjcgreat 發布于2019-08-23 14:54 / 1351人閱讀

摘要：最近在研究對象的深拷貝，下面是我試驗的兩種方法，一種是通過和的方法實現的深拷貝，一種是通過遞歸函數實現的深拷貝。

最近在研究js對象的深拷貝，下面是我試驗的兩種方法，一種是通過JSON.stringify和JSON.parse的方法實現的深拷貝，一種是通過遞歸函數實現的深拷貝。

此處有個問題，第二種方法實現了對象方法的拷貝，但是不是深拷貝，網上找了很久都沒有找到實現對象的方法深拷貝的方法，希望有大神能給點建議。

let obj = {
  a: 1,
  b: "2",
  c: {
    c1: 1
  },
  d: function () {
    console.log("d");
  },
  e: [1, 2, 3]
};
//使用JSON.parse和JSON.stringify的方法是深拷貝，除了function，其他的都能拷貝
let obj_copy1 = JSON.parse(JSON.stringify(obj));
console.log(obj_copy1);
console.log(obj.c === obj_copy1.c); //結果是false，對象是深拷貝

// 使用遞歸的方法復制，function可以復制，除了function是淺拷貝，其他的都是深拷貝
function clone(obj) {
  let new_obj = {};
  for(let key in obj) {
    let t = ( typeof obj[key] ).toLowerCase();
    if (t === "object") {
      if(obj[key] instanceof Array) {
        var new_arr = [];
        for(let item of obj[key]) {
          new_arr.push(item);
        }
        new_obj[key] = new_arr;
      } else {
        new_obj[key] = clone(obj[key]);
      }
    } else {
      new_obj[key] = obj[key];
    }
  }
  return new_obj;
}

let obj_copy2 = clone(obj);
console.log(obj_copy2);
console.log(obj.c === obj_copy2.c); //結果是false，對象是深拷貝
console.log(obj.d === obj_copy2.d); //結果是true，function不是深拷貝

云服務器 GPU云服務器理解對象 javascript理解如何理解javascript 深入理解javascript

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

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

談談javascript語法里一些難點問題（一）

摘要：引子前不久我建立的技術群里一位問了一個這樣的問題，她貼出的代碼如下所示執行結果如下所示第一個第二個這是一個令人詫異的結果，為什么第一個彈出框顯示的是，而不是呢這種疑惑的原理我描述如下一個頁面里直接定義在標簽下的變量是全局變量即屬于對象的變量 1) 引子前不久我建立的技術群里一位MM問了一個這樣的問題，她貼出的代碼如下所示： var a = 1; function hehe...

huaixiaoz 2019-08-21 10:27 評論0 收藏0
體驗javascript之美-第五課匿名函數自執行和閉包是一回事兒嗎？

摘要：大家想想怎么做什么是匿名函數自執行并如何在實際庫中應用匿名函數自執行，注意，注意，只有這個名字和沒有其它名字，比如封閉空間，這個是為了讓大家好理解自己造的詞語。通過本節課你將學到： 1.什么是函數表達式和函數聲明 2.first-class function 3.引用和復制的區別 4.函數傳參是怎么回事兒 5.關于函數的this和arguments 6.什么是匿名函數自執行并如何在...

_Suqin 2019-08-20 15:56 評論0 收藏0
前端基礎進階（一）：內存空間詳細圖解

摘要：一棧數據結構與不同，中并沒有嚴格意義上區分棧內存與堆內存。引用數據類型的值是保存在堆內存中的對象。不允許直接訪問堆內存中的位置，因此我們不能直接操作對象的堆內存空間。為了更好的搞懂變量對象與堆內存，我們可以結合以下例子與圖解進行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 評論0 收藏0
JavaScript參數按值傳遞的理解

摘要：棧內存與堆內存簡單類型的值，它們的值直接存儲在變量訪問的位置，這是因為這些簡單類型占據的空間是固定的，所以可將他們存儲在較小的內存區域棧中。看到一個這樣的問題 function setName(obj) { obj.name = Tom; obj = new Object(); obj.name = Greg ; } var person = new Object();...

galois 2019-08-20 19:06 評論0 收藏0
JavaScript參數按值傳遞的理解

摘要：棧內存與堆內存簡單類型的值，它們的值直接存儲在變量訪問的位置，這是因為這些簡單類型占據的空間是固定的，所以可將他們存儲在較小的內存區域棧中。看到一個這樣的問題 function setName(obj) { obj.name = Tom; obj = new Object(); obj.name = Greg ; } var person = new Object();...

NeverSayNever 2019-08-20 19:05 評論0 收藏0