一種深拷貝的解決思路

Ocean 發布于2019-08-20 17:23 / 1406人閱讀

摘要：用來實現數組的拷貝，先試試傳入表示截取全部你家的我要修改成我的名字看到結果我又懵了，你這是幾個意思啊，我死了兩千多個腦細胞才想出來的思路，竟然還是會改變，查詢的資料顯示確實可以實現拷貝而不改變原數組的功能啊，難道看漏了。

背景

最近在做數據處理的過程中，遇到一個問題，如下：
后臺傳遞過來一組數據 Array，每個數組元素里面又包含了子對象，我要對這組數據進行處理，但是不想影響到原數組，同時原數組可能會要進行多個方向的數據格式化，為了渲染不同的界面。

原始數據

let data = [
    {
        id: 1,
        name: "luoxue",
        age: 25
    },
    {
        id: 2,
        name: "kk",
        age: 22
    },
    {
        id: 3,
        name: "qiuxia",
        age: 22
    }
];

處理方案

1、直接用 = 賦值

let myData = data; // 我要的數據
let yourData = data; // 你要的數據
myData[0].name = "luoxue-xu"; // 我要修改成我的名字
yourData[0].name = "kk-z"; // 你要修改成你的名字
console.log(data[0].name); // kk-z

不管是對 myData 還是對 yourData 操作，都改變了原來的 data，我心慌啊，原數據怎么能亂動呢，要是它主人追究怎么辦？我又弱又餓，跑不過也打不過，左思右想，有了第二種思路。

2、用 slice 來實現數組的拷貝，先試試

let myData = data.slice(0); // 傳入0 表示截取全部
let yourData = data.slice(0); // 你家的
myData[0].name = "luoxue-xu"; // 我要修改成我的名字
console.log(data[0].name); // luoxue-xu

看到結果我又懵了，你這是幾個意思啊，我死了兩千多個腦細胞才想出來的思路，竟然還是會改變，查詢的資料顯示 slice 確實可以實現拷貝而不改變原數組的功能啊，難道看漏了。
再認真看了遍資料，有點思緒，slice 雖然返回的是一個新數組，但是元素如果是對象，該引用的還是引用，原來如此。
slice 相當于數組的淺拷貝，如果數組中的元素是基本類型，那就可以通過它來實現拷貝。

江湖走馬，風也好，雨也罷 ------《道君》

3、用 JSON 轉，先轉字符串，再轉回對象

let myData = JSON.parse(JSON.stringify(data)); // 我家的
let yourData = JSON.parse(JSON.stringify(data)); // 你家的
yourData[0].name = "kk-z"; // 你名字帶走
console.log(data[0].name); // luoxue

咦，還有點靠譜的樣子，竟然可以，這么簡單，不會有什么坑吧，先用著試試，不過 jQuery.extend 也可以實現，難道它也是這樣做的，不太可能，再思考思考。

4、自己寫個深拷貝的函數 clone

const clone = (b) => {
  if(Array.isArray(b)) {
    // 數組拷貝
    let obj = [];
    for(let i = 0; i < b.length; i++) {
      obj[i] = clone(b[i]);
    }
    return obj;
  }else if(b instanceof Object) {
    // 對象拷貝
    let obj = {};
    for(let attr in b) {
      obj[attr] = clone(b[attr]);
    }
    return obj;
  }else {
    return b;
  }
}
let myData = clone(data); // 我家的
let yourData = clone(data); // 還是我家的
yourData[0].name = "luoxue-kk"; // 還是我家的
console.log(data[0].name); // 返回什么，不告訴你，雖然報錯了.

有空可以研究一下 Object.assign 的使用。

GPU云服務器云服務器一種新的圖像識別算法一種游戲的服務器給個明確的思路數據分析的思路

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

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

JavaScript對象深拷貝/淺拷貝遇到的坑和解決方法

摘要：在以上討論和研究結束后，同學向我推薦了一個庫，測試了一下該庫存在方法，實現深拷貝更為完整和精致，前文問題均沒有在該方法內被發現，在這里提一波。如果本文對您有任何幫助或者您有任何想要提出的意見或問題，請在本文下方回復，誠摯歡迎各位參與討論，望各位不吝指教。原載自己的小博客 JavaScript對象拷貝遇到的坑和解決方法 | 手柄君的小閣，所以無恥地算原創吧近期參與某集訓，Java...

atinosun 2019-08-26 11:44 評論0 收藏0
深拷貝的終極探索（99%的人都不知道）

摘要：劃重點，這是一道面試必考題，我靠這道題刷掉了多少面試者嘿嘿首先這是一道非常棒的面試題，可以考察面試者的很多方面，比如基本功，代碼能力，邏輯能力，而且進可攻，退可守，針對不同級別的人可以考察不同難度，比如漂亮妹子就出題，要是個帥哥那就得上了，劃重點，這是一道面試必考題，我靠這道題刷掉了多少面試者?(? ? ??)嘿嘿首先這是一道非常棒的面試題，可以考察面試者的很多方面，比如基本功，代...

qingshanli1988 2019-08-23 12:19 評論0 收藏0
好文 - 收藏集 - 掘金

摘要：好吧，本文的主題可能還深入剖析的深復制前端掘金一年前我曾寫過一篇中的一種深復制實現，當時寫這篇文章的時候還比較稚嫩，有很多地方沒有考慮仔細。翻譯 | 深入理解 CSS 時序函數 - 前端 - 掘金作者：Nicolas（滬江前端開發工程師）本文原創，轉載請注明作者及出處。各位，趕緊綁住自己并緊緊抓牢了，因為當你掌握了特別有趣但又復雜的CSS時序函數之后，你將會真正體驗到豎起頭發般的...

fobnn 2019-08-29 12:59 評論0 收藏0
案例 - 收藏集 - 掘金

摘要：同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候，遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

張金寶 2019-08-20 17:44 評論0 收藏0
案例 - 收藏集 - 掘金

摘要：同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候，遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 評論0 收藏0