成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

一種深拷貝的解決思路

Ocean / 1487人閱讀

摘要：用來(lái)實(shí)現(xiàn)數(shù)組的拷貝，先試試傳入表示截取全部你家的我要修改成我的名字看到結(jié)果我又懵了，你這是幾個(gè)意思啊，我死了兩千多個(gè)腦細(xì)胞才想出來(lái)的思路，竟然還是會(huì)改變，查詢(xún)的資料顯示確實(shí)可以實(shí)現(xiàn)拷貝而不改變?cè)瓟?shù)組的功能啊，難道看漏了。

背景

最近在做數(shù)據(jù)處理的過(guò)程中，遇到一個(gè)問(wèn)題，如下：
后臺(tái)傳遞過(guò)來(lái)一組數(shù)據(jù) Array，每個(gè)數(shù)組元素里面又包含了子對(duì)象，我要對(duì)這組數(shù)據(jù)進(jìn)行處理，但是不想影響到原數(shù)組，同時(shí)原數(shù)組可能會(huì)要進(jìn)行多個(gè)方向的數(shù)據(jù)格式化，為了渲染不同的界面。

原始數(shù)據(jù) 
let data = [
    {
        id: 1,
        name: "luoxue",
        age: 25
    },
    {
        id: 2,
        name: "kk",
        age: 22
    },
    {
        id: 3,
        name: "qiuxia",
        age: 22
    }
];
處理方案

1、直接用 = 賦值

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

不管是對(duì) myData 還是對(duì) yourData 操作，都改變了原來(lái)的 data，我心慌啊，原數(shù)據(jù)怎么能亂動(dòng)呢，要是它主人追究怎么辦？我又弱又餓，跑不過(guò)也打不過(guò)，左思右想，有了第二種思路。

2、用 slice 來(lái)實(shí)現(xiàn)數(shù)組的拷貝，先試試

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

看到結(jié)果我又懵了，你這是幾個(gè)意思啊，我死了兩千多個(gè)腦細(xì)胞才想出來(lái)的思路，竟然還是會(huì)改變，查詢(xún)的資料顯示 slice 確實(shí)可以實(shí)現(xiàn)拷貝而不改變?cè)瓟?shù)組的功能啊，難道看漏了。
再認(rèn)真看了遍資料，有點(diǎn)思緒，slice 雖然返回的是一個(gè)新數(shù)組，但是元素如果是對(duì)象，該引用的還是引用，原來(lái)如此。
slice 相當(dāng)于數(shù)組的淺拷貝，如果數(shù)組中的元素是基本類(lèi)型，那就可以通過(guò)它來(lái)實(shí)現(xiàn)拷貝。

江湖走馬，風(fēng)也好，雨也罷 ------《道君》

3、用 JSON 轉(zhuǎn)，先轉(zhuǎn)字符串，再轉(zhuǎn)回對(duì)象

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

咦，還有點(diǎn)靠譜的樣子，竟然可以，這么簡(jiǎn)單，不會(huì)有什么坑吧，先用著試試，不過(guò) jQuery.extend 也可以實(shí)現(xiàn)，難道它也是這樣做的，不太可能，再思考思考。

4、自己寫(xiě)個(gè)深拷貝的函數(shù) clone

const clone = (b) => {
  if(Array.isArray(b)) {
    // 數(shù)組拷貝
    let obj = [];
    for(let i = 0; i < b.length; i++) {
      obj[i] = clone(b[i]);
    }
    return obj;
  }else if(b instanceof Object) {
    // 對(duì)象拷貝
    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); // 返回什么，不告訴你，雖然報(bào)錯(cuò)了.

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/83544.html

相關(guān)文章

  • JavaScript對(duì)象深拷貝/淺拷貝遇到的坑和解決方法

    摘要：在以上討論和研究結(jié)束后，同學(xué)向我推薦了一個(gè)庫(kù)，測(cè)試了一下該庫(kù)存在方法，實(shí)現(xiàn)深拷貝更為完整和精致，前文問(wèn)題均沒(méi)有在該方法內(nèi)被發(fā)現(xiàn)，在這里提一波。 如果本文對(duì)您有任何幫助或者您有任何想要提出的意見(jiàn)或問(wèn)題，請(qǐng)?jiān)诒疚南路交貜?fù)，誠(chéng)摯歡迎各位參與討論，望各位不吝指教。原載自己的小博客 JavaScript對(duì)象拷貝遇到的坑和解決方法 | 手柄君的小閣，所以無(wú)恥地算原創(chuàng)吧 近期參與某集訓(xùn)，Java...

    atinosun 評(píng)論0 收藏0

  • 深拷貝的終極探索（99%的人都不知道）

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

    qingshanli1988 評(píng)論0 收藏0

  • 好文 - 收藏集 - 掘金

    摘要：好吧，本文的主題可能還深入剖析的深復(fù)制前端掘金一年前我曾寫(xiě)過(guò)一篇中的一種深復(fù)制實(shí)現(xiàn)，當(dāng)時(shí)寫(xiě)這篇文章的時(shí)候還比較稚嫩，有很多地方?jīng)]有考慮仔細(xì)。 翻譯 | 深入理解 CSS 時(shí)序函數(shù) - 前端 - 掘金作者：Nicolas（滬江前端開(kāi)發(fā)工程師） 本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處。 各位，趕緊綁住自己并緊緊抓牢了，因?yàn)楫?dāng)你掌握了特別有趣但又復(fù)雜的CSS時(shí)序函數(shù)之后，你將會(huì)真正體驗(yàn)到豎起頭發(fā)般的...

    fobnn 評(píng)論0 收藏0

  • 案例 - 收藏集 - 掘金

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

    張金寶 評(píng)論0 收藏0

  • 案例 - 收藏集 - 掘金

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

    huangjinnan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<