快捷導(dǎo)航

詳細(xì)聊聊JS中不一樣的深拷貝

更新時(shí)間：2022年10月16日 09:14:36 作者：當(dāng)然是黑貓警長啦

對于js中的對象的深拷貝在項(xiàng)目的開發(fā)中比較常用到,這篇文章主要給大家介紹了關(guān)于JS中不一樣的深拷貝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

對于深拷貝這個(gè)概念在面試中時(shí)常被提起，面試官可能讓你實(shí)現(xiàn)深拷貝需要考慮那些因素，或者直接讓你手寫封裝一個(gè)深拷貝，那么今天就和大家探討一下一個(gè)讓面試官感到牛的深拷貝，

1.思考

眾所周知普通的數(shù)據(jù)類型是值存儲(chǔ)，而復(fù)雜類型是通過開辟內(nèi)存空間來存儲(chǔ)數(shù)據(jù)的，我們通過內(nèi)存地址從而查找數(shù)據(jù)，為了可以完全得到一個(gè)與原對象一模一樣但又沒有內(nèi)存地址關(guān)聯(lián)的深拷貝，我們需要考慮的因素其實(shí)有很多， 1.Object.create()創(chuàng)造的對象 ， Object.create()詳細(xì)介紹

  let obj = Object.create(null)
            obj.name = '張三'
            obj.age = 22

這個(gè)對象是一個(gè)沒有原型的對象，大部分對象都有自己的原型，可以使用公共的方法，但這個(gè)卻不行，我們是不是應(yīng)該把它考慮進(jìn)去？

2.symbol作為屬性名的情況 Symbol詳細(xì)介紹以及 for in 詳細(xì)介紹

let obj = {
            name: 'aa',
            age: 22,
            [Symbol('a')]: '獨(dú)一無二的'
            }

對于帶有symbol的屬性，在 for in 的迭代中是不可枚舉的，我們是不是需要考慮如何解決？

3.對于修改對象的屬性描述 Object.defineProperty()

let obj = { name: 'ayu', age: 22, sex: '男' }
Object.defineProperty(obj, 'age', {
    enumerable: true,
    configurable: true,
    value: 22,
    writable: false
})

這里我們改寫了原對象的屬性描述，age變得無法枚舉，for in 也失去效果，并且很多默認(rèn)的屬性描述信息，我們是不是在拷貝后也應(yīng)該和原對象保持一致？

4.對象的循環(huán)引用

let obj = { name: 'ayu', age: 22, sex: '男' }
obj.e = e

obj對象中有個(gè)e的屬性指向obj，造成相互引用，當(dāng)我們在封裝深拷貝時(shí)，主要是通過遞歸來逐層查找屬性值的情況，然后對其進(jìn)行操作，如果出現(xiàn)這個(gè)情況，就會(huì)死循環(huán)遞歸造成棧內(nèi)存溢出，這種情況難道也不值得考慮嘛？

5.一些特殊的對象 都說萬物皆對象，對象其實(shí)有很多類型，正則，日期(Date)，等都需要特殊處理而函數(shù)和數(shù)組就比較簡單

6.深拷貝的多數(shù)要點(diǎn) 也就是當(dāng)一個(gè)對象里面嵌套了多層對象，這個(gè)大家應(yīng)該都知道，我們通常一般使用遞歸去處理，再結(jié)合上面分析的因素就可以封裝函數(shù)了

const isComplexDataType = (obj) => (typeof obj === 'object' || typeof obj === 'function') && obj !== null
const deepClone = function (obj, hash = new WeakMap()) {
    if (obj.constructor === Date) return new Date(obj) // 日期對象直接返回一個(gè)新的日期對象
    if (obj.constructor === RegExp) return new RegExp(obj) //正則對象直接返回一個(gè)新的正則對象
    //如果循環(huán)引用了就用 weakMap 來解決
    if (hash.has(obj)) return hash.get(obj)
    let allDesc = Object.getOwnPropertyDescriptors(obj)
    //遍歷傳入?yún)?shù)所有鍵的特性
    let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)
    //繼承原型鏈
    hash.set(obj, cloneObj)
    for (let key of Reflect.ownKeys(obj)) {
        cloneObj[key] =
            isComplexDataType(obj[key]) && typeof obj[key] !== 'function' ? deepClone(obj[key], hash) : obj[key]
    }
    return cloneObj
}

思路從deepclone這個(gè)函數(shù)開始說起

1.如果對象的構(gòu)造器是Date構(gòu)造器，則我們使用Dte構(gòu)造器再構(gòu)造一個(gè)Date
如果對象的構(gòu)造器是正則構(gòu)造器再構(gòu)造一個(gè)正則
WeakMap我們先不提，allDesc是拿到原對象所有的屬性（可枚舉以及不可枚舉）以及對應(yīng)的屬性描述信息
cloneObj是我們根據(jù)第三步拷貝的一個(gè)新的對象的信息，不過是一個(gè)淺拷貝，而且我們考慮了原型不存在的情況 Object.assin與Object.create的區(qū)別
通過for of 循環(huán) Reflect.ownKeys(obj) Reflect.ownKeys()用法（Reflect.ownKeys()可以遍歷對象自身所有的屬性（symbol，不可枚舉都可以），然后重新將obj的key以及對應(yīng)的值賦值給cloneObj，并且對obj[key]的值做了討論，當(dāng)它是對象并且不是函數(shù)時(shí)，我們遞歸處理，否則里面為普通值，直接賦給ObjClone

對于deepClone的第二個(gè)參數(shù)WeakMap來講，請大家想想最開始我們提到的一個(gè)問題，我們有一個(gè)對象，然后我們填了了一個(gè)屬性，屬性為這個(gè)對象，這是在相互引用，如果我們處理這樣的對象，也使用遞歸處理，那么就是死循環(huán)，因此我們需要一個(gè)數(shù)據(jù)結(jié)構(gòu)來解決，每次我們遞歸處理的時(shí)候，都把obj，以及賦值的cloneobj對應(yīng)存儲(chǔ)，當(dāng)遇到死循環(huán)的時(shí)候直接return這個(gè)對象即可 WeakMap詳細(xì)介紹·

(本文用到大量ES5以后的API，推薦閱讀阮一峰老師的ES6，這樣才能理解的透徹)

總結(jié)

到此這篇關(guān)于JS中不一樣的深拷貝的文章就介紹到這了,更多相關(guān)JS深拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: