實現(xiàn)一個深度克隆

檢測數(shù)據(jù)類型的方法:

準(zhǔn)備工作

1、typeof
typeof返回的數(shù)據(jù)類型有:

String->'string'
Number->'number'
Boolean->'boolean'
Undefined->'undefined'
Null/Array/Object->'object'
Function->'function'
NaN->'number'

所以,Null和Array用typeof并不能準(zhǔn)確的檢測到胡诗。
2得封、Object.prototype.toString.call(obj)
這個可以檢測出Null/Array/Object,它的返回格式為[object Null/Array/Object]
obj為要檢測的數(shù)據(jù)。
至此趁曼,我們可以寫一個函數(shù)來檢測數(shù)據(jù)類型了

        //檢測數(shù)據(jù)類型
        function checkType(data) {
            return Object.prototype.toString.call(data).slice(8,-1)
        }    

接下來失暴,我們來寫一個針對對象或者數(shù)組的深度克隆函數(shù):

        function cloneDeep(initData) {
            //定義result來存放克隆后的數(shù)據(jù)坯门,最終返回出去
            let result = undefined
            //檢測傳入的數(shù)據(jù)類型
            let type = checkType(initData)

            //不同的原數(shù)據(jù)最終返回的result的類型不同
            if( type === 'Object') {
                result = {}
            } else if(type === 'Array') {
                result = []
            } else {
                return initData
            }

            //for...in循環(huán)遍歷判斷原數(shù)據(jù)
            for (const key in initData) {
                //如果元素是引用類型的數(shù)據(jù)微饥,遞歸
                if( checkType(initData[key]) === 'Object' || checkType(initData[key]) === 'Array'  ) {
                    result[key] = cloneDeep(initData[key])
                } else {
                    //如果元素是基本數(shù)據(jù),直接賦值
                    result[key] = initData[key]
                }
            }

            return result
        }

測試一下:

        let data1 = {
            name: 'jack',
            hobbaies: ['reading', 'singing', 'playing basketball'],
            job: {
                salary: 15000,
                work: ['項目經(jīng)理', 'web前端']
            }
        }
        let data2 = [1, {  age: 20 }, ['aa','bb']]
        
        let cloneData1 = cloneDeep(data1)
        let cloneData2 = cloneDeep(data2)

        cloneData1.job.salary = 18000
        cloneData2[2][0] = 'cc'

        console.log(cloneData1.job.salary, data1.job.salary) //18000 15000
        console.log(cloneData2[2][0], data2[2][0]) //aa cc

最終拷貝的都是基本數(shù)據(jù)類型古戴。
關(guān)于JSON.parse(JSON.stringify()),它實現(xiàn)深拷貝的原理也是這樣欠橘,先將原數(shù)據(jù)轉(zhuǎn)化為字符串進(jìn)行復(fù)制,再通過parse轉(zhuǎn)回對象或數(shù)組现恼。

以上方法只針對對象和數(shù)組有效肃续。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市叉袍,隨后出現(xiàn)的幾起案子始锚,更是在濱河造成了極大的恐慌,老刑警劉巖喳逛,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瞧捌,死亡現(xiàn)場離奇詭異,居然都是意外死亡润文,警方通過查閱死者的電腦和手機察郁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來转唉,“玉大人皮钠,你說我怎么就攤上這事≡ǎ” “怎么了麦轰?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長砖织。 經(jīng)常有香客問我款侵,道長,這世上最難降的妖魔是什么侧纯? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任新锈,我火速辦了婚禮,結(jié)果婚禮上眶熬,老公的妹妹穿的比我還像新娘妹笆。我一直安慰自己,他們只是感情好娜氏,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布拳缠。 她就那樣靜靜地躺著,像睡著了一般贸弥。 火紅的嫁衣襯著肌膚如雪窟坐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機與錄音哲鸳,去河邊找鬼臣疑。 笑死,一個胖子當(dāng)著我的面吹牛徙菠,可吹牛的內(nèi)容都是我干的朝捆。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼懒豹,長吁一口氣:“原來是場噩夢啊……” “哼芙盘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起脸秽,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤儒老,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后记餐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體驮樊,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年片酝,在試婚紗的時候發(fā)現(xiàn)自己被綠了囚衔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡雕沿,死狀恐怖练湿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情审轮,我是刑警寧澤肥哎,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站疾渣,受9級特大地震影響篡诽,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜榴捡,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一杈女、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吊圾,春花似錦达椰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躏筏。三九已至板丽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背埃碱。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工猖辫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人砚殿。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓啃憎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親似炎。 傳聞我的和親對象是個殘疾皇子辛萍,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容