JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制

MENU

源数据

classTest{constructor(){this.a =1;this.b =2;}c(){
        console.log('c');}};Test.prototype.d =1;const obj =newTest();
obj.h = obj;

正统深克隆

// 循环引用的克隆// 防止递归的无限执行// 避免报错// 避免内存泄漏const cache =newWeakMap();functionorthDeepClone(value){// 函数不需要克隆// 会进入此判断并直接返回if(typeof value !=='object'|| value ===null)return value;// 判断缓存是否存在当前值// 有的话返回结果// 没有就继续往下执行if(cache.has(value))return cache.get(value);// 创建数组或对象// 可以添加Map等其他对象const result = Array.isArray(value)?[]:{};// 设置result的原型为value的原型// 如果不设置// 当克隆类的时候返回的是普通对象
    Object.setPrototypeOf(result, Object.getPrototypeOf(value));// 设置缓存
    cache.set(value, result);for(const key in obj){// 不确定数据类型时使用// if (Object.hasOwnProperty.call(obj, key)) result[key] = orthDeepClone(obj[key]);// 确定数据类型时使用// 只克隆value的自有属性// 原型上的属性不参与克隆if(value.hasOwnProperty(key)) result[key]=orthDeepClone(obj[key]);}return result;}

console.log(orthDeepClone(obj));// Test {a: 1, b: 2, h: Test}

JSON深克隆

functionJSONDeepClone(value){returnJSON.parse(JSON.stringify(value));}

console.log(JSONDeepClone(obj));// 报错// Uncaught TypeError: Converting circular structure to JSON

**在

JavaScript

中，对象和数组是引用类型，当将一个对象或数组赋值给另一个变量时，它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。
为了创建一个独立的副本，可以使用深克隆。

JSON.stringify()

方法将

JavaScript

对象转换为一个

JSON

字符串，然后使用

JSON.parse()

方法将该字符串解析为一个新的

JavaScript

对象。通过这种方式，创建了一个完全独立的副本，对其中一个对象的修改不会影响到另一个对象。
需要注意的是，这种方法仅适用于可以被

JSON

表示的数据类型，例如

对象

、

数组

、

字符串

、

数字

、

布尔值

和

null

。它不能复制

函数

、

正则表达式

、

Date

对象等特殊类型的值。**