首页 > 网络编程 > JavaScript > javascript技巧 > JS深拷贝

详细聊聊JS中不一样的深拷贝

2022-10-16 09:11:42 作者：当然是黑猫警长啦

对于js中的对象的深拷贝在项目的开发中比较常用到,这篇文章主要给大家介绍了关于JS中不一样的深拷贝的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

对于深拷贝这个概念在面试中时常被提起，面试官可能让你实现深拷贝需要考虑那些因素，或者直接让你手写封装一个深拷贝，那么今天就和大家探讨一下一个让面试官感到牛的深拷贝，

1.思考

众所周知普通的数据类型是值存储，而复杂类型是通过开辟内存空间来存储数据的，我们通过内存地址从而查找数据，为了可以完全得到一个与原对象一模一样但又没有内存地址关联的深拷贝，我们需要考虑的因素其实有很多， 1.Object.create()创造的对象 ， Object.create()详细介绍

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

这个对象是一个没有原型的对象，大部分对象都有自己的原型，可以使用公共的方法，但这个却不行，我们是不是应该把它考虑进去？

2.symbol作为属性名的情况 Symbol详细介绍以及 for in 详细介绍

let obj = {
            name: 'aa',
            age: 22,
            [Symbol('a')]: '独一无二的'
            }

对于带有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 也失去效果，并且很多默认的属性描述信息，我们是不是在拷贝后也应该和原对象保持一致？

4.对象的循环引用

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

obj对象中有个e的属性指向obj，造成相互引用，当我们在封装深拷贝时，主要是通过递归来逐层查找属性值的情况，然后对其进行操作，如果出现这个情况，就会死循环递归造成栈内存溢出，这种情况难道也不值得考虑嘛？

5.一些特殊的对象 都说万物皆对象，对象其实有很多类型，正则，日期(Date)，等都需要特殊处理而函数和数组就比较简单

6.深拷贝的多数要点 也就是当一个对象里面嵌套了多层对象，这个大家应该都知道，我们通常一般使用递归去处理，再结合上面分析的因素就可以封装函数了

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) // 日期对象直接返回一个新的日期对象
    if (obj.constructor === RegExp) return new RegExp(obj) //正则对象直接返回一个新的正则对象
    //如果循环引用了就用 weakMap 来解决
    if (hash.has(obj)) return hash.get(obj)
    let allDesc = Object.getOwnPropertyDescriptors(obj)
    //遍历传入参数所有键的特性
    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这个函数开始说起

1.如果对象的构造器是Date构造器，则我们使用Dte构造器再构造一个Date
如果对象的构造器是正则构造器再构造一个正则
WeakMap我们先不提，allDesc是拿到原对象所有的属性（可枚举以及不可枚举）以及对应的属性描述信息
cloneObj是我们根据第三步拷贝的一个新的对象的信息，不过是一个浅拷贝，而且我们考虑了原型不存在的情况 Object.assin与Object.create的区别
通过for of 循环 Reflect.ownKeys(obj) Reflect.ownKeys()用法（Reflect.ownKeys()可以遍历对象自身所有的属性（symbol，不可枚举都可以），然后重新将obj的key以及对应的值赋值给cloneObj，并且对obj[key]的值做了讨论，当它是对象并且不是函数时，我们递归处理，否则里面为普通值，直接赋给ObjClone

对于deepClone的第二个参数WeakMap来讲，请大家想想最开始我们提到的一个问题，我们有一个对象，然后我们填了了一个属性，属性为这个对象，这是在相互引用，如果我们处理这样的对象，也使用递归处理，那么就是死循环，因此我们需要一个数据结构来解决，每次我们递归处理的时候，都把obj，以及赋值的cloneobj对应存储，当遇到死循环的时候直接return这个对象即可 WeakMap详细介绍·

(本文用到大量ES5以后的API，推荐阅读阮一峰老师的ES6，这样才能理解的透彻)

总结

到此这篇关于JS中不一样的深拷贝的文章就介绍到这了,更多相关JS深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

详细聊聊JS中不一样的深拷贝

您可能感兴趣的文章: